easyUI datagrid的combobox的联动效果

悠悠 2022-09-25 12:21 238阅读 0赞

最近做项目，大量用到easyui datagrid的方法，也学到了不少东西，先记录下来，方便以后查找

combobox的联动效果和赋值旁边的表格  
\{field:'joinUnitName',title:'培训队伍',width:120,align:'center',  
                        formatter:function(value, row)\{  
                        if(row.isNewRecord == true)\{  
                        var text = "";  
                        for(var i = 0; i < unitData.length; i ++)\{  
                        var d = unitData\[i\];  
                        if(d.value == value)\{  
                        text = d.text;  
                        \}  
                        \}  
                        return text;  
                        \}else\{  
                       return value;  
                        \}  
                        \},  
                        editor:\{type:"combobox",options:\{  
data : unitData,  
textField: "text",  
valueField : "value",  
editable:false,  
required:true,  
onSelect:function()\{  
var varSelect = $(this).combobox('getValue');  
 var row = $('\#jcReportDetail').datagrid('getSelected');  
 var rowIndex = $('\#jcReportDetail').datagrid('getRowIndex',row);//获取行号  
 var target = $('\#jcReportDetail').datagrid('getEditor', \{ index : rowIndex , field :'joinOrgName'\}).target;  
 target.combobox('clear'); //清除原来的数据  
 target.combobox('reload', '$\{root\}/sys/getTeamByUnitIdorg.action?unitId=' + varSelect);//联动下拉列表重载  
 teamSelect(varSelect);  
 var ed = $('\#jcReportDetail').datagrid('getEditor', \{index : rowIndex,field : 'joinUnitId'\});    
                           $(ed.target).val(varSelect);  
                           var target = $('\#jcReportDetail').datagrid('getEditor', \{ index : rowIndex , field :'joinUserName'\}).target;  
 target.combobox('clear'); //清除原来的数据  
 target.combobox('reload', '$\{root\}/sys/getUserByOrgIduser.action?orgId=' + varSelect);//联动下拉列表重载  
 userSelect(varSelect);  
\}  
\}  
                        \}\}

有两点一定要记住：

1、必须要清除原来的数据

2、赋值时被赋值的那一单元格一定要给定一个editor，不然无法赋值

运用combobox的onSelect事件，来进行操作整列

还有一个onChange事件来动态处理combobox的数据源：

onChange : function(value,rowIndex)\{  
var varSelect = $(this).combobox('getValue');  
 var row = $('\#jcReportDetail').datagrid('getSelected');  
 var rowIndex = $('\#jcReportDetail').datagrid('getRowIndex',row);//获取行号  
   
 var ed = $('\#jcReportDetail').datagrid('getEditor', \{index : rowIndex,field : 'wzContent'\});  
                             
 var target = $('\#jcReportDetail').datagrid('getEditor', \{ index : rowIndex , field :'wzContent'\}).target;  
standDate.length = 0;  
var tempDate = jQuery.parseJSON('$\{stands\}');  
for(var i = 0; i < tempDate.length; i ++)\{  
var stand = tempDate\[i\];  
if(stand.value.toLowerCase().indexOf(value) != -1 || stand.text.toLowerCase().indexOf(value.toLowerCase())!= -1 || !value)\{  
var o = \{\};  
 o.value = stand.value;  
 o.text = stand.text;  
 standDate.push(o);  
\}  
\}  
$(ed.target).combobox("loadData", standDate);  
\}

选中值后进行保存的时候会发现列显示异常，想要现实name，却发现显示的是id，那么可以使用formatter来进行转格式

formatter:function(value, row)\{  
                        if(row.isNewRecord == true)\{  
                        var text = "";  
                        for(var i = 0; i < standDate.length; i ++)\{  
                        var d = standDate\[i\];  
                        if(d.text == value)\{  
                        text = d.text;  
                        \}  
                        \}  
                        return text;  
                        \}else\{  
                        var text = "";  
                        for(var i = 0; i < standDate.length; i ++)\{  
                        var d = standDate\[i\];  
                        if(d.value == value)\{  
                        text = d.text;  
                        \}  
                        \}  
                        if(!text)\{  
                        text = value;  
                        \}  
                       return text;  
                        \}  
                        \}

先记录这么多，后期有新想法后再添加