我是先将下拉选项的值通过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;  
},

Easyui Datagrid 的Combobox 如何动态修改下拉选项,以及值的转换的更多相关文章

  1. jquery 动态添加下拉框 需要增加 煊染 selectmenu("refresh");

    若通过js动态选择下拉框的值必须刷新下拉框,例如:var selArray = $("select#sel");selArray[0].selectedIndex = 1;selA ...

  2. Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理

    datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3   需求场景 如下,在datagri ...

  3. 通通WPF随笔(1)——基于lucene.NET让ComboBox拥有强大的下拉联想功能

    原文:通通WPF随笔(1)--基于lucene.NET让ComboBox拥有强大的下拉联想功能 我一直很疑惑百度.谷哥搜索框的下拉联想功能是怎么实现的?是不断地查询数据库吗?其实到现在我也不知道,他们 ...

  4. SupportV7包中 SwipeRefreshLayout 修改下拉控件的距离

    //修改下拉距离 ViewTreeObserver vto = mCategoryResults.mSwipeRefreshLayout.getViewTreeObserver(); vto.addO ...

  5. ComboBox 自动调整组合框下拉部分的宽度

    /// <summary>        /// ComboBox 自动调整组合框下拉部分的宽度        /// </summary>        void Resiz ...

  6. layui 根据根据后台数据动态创建下拉框并同时默认选中

        第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...

  7. Jquery动态设置下拉框selected --(2018 08/12-08/26周总结)

    1.Jquery动态根据内容设置下拉框selected 需求就是根据下拉框的值动态的设置为selected,本以为很简单,网上一大推的方法,挨着尝试了之后却发现没有一个是有用的.网上的做法如下: &l ...

  8. WPF-学习笔记 动态修改控件Margin的值

    原文:WPF-学习笔记 动态修改控件Margin的值 举例说明:动态添加一个TextBox到Grid中,并设置它的Margin: TextBox text = new TextBox(); t_gri ...

  9. jquery 根据后台传过来的值动态设置下拉框、单选框选中

    更多内容推荐微信公众号,欢迎关注: jquery  根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...

随机推荐

  1. Jmeter用表格查看结果

    Sample#:编号类似id Start Time:开始时间 Thread Name:线程名称 Label:请求名称 Sample Time:取样时间ms Status:状态 Bytes:接受字节数 ...

  2. BZOJ4292 PA2015 Równanie 【暴力水题】

    BZOJ4292 PA2015 Równanie Description 对于一个正整数n,定义f(n)为它十进制下每一位数字的平方的和.现在给定三个正整数k,a,b,请求出满足a<=n< ...

  3. python 正则表达式字符说明

    . 元字符 说明 . 代表任意字符 | 逻辑或操作符 [ ] 匹配内部的任一字符或子表达式 [^] 对字符集和取非 - 定义一个区间 \ 对下一字符取非(通常是普通变特殊,特殊变普通) * 匹配前面的 ...

  4. Tornador之初识(一)

    一.最简单的web服务器 import socket def handle_request(client): buf = client.recv(1024) client.send("HTT ...

  5. altium布局布线原则

    布局应该先放位置确定不能随意变动的,之后是核心器件,然后是周围器件,如果周围器件过多,为防止布线时交叉过多,可以一部分小模块放到底层. 布线时优先顺序为先电源线和网络中使用频率高的线,之后是信号线.走 ...

  6. BZOJ3590 [Snoi2013]Quare

    题意 4.20四川芦山地震发生后,抗震救灾委员会接到一个紧急任务,四川省给该委员会发了一份地图,这份地图给出了该省一些城市的情况:任两个城市是用一条或多条公路连接起来的,也可以没有公路连接,但是每个城 ...

  7. ballerina 学习三 根据swagger 以及protobuf 生成code

    备注: 基本环境安装就不用介绍了,swagger 以及grpc 同时也不用介绍了,都是比较简单的代码,就是一个简单的测试 1.   初始化项目 ballerina init 项目结构如下: ├── R ...

  8. consul 几个方便使用的类库

    consul 几个方便使用的类库 1. java  https://github.com/OrbitzWorldwide/consul-client   <dependency> < ...

  9. WinForm 窗体初始位置篇

    1.在C#中,From本身有个StartPosition属性可以控制居中显示. StartPosition 默认值是WindowsDefaultLocation ,我们只需要改成CenterScree ...

  10. java 工作流

    BPM是jboss旗下遵守LGPL许可的java开源工作流,功能比较完善,从4.0开始引入了pvm的概念,支持jPDL.BPEL等流程定义语言.由于相关资料还比较少,开发自己的一个demo还不是太容易 ...