Easyui中datagrid中嵌入combobox并赋值传值

显示组合框

–

官网这样说的

   要在datagrid里面做个带复选框的列表时，查阅了官网，发现了个编辑器，编辑器允许你用添加不用类型的东西，获取的方法是酱紫的：

• 
  获取编辑器之前
  

  在做到之前有个不能够忽略的前提：
  
  *设置单元行可编辑！！
  
  3 血的教训啊喂= =

然后就是状态了，看你需要单击单元格还是单击一整行获取这个编辑器了有

onClickRow和onClickCell视情况自己选择。

            onClickRow: function (rowIndex, rowData) {
                $("#userFileList").datagrid('selectRow', rowIndex);
                $("#userFileList").datagrid('beginEdit', rowIndex);//设置可编辑状态
            }

• 
  记得转换格式噢
  

    function unitFormatter(value, rowData, rowIndex) {
        if (value == 0) {
            return "";
        }
        for (var i = 0; i < jsonContent.length; i++) {
            if (jsonContent[i].value == value) {
                return jsonContent[i].text;
            }
        }
        return value;
    }

而在datagrid中添加editor代码如下，formatter是用于格式化显示单元格内容的，jsonContent是一串JSON字符串，不知道格式的自己Google去- –

{
                    field: 'isUpload',
                    title: '标题',
                    width: 40,
                    formatter: unitFormatter,
                    align: 'center',

                    editor: {
                        type: 'combobox',
                        options: {
                            data: jsonContent,
                            valueField: "value",
                            textField: "text",
                            editable: false
                        }
                    }
                }

• 
  另一种方法Editors
  
  
  当然，你还可以采用另一种方式：getEditors,但是根据debug结果发现我页面的返回的是长度为1的数组，不知道算不算是个坑。

所以最后代码需要在后面加个[0]：

  onClickCell: function (rowIndex, field, value) {
       $("#userFileList").datagrid('selectRow', rowIndex);//选中这一行
       $("#userFileList").datagrid('beginEdit', rowIndex);//设置可编辑状态
       var ed = $('#userFileList').datagrid('getEditors', rowIndex)[0];
       $(ed.target).combobox('setValue', jsonContent[1].value); //设置默认显示的值
  }

• 
  显示效果
  

最后结果有点丑哈哈哈，不过还是完成了目标：

大功告成，这样我们就能完成了datagrid中下拉框的添加啦，不同类型类推就ok了。