easyui combobox 在datagrid中动态加载数据
Posted 继续潜水
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui combobox 在datagrid中动态加载数据相关的知识,希望对你有一定的参考价值。
场景:datagrid 中用编辑框修改数据,有一个列使用的combobox 在可编辑的时候需要动态绑定数据,这个数据是在根据其他条件可变的
思路:在每次开启编辑框的时候动态绑定数据,
datagrid开启
onClickCell: onClickCell//点击触发
onAfterEdit:onAfterEdit//编辑完单元格之后触发的事件
$.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var opts = $(this).datagrid(‘options‘); var fields = $(this).datagrid(‘getColumnFields‘, true).concat($(this).datagrid(‘getColumnFields‘)); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid(‘getColumnOption‘, fields[i]); col.editor1 = col.editor; if (fields[i] != param.field) { col.editor = null; } } $(this).datagrid(‘beginEdit‘, param.index); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid(‘getColumnOption‘, fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; //判断是否编辑结束 function endEditing() { if (editIndex == undefined) { return true } if ($(‘#subDg‘).datagrid(‘validateRow‘, editIndex)) { $(‘#subDg‘).datagrid(‘endEdit‘, editIndex); editIndex = undefined; return true; } else { return false; } } //点击单元格触发的事件 function onClickCell(index, field) { if (endEditing()) { $(‘#subDg‘).datagrid(‘selectRow‘, index) .datagrid(‘editCell‘, { index: index, field: field }); editIndex = index; } var taskLevelsData =$("#taskLevels").val(); if(field=="taskLevel" && taskLevelsData){//下拉编辑列时触发 var editors = $(‘#subDg‘).datagrid(‘getEditors‘, index);//取当前的编辑器 var row = $(‘#subDg‘).datagrid(‘getRows‘)[index]; var smEditor = editors[0]; $(smEditor.target).combobox({ onLoadSuccess: function () { }, onShowPanel: function(){ //下拉展开时动态修改options //debugger var data = []; $.each(taskLevelsData.split(","),function(i,e){ var obj={}; obj.id=e; obj.text=e; data.push(obj); }) $(smEditor.target).combobox("loadData", data); //设置值 $(smEditor.target).combobox(‘setValue‘, row.taskLevel); //row的属性赋值 } }); } } //编辑完单元格之后触发的事件 function onAfterEdit(index, row, changes) { var d = {}; d.id= row.id; //编辑内容进行修改数据 if(row.hasOwnProperty(‘bidRequire‘)){ d.bidRequire=row.bidRequire; }if(row.hasOwnProperty(‘meaRequire‘)){ d.meaRequire=row.meaRequire; }if(row.hasOwnProperty(‘requireDate‘)){ d.requireDate=row.requireDate.split(‘ ‘)[0] ; }if(row.hasOwnProperty(‘quaRequire‘)){ d.quaRequire=row.quaRequire; }if(row.hasOwnProperty(‘taskLevel‘)){ d.taskLevel=row.taskLevel; } //console.log(d); //console.log(changes); if(JSON.stringify(changes) != "{}"){ //console.log("tijiao") $.post(‘${pmsmanager}/pms/mtrl_plan/mtrl_plan_detail/update.do?sessionId=${(sessionId)!""}‘,d,function(data){ }) } }
以上是关于easyui combobox 在datagrid中动态加载数据的主要内容,如果未能解决你的问题,请参考以下文章
easyui datagrid combobox 怎么设置默认值
劳驾问下,easyui datagrid combobox 值改变事件怎么写的?
EasyUI可编辑datagrid用combobox实现多级联动
Easyui Datagrid 的Combobox 如何动态修改下拉选项,以及值的转换
easyui问题,怎样获取datagrid中编辑列combobox的value值与text值
EasyUi datagrid(onClickCell:用户单击一个单元格时触发 ) 單擊編輯 editor:{type: 'combobox'}