1. 程式人生 > >Easyui Datagrid 的Combobox 如何動態修改下拉選項,以及值的轉換

Easyui Datagrid 的Combobox 如何動態修改下拉選項,以及值的轉換

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 如何動態修改下拉選項,以及值的轉換