zoukankan      html  css  js  c++  java
  • Easyui Datagrid 的Combobox 如何动态修改下拉选项,以及值的转换

    我是先将下拉选项的值通过datagrid的url查出来了,在每一行的row中

    //项目结果选项卡的列表
        $('#project_table').datagrid({
            width : '100%',
            height: '378',
            url : 'getSeparationProjectInf',
            //title : '待分发条码列表',
            striped : true,
            nowrap : true,
            rownumbers : true,
            singleSelect : true,
            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
                //监测结果下拉框  
                var goEditor = $('#project_table').datagrid('getEditor', {  
                          index : index,    
                           field : 'result'    
                });  
                $(goEditor.target).combobox({  
                    onLoadSuccess: function () {
                        if(rowData.result){
                            $(goEditor.target).combobox('setValue', rowData.result);
                        }else{
                            $(goEditor.target).combobox('setValue', rowData.resultDictionaryDetailList[0].id);
                        }
                    },
                    onBeforeLoad: function(){   //下拉展开时动态修改options  
                        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);  
                        }                 
                    }  
                });  
            },
            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){
                            rowData.result = resultDictionaryDetailList[0].id;
                            value = resultDictionaryDetailList[0].name;
                        }
                        console.log("resultDictionaryDetailList.length=="+resultDictionaryDetailList.length);
                        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 中,onBeforeLoad很重要,不然执行onLoadSuccess方法的时候,Combobox还没有动态加载下拉选项,导致显示的是值,而不是值对应的名,所以用onBeforeLoad可以先加载Combobox的下拉选项,然后再回填值

    
    
    onBeginEdit: function(index, rowData){ //动态修改检测结果下拉项
                var resultDictionaryDetailList = rowData.resultDictionaryDetailList
                //监测结果下拉框  
                var goEditor = $('#project_table').datagrid('getEditor', {  
                          index : index,    
                           field : 'result'    
                });  
                $(goEditor.target).combobox({  
                    onLoadSuccess: function () {
                        if(rowData.result){
                            $(goEditor.target).combobox('setValue', rowData.result);
                        }else{
                            $(goEditor.target).combobox('setValue', rowData.resultDictionaryDetailList[0].id);
                        }
                    },
                    onBeforeLoad: 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);  
                        }  
                       /* //设置值                              
                        if(rowData.result){
                            $(goEditor.target).combobox('setValue', rowData.result);  
                        }else{
                            $(goEditor.target).combobox('setValue', rowData.resultDictionaryDetailList[0].name);
                        }*/                      
                    }  
                });  
            },
     

    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;  
    },
  • 相关阅读:
    docker 如何启动空容器
    dotnet5.0 aspnetcore runtime docker镜像
    abp asp.net core 手动获取容器中的服务
    我把代码写在别人的分支了?别慌,有办法解决
    var重复声明为什么后续声明会被忽略
    flex布局不常用到的属性整理
    微信openID和unionID的区别
    js稀疏数组、密集数组、数组空位、手写数组map方法
    vscode格式化代码换行?试试这个配置
    封装一个公共组件并上传到npm仓库
  • 原文地址:https://www.cnblogs.com/onlymate/p/7536116.html
Copyright © 2011-2022 走看看