|
02.07.2013, 07:26
#38316575
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Проблема со связанными списками из БД в jqgrid. Если списки статические всё работает замечательно, а вот если они берутся из БД, то беда какая-то. Есть список стран County и список штатов States,который зависит от страны.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
<script type="text/javascript">
$(document).ready(function() {
grid = $("#list"),
resetStatesValues = function() {
// set 'value' property of the editoptions to initial state
grid.jqGrid('setColProp', 'State', {editoptions: {
// value: states
dataUrl: '../../SprSelect?param=5',
buildSelect: function(data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.id + '">' + ri.fname + '</option>';
}
}
return s + "</select>";
}
}
});
};
grid.jqGrid({
url: '../../GeneralWater',
postData: {month: 5, year: 2013},
mtype: 'GET',
datatype: 'JSON',
colModel: [
{
name: 'Country',
width: 100,
editable: true,
/*formatter: 'select',*/
edittype: 'select',
editoptions: {
dataUrl: '../../SprSelect?param=3&typeId=2',
buildSelect: function(data) {
var jqGridCounty = jQuery.parseJSON(data);
var s = '<select>';
if (jqGridCounty && jqGridCounty.length) {
for (var i = 0, l = jqGridCounty.length; i < l; i++) {
s += '<option value="' + jqGridCounty[i].id + '">' + jqGridCounty[i].name + '</option>';
}
}
return s + "</select>";
},
dataInit: function(elem) {
var v = $(elem).val();
grid.jqGrid('setColProp', 'State', {editoptions: {dataUrl: '../../SprSelect?param=4&firmId='+v
}});
},
dataEvents: [
{
type: 'change',
fn: function(e) {
var jqGridStates;
var v = $(e.target).val();
$.ajax({
url: '../../SprSelect',
data: {param: 4, firmId: v},
dataType: 'json',
async: false,
success: function(States) {
jqGridStates = States;
}
});
// build 'State' options based on the selected 'Country' value
var sc = jqGridStates,
newOptions = '',
stateId,
form,
row;
for (stateId in sc) {
if (sc.hasOwnProperty(stateId)) {
newOptions += '<option role="option" value="' +
jqGridStates[stateId].id + '">' +
jqGridStates[stateId].fname + '</option>';
}
}
resetStatesValues();
// populate the subset of contries
if ($(e.target).is('.FormElement')) {
// form editing
form = $(e.target).closest('form.FormGrid');
// $("select#State.FormElement", form[0]).html(newOptions);
$("#tr_State select.FormElement").html(newOptions);
} else {
// inline editing
row = $(e.target).closest('tr.jqgrow');
$("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions);
}
}
}
]
}
},
{
name: 'State',
width: 100,
editable: true,
/*formatter: 'select',*/
edittype: 'select',
editoptions: {
// value: states
dataUrl: '../../SprSelect?param=5',
buildSelect: function(data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.id + '">' + ri.fname + '</option>';
}
}
return s + "</select>";
}
}
}
],
editurl: 'clientArray',
ignoreCase: true,
height: '100%',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
pager: '#pager',
caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid', '#pager', {edit: true, add: true, del: false, search: false, refresh: true},
{// edit options
recreateForm: true,
viewPagerButtons: false,
onClose: function() {
resetStatesValues();
}
},
{// add options
recreateForm: true,
viewPagerButtons: false,
onClose: function() {
resetStatesValues();
}
});
});
</script>
Почему-то не работает блок dataInit у County
1.
2.
3.
4.
5.
dataInit: function(elem) {
var v = $(elem).val();
grid.jqGrid('setColProp', 'State', {editoptions: {dataUrl: '../../SprSelect?param=4&firmId='+v
}});
}
То есть при добавлении строки изначально не отбираюся штаты по default option County. А вот блок dataEvents при событии change отрабатывает нормально и штаты при изменении страны меняются правильно. И непонятно как быть с редактированием поля States. |
|
|
