使用EasyUi实现三级联动

原文地址：http://blog.csdn.net/shipeng22022/article/details/24233163

其它的都不说，使用easyui实现三级联动主要就是一层套一层，大家且看代码

html表单

[html]  view plain  copy

 print ?

1. 请选择： <input id="txtShouName" style="width:170px;">    
2. <input id="txtPipeRowName" style="width:150px;">       
3. <input  id="txtPipeName" style="width:150px;">  

easyUi的Combobox:

[javascript]  view plain  copy

 print ?

1. // 一层Combo  
2. var srmCombx = $("#txtShouName").combobox({  
3. loader:function(param,success,error){  
4.     $.ajax({  
5. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+selectSgId+'',  
6. dataType: 'json',  
7. success: function(data){  
8. data.unshift({equipmentid:'',equipmentname:'全部'});  
9. success(data);  
10. },  
11.                error: function(){  
12. error.apply(this, arguments);  
13. }  
14. });  
15.    },  
16.    onSelect:function(record){  //onSelect 用户点击时触发的事件  在此的意义在于，用户点击一级后自动二级combobox  
17.     piperowCombx.combobox({  
18. loader:function(param,success,error){  
19.     $.ajax({  
20. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName").combobox("getValue")+'',  
21. dataType: 'json',  
22. success: function(data){  
23. data.unshift({equipmentid:'',equipmentname:'全部'});  
24. success(data);  
25. },  
26.                error: function(){  
27. error.apply(this, arguments);  
28. }  
29. });  
30.    },  
31.    onSelect:function(record){ //这里也使用了onSelect事件，在二级combobox被用户点击时触发三级combobox  
32.     pipeCombx.combobox({  
33. loader:function(param,success,error){  
34.     $.ajax({  
35. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName").combobox("getValue")+'',  
36. dataType: 'json',  
37. success: function(data){  
38. data.unshift({equipmentid:'',equipmentname:'全部'});  
39. success(data);  
40. },  
41.                error: function(){  
42. error.apply(this, arguments);  
43. }  
44. });  
45.    },  
46.    valueField: 'equipmentid',     
47.    textField: 'equipmentname',  
48.    value:'',  
49.    editable:false  
50. });  
51.    },  
52.    onLoadSuccess:function(){  //清空三级下拉框 就是成功加载完触发的事件 当一级combobox改变时，二级和三级就需要清空  
53.     pipeCombx.combobox("clear");  
54.     pipeCombx.combobox('setValue', '全部'); //给combobox下拉框设置一个值，否则为空不好看  
55.    },  
56.    valueField: 'equipmentid',     
57.    textField: 'equipmentname',  
58.    value:'',  
59.    editable:false  
60. }).combobox("clear"); //清空二级下拉框  
61.   
62.    },  
63.    valueField: 'equipmentid',     
64.    textField: 'equipmentname',  
65.    value:'',  
66.    editable:false  
67. });  
68. /******************************************************************************************************/  
69. //下面的俩个是组件，  
70.   
71. //  二层Combo  
72. var piperowCombx = $("#txtPipeRowName").combobox({  
73. loader:function(param,success,error){  
74.     $.ajax({  
75. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName").combobox("getValue")+'',  
76. dataType: 'json',  
77. success: function(data){  
78. data.unshift({equipmentid:'',equipmentname:'全部'});  
79. success(data);  
80. },  
81.                error: function(){  
82. error.apply(this, arguments);  
83. }  
84. });  
85.    },  
86.    valueField: 'equipmentid',     
87.    textField: 'equipmentname',  
88.    value:'',  
89.    editable:false  
90. });  
91.   
92. //三层Combo  
93. var pipeCombx=$("#txtPipeName").combobox({  
94. loader:function(param,success,error){  
95.     $.ajax({  
96. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName").combobox("getValue")+'',  
97. dataType: 'json',  
98. success: function(data){  
99. data.unshift({equipmentid:'',equipmentname:'全部'});  
100. success(data);  
101. },  
102.                error: function(){  
103. error.apply(this, arguments);  
104. }  
105. });  
106.    },  
107.    valueField: 'equipmentid',     
108.    textField: 'equipmentname',  
109.    value:'',  
110.    editable:false  
111. });