使用EasyUi实现三级联动

69 阅读 0 评论 46 点赞

我是靠谱客的博主丰富云朵，最近开发中收集的这篇文章主要介绍使用EasyUi实现三级联动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

html表单

[html] 
view plain
 copy
 print
?
 请选择： <input id="txtShouName" style="width:170px;">    
 <input id="txtPipeRowName" style="width:150px;">       
 <input  id="txtPipeName" style="width:150px;">  

easyUi的Combobox:

[javascript] 
view plain
 copy
 print
?
 // 一层Combo  
 var srmCombx = $("#txtShouName").combobox({  
 loader:function(param,success,error){  
     $.ajax({  
 url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+selectSgId+'',  
 dataType: 'json',  
 success: function(data){  
 data.unshift({equipmentid:'',equipmentname:'全部'});  
 success(data);  
 },  
                error: function(){  
 error.apply(this, arguments);  
 }  
 });  
    },  
    onSelect:function(record){  //onSelect 用户点击时触发的事件  在此的意义在于，用户点击一级后自动二级combobox  
     piperowCombx.combobox({  
 loader:function(param,success,error){  
     $.ajax({  
 url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName").combobox("getValue")+'',  
 dataType: 'json',  
 success: function(data){  
 data.unshift({equipmentid:'',equipmentname:'全部'});  
 success(data);  
 },  
                error: function(){  
 error.apply(this, arguments);  
 }  
 });  
    },  
    onSelect:function(record){ //这里也使用了onSelect事件，在二级combobox被用户点击时触发三级combobox  
     pipeCombx.combobox({  
 loader:function(param,success,error){  
     $.ajax({  
 url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName").combobox("getValue")+'',  
 dataType: 'json',  
 success: function(data){  
 data.unshift({equipmentid:'',equipmentname:'全部'});  
 success(data);  
 },  
                error: function(){  
 error.apply(this, arguments);  
 }  
 });  
    },  
    valueField: 'equipmentid',     
    textField: 'equipmentname',  
    value:'',  
    editable:false  
 });  
    },  
    onLoadSuccess:function(){  //清空三级下拉框 就是成功加载完触发的事件 当一级combobox改变时，二级和三级就需要清空  
     pipeCombx.combobox("clear");  
     pipeCombx.combobox('setValue', '全部'); //给combobox下拉框设置一个值，否则为空不好看  
    },  
    valueField: 'equipmentid',     
    textField: 'equipmentname',  
    value:'',  
    editable:false  
 }).combobox("clear"); //清空二级下拉框  
   
    },  
    valueField: 'equipmentid',     
    textField: 'equipmentname',  
    value:'',  
    editable:false  
 });  
 /******************************************************************************************************/  
 //下面的俩个是组件，  
   
 //  二层Combo  
 var piperowCombx = $("#txtPipeRowName").combobox({  
 loader:function(param,success,error){  
     $.ajax({  
 url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName").combobox("getValue")+'',  
 dataType: 'json',  
 success: function(data){  
 data.unshift({equipmentid:'',equipmentname:'全部'});  
 success(data);  
 },  
                error: function(){  
 error.apply(this, arguments);  
 }  
 });  
    },  
    valueField: 'equipmentid',     
    textField: 'equipmentname',  
    value:'',  
    editable:false  
 });  
   
 //三层Combo  
 var pipeCombx=$("#txtPipeName").combobox({  
 loader:function(param,success,error){  
     $.ajax({  
 url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName").combobox("getValue")+'',  
 dataType: 'json',  
 success: function(data){  
 data.unshift({equipmentid:'',equipmentname:'全部'});  
 success(data);  
 },  
                error: function(){  
 error.apply(this, arguments);  
 }  
 });  
    },  
    valueField: 'equipmentid',     
    textField: 'equipmentname',  
    value:'',  
    editable:false  
 });  