用JQuery让GT-Grid的下拉列表实现二级联动

原链接：http://www.iteye.com/topic/603857

主题：用JQuery让GT-Grid的下拉列表实现二级联动

最近项目里面非要实现下列列表的二级联动，由于GT-Grid的下拉列表不支持二级联动，只有自己慢慢摸索了。

注意：1.如果用jQuery1.3.2在ie下面有问题(不能联动)，所以建议使用jQuery1.4.2；

更新：由于上传的附件是tomcat下的工程文件，现在修改为myeclipse工程目录。

更新2：增加了一种方法，比方法一更精确。附件并未更新，请自行更新代码。

相关代码如下：

Js代码

1. $(document).ready(function() {
2. var dsConfig = {
3. fields : [{
4. name : 'id',
5. type : 'int'
6. }, {
7. name : 'province',
8. type : 'int'
9. }, {
10. name : 'city',
11. type : 'int'
12. }, {
13. name : 'total',
14. type : 'float'
15. }],
16. uniqueField : 'id'
17. };
18. var colsConfig = [{
19. id : 'id',
20. header : "ID",
21. headAlign : 'center',
22. width : 80,
23. align : 'center'
24. }, {
25. id : 'province',
26. header : "省份",
27. headAlign : 'center',
28. width : 80,
29. align : 'center',
30. renderer : GT.Grid.mappingRenderer(province, '未知省份'),// 可以动态取得数据库里面的值
31. editor : {
32. type : 'select',
33. options : province
34. }
35. }, {
36. id : 'city',
37. header : "城市",
38. headAlign : 'center',
39. width : 80,
40. align : 'center',
41. renderer : GT.Grid.mappingRenderer(city, '未知城市'),// 动态取得数据库里面的值
42. editor : {
43. type : 'select',
44. // options : city //这里可以只为省份为1的城市列表。
45. options : {
46. 1 : '武汉',
47. 2 : '鄂州',
48. 3 : '恩施',
49. 4 : '黄冈',
50. 5 : '黄石',
51. 6 : '荆门',
52. 7 : '荆州',
53. 8 : '潜江'
54. }
55. }
56. }, {
57. id : 'total',
58. header : "总计",
59. headAlign : 'center',
60. width : 130,
61. align : 'center'
62. }];
63. var province_value = "";// 用于存放省份下拉框值
64. var gridConfig = {
65. id : "grid",
66. dataset : dsConfig,
67. columns : colsConfig,
68. container : 'grid_container',
69. toolbarPosition : 'bottom',
70. toolbarContent : toolbar,// 定义为一个变量，可以让不同的角色能看到不同的toolbar，达到控制角色目的
71. pageSize : 10,
72. pageSizeList : [5, 10, 15],
73. loadURL : 'all.action',
74. resizable : true,
75. autoLoad : true,
76. selectRowByCheck : true,
77. remotePaging : false,
78. onComplete : function(grid) {
79. $(".gt-menuitem:last-child").hide();
80. // 二级联动
81. if ($("#company_id").length == 0) {
82. $($(".gt-editor-text")[0]).attr("id","company_select");
83. $($(".gt-editor-text")[1]).attr("id","department_select");
84. }
85. $("#company_select").bind("change",function() {
86. var url = "companyLink";
87. var params = {
88. company : $('#company_select').val()
89. };
90. $.post(url, params, callBack, 'json');
91. function callBack(date) {
92. var select_value = "";
93. $.each(date.info, function(i, item) {
94. select_value = select_value + "<option value='" + item.id +"'>" + item.va + "</option>";
95. });
96. $("#department_select").html(select_value);
97. }
98. });
99. }
101. clickStartEdit : false,
102. reloadAfterSave : true,
103. recountAfterSave : true,
104. defaultRecord : {
105. id : 1,
106. province : 1,
107. city : 1,
108. total : 111.01
109. }
110. };
111. var mygrid = new GT.Grid(gridConfig);
112. GT.Utils.onLoad(GT.Grid.render(mygrid));

$(document).ready(function() {var dsConfig = {fields : [{    name : 'id',    type : 'int'    }, {    name : 'province',    type : 'int'    }, {    name : 'city',    type : 'int'    }, {    name : 'total',    type : 'float'    }],uniqueField : 'id'};var colsConfig = [{    id : 'id',    header : "ID",    headAlign : 'center',    width : 80,    align : 'center'    }, {    id : 'province',    header : "省份",    headAlign : 'center',    width : 80,    align : 'center',    renderer : GT.Grid.mappingRenderer(province, '未知省份'),// 可以动态取得数据库里面的值    editor : {    type : 'select',    options : province    }    }, {    id : 'city',    header : "城市",    headAlign : 'center',    width : 80,    align : 'center',    renderer : GT.Grid.mappingRenderer(city, '未知城市'),// 动态取得数据库里面的值    editor : {    type : 'select',    // options : city //这里可以只为省份为1的城市列表。    options : {    1 : '武汉',    2 : '鄂州',    3 : '恩施',    4 : '黄冈',    5 : '黄石',    6 : '荆门',    7 : '荆州',    8 : '潜江'    }    }    }, {    id : 'total',    header : "总计",    headAlign : 'center',    width : 130,    align : 'center'    }];var province_value = "";// 用于存放省份下拉框值var gridConfig = {id : "grid",dataset : dsConfig,columns : colsConfig,container : 'grid_container',toolbarPosition : 'bottom',toolbarContent : toolbar,// 定义为一个变量，可以让不同的角色能看到不同的toolbar，达到控制角色目的pageSize : 10,pageSizeList : [5, 10, 15],loadURL : 'all.action',resizable : true,autoLoad : true,selectRowByCheck : true,remotePaging : false,onComplete : function(grid) {  $(".gt-menuitem:last-child").hide();  // 二级联动  if ($("#company_id").length == 0) {  $($(".gt-editor-text")[0]).attr("id", "company_select");  $($(".gt-editor-text")[1]).attr("id", "department_select");  }  $("#company_select").bind("change", function() {    var url = "companyLink";    var params = {    company : $('#company_select').val()    };    $.post(url, params, callBack, 'json');    function callBack(date) {    var select_value = "";    $.each(date.info, function(i, item) {      select_value = select_value + "<option value='" + item.id + "'>" + item.va + "</option>";      });    $("#department_select").html(select_value);    }    });  }clickStartEdit : false,reloadAfterSave : true,recountAfterSave : true,defaultRecord : {id : 1,province : 1,city : 1,total : 111.01}};var mygrid = new GT.Grid(gridConfig);GT.Utils.onLoad(GT.Grid.render(mygrid));

关于如何取class，如：$(".gt-col-grid-province div")

.gt-col-grid-province为td的class，如何定义的呢？gt-col-加上这个grid的id，我的grid的id是“grid"，再加上这列的ID，就是：gt-col-grid-province.

赋值给id后两个下拉列表：

Html代码

1. <div class="gt-editor-container">
2. <select id="province_select"class="gt-editor-text">
3. <option value="1">湖北
4. </option>
5. <option value="2">福建
6. </option>
7. <option value="3">宁夏
8. </option>
9. </select>
10. </div>
11. <div class="gt-editor-container">
12. <select id="city_select"class="gt-editor-text">
13. <option value="1">武汉
14. </option>
15. <option value="2">鄂州
16. </option>
17. <option value="3">恩施
18. </option>
19. <option value="4">黄冈
20. </option>
21. <option value="5">黄石
22. </option>
23. <option value="6">荆门
24. </option>
25. <option value="7">荆州
26. </option>
27. <option value="8">潜江
28. </option>
29. </select>
30. </div>

<div class="gt-editor-container"><select id="province_select" class="gt-editor-text"><option value="1">湖北</option><option value="2">福建</option><option value="3">宁夏</option></select></div><div class="gt-editor-container"><select id="city_select" class="gt-editor-text"><option value="1">武汉</option><option value="2">鄂州</option><option value="3">恩施</option><option value="4">黄冈</option><option value="5">黄石</option><option value="6">荆门</option><option value="7">荆州</option><option value="8">潜江</option></select></div>

主要是用jQuery改变#city_select下拉列表的值。

部分效果图如下：

IE6，Firefox3.6，chrome5下测试通过，欢迎拍砖。

jQuery插件flexigrid使用总结

• gtgrid_LianDong.rar (3.8 MB)
• 下载次数: 2025