Easyui Datagrid 的Combobox 如何動態修改下拉選項,以及值的轉換
阿新 • • 發佈:2017-09-17
options 解釋 logs sel onclick med rsize rip 原因
我是先將下拉選項的值通過datagrid的url查出來了,在每一行的row中
//項目結果選項卡的列表 $(‘#project_table‘).datagrid({ width : ‘100%‘, height: ‘378‘, url : ‘getSeparationProjectInf‘, //title : ‘待分發條碼列表‘, striped : true, nowrap : true, rownumbers : true, singleSelect :false, showHeader : true, showFooter : false, loadMsg : ‘努力展開中...‘, scrollbarSize:0, fitColumns : true, checkOnSelect : true, onClickRow: function (rowIndex, rowData) { //$(this).datagrid(‘unselectRow‘, rowIndex); var _this = this; if (editIndex != undefined && editIndex != rowIndex) { //結束行編輯 endEdit(_this,editIndex); } $(_this).datagrid(‘beginEdit‘, rowIndex); $("input.datagrid-editable-input").on("keypress",function(e){ if(e.keyCode==13){ endEdit(_this,editIndex); } }); editIndex = rowIndex; }, onBeginEdit: function(index, rowData){ //動態修改檢測結果下拉項 var resultDictionaryDetailList = rowData.resultDictionaryDetailList console.log(resultDictionaryDetailList); //監測結果下拉框 var goEditor = $(‘#project_table‘).datagrid(‘getEditor‘, { index : index, field : ‘result‘ }); $(goEditor.target).combobox({ onLoadSuccess: function () { $(goEditor.target).combobox(‘setValue‘, rowData.resultDictionaryDetailList[0].id); }, onShowPanel: function(){ //下拉展開時動態修改options //datatype處理統計方法 if(resultDictionaryDetailList.length){ var data = []; for ( var index in resultDictionaryDetailList) { var resultDictionaryDetail = resultDictionaryDetailList[index]; data.push({‘id‘: resultDictionaryDetail.id, ‘name‘:resultDictionaryDetail.name}); } $(goEditor.target).combobox("loadData", data); } //設置值 $(goEditor.target).combobox(‘setValue‘, rowData.resultDictionaryDetailList[0].id); } }); }, columns : [[ { field : ‘ck‘, checkbox: true }, { field : ‘projectId‘, title : ‘項目ID‘, align : ‘center‘, sortable : false, resizable : false, hidden: true }, { field : ‘projectName‘, title : ‘項目‘, align : ‘center‘, sortable : false, resizable : false, width : 120 }, { field : ‘data‘, title : ‘檢測數據‘, align : ‘center‘, sortable : false, resizable : false, width : 100, editor:{ type:‘text‘ } }, { field : ‘result‘, title : ‘檢測結果‘, align : ‘center‘, sortable : false, resizable : false, width : 100, formatter: function (value, rowData, rowIndex) { var resultDictionaryDetailList = rowData.resultDictionaryDetailList; if(!value){ value = resultDictionaryDetailList[0].id; rowData.result = value; } for (var i = 0; i < resultDictionaryDetailList.length; i++) { if (resultDictionaryDetailList[i].id == value) { return resultDictionaryDetailList[i].name; } } return value; }, editor:{ type:‘combobox‘, options:{ valueField:‘id‘, textField:‘name‘, //method:‘get‘, //url:‘products.json‘, data: resultDictionaryDetailList, /*data: [{ productid: ‘0‘, checkResult: ‘高‘ },{ productid: ‘1‘, checkResult: ‘低‘ }],*/ required:true } } }, { field : ‘remark‘, title : ‘結果備註‘, align : ‘center‘, sortable : false, resizable : false, width : 120 , editor : {type:"text"} }, { field : ‘suggestion‘, title : ‘建議內容‘, align : ‘center‘, sortable : false, resizable : false, width : 150, editor:{ type:‘text‘ } }, { field : ‘explanation‘, title : ‘醫學解釋‘, align : ‘center‘, sortable : false, resizable : false, width : 150, editor:{ type:‘text‘ } }, { field : ‘reason‘, title : ‘常見原因‘, align : ‘center‘, sortable : false, resizable : false, width : 150, hidden: true }, { field : ‘operate‘, title : ‘操作‘, align : ‘center‘, sortable : false, resizable : false, width : 80, formatter: function(value,row,index){ // return ‘<a href="javascript:void(0);" onclick="cancelDialog(event)">‘+value+‘</a>‘; } } ]], data : [ /*{ project : ‘ERCC1基因表達‘, checkData : ‘≥3.4%‘, checkResult : ‘高‘, resultRemark : ‘xxxxx‘, advise : ‘您患2型糖尿病的基因位.....‘, medicalExplanation : ‘合理安排休息,保證充分....‘, operate : ‘刪除‘, }*/ ], pagination : false, /*pageSize : 10, pageList : [10], pageNumber : 1,*/ pagePosition : ‘bottom‘, remoteSort : false, });
具體解析如下:
onBeginEdit是將row中的下拉項數據拿出來並動態加載到Combobox 中
onBeginEdit: function(index, rowData){ //動態修改檢測結果下拉項 var resultDictionaryDetailList = rowData.resultDictionaryDetailList console.log(resultDictionaryDetailList); //監測結果下拉框 var goEditor = $(‘#project_table‘).datagrid(‘getEditor‘, { index : index, field : ‘result‘ }); $(goEditor.target).combobox({ onLoadSuccess: function () { $(goEditor.target).combobox(‘setValue‘, rowData.resultDictionaryDetailList[0].id); }, onShowPanel: function(){ //下拉展開時動態修改options //datatype處理統計方法 if(resultDictionaryDetailList.length){ var data = []; for ( var index in resultDictionaryDetailList) { var resultDictionaryDetail = resultDictionaryDetailList[index]; data.push({‘id‘: resultDictionaryDetail.id, ‘name‘:resultDictionaryDetail.name}); } $(goEditor.target).combobox("loadData", data); } //設置值 $(goEditor.target).combobox(‘setValue‘, rowData.resultDictionaryDetailList[0].id); } }); },
formatter是將值轉換成對應的name
formatter: function (value, rowData, rowIndex) {
var resultDictionaryDetailList = rowData.resultDictionaryDetailList;
if(!value){
value = resultDictionaryDetailList[0].id;
rowData.result = value;
}
for (var i = 0; i < resultDictionaryDetailList.length; i++) {
if (resultDictionaryDetailList[i].id == value) {
return resultDictionaryDetailList[i].name;
}
}
return value;
},
Easyui Datagrid 的Combobox 如何動態修改下拉選項,以及值的轉換