Easyui datagrid editor为combobox时指定数据源

蔚落 2022-05-26 00:52 219阅读 0赞

当在datagrid行内部应用添加编辑操作时，引入combobox是非常方便的操作，我在引入combobox时对数据源这快做个总结，在做demo的过程中遇到个问题，就是当你选择了下拉框的值后点击保存，此时显示的是value值，而不是text值，这时使用格式化函数解决此问题。

var Address = \[\{ "value": "1", "text": "CHINA" \}, \{ "value": "2", "text": "USA" \}, \{ "value": "3", "text": "Koren" \}\];  
   
   
function unitformatter(value, rowData, rowIndex) \{  
    if (value == 0) \{  
        return;  
    \}  
   
    for (var i = 0; i < Address.length; i++) \{  
        if (Address\[i\].value == value) \{  
            return Address\[i\].text;  
        \}  
    \}  
\}  
function GetTable() \{  
    var editRow = undefined;  
   
    $("\#Student\_Table").datagrid(\{  
        height: 300,  
        width: 450,  
        title: '学生表',  
        collapsible: true,  
        singleSelect: true,  
        url: '/Home/StuList',  
        idField: 'ID',  
        columns: \[\[  
         \{ field: 'ID', title: 'ID', width: 100 \},  
            \{ field: 'Name', title: '姓名', width: 100, editor: \{ type: 'text', options: \{ required: true \} \} \},  
            \{ field: 'Age', title: '年龄', width: 100, align: 'center', editor: \{ type: 'text', options: \{ required: true \} \} \},  
            \{ field: 'Address', title: '地址', width: 100, formatter: unitformatter, align: 'center', editor: \{ type: 'combobox', options: \{ data: Address, valueField: "value", textField: "text" \} \} \}  
        \]\],  
        toolbar: \[\{  
            text: '添加', iconCls: 'icon-add', handler: function () \{  
                if (editRow != undefined) \{  
                    $("\#Student\_Table").datagrid('endEdit', editRow);  
                \}  
                if (editRow == undefined) \{  
                    $("\#Student\_Table").datagrid('insertRow', \{  
                        index: 0,  
                        row: \{\}  
                    \});  
   
                    $("\#Student\_Table").datagrid('beginEdit', 0);  
                    editRow = 0;  
                \}  
            \}  
        \}, '-', \{  
            text: '保存', iconCls: 'icon-save', handler: function () \{  
                $("\#Student\_Table").datagrid('endEdit', editRow);  
   
                //如果调用acceptChanges(),使用getChanges()则获取不到编辑和新增的数据。  
   
                //使用JSON序列化datarow对象，发送到后台。  
                var rows = $("\#Student\_Table").datagrid('getChanges');  
   
                var rowstr = JSON.stringify(rows);  
                $.post('/Home/Create', rowstr, function (data) \{  
   
                \});  
            \}  
        \}, '-', \{  
            text: '撤销', iconCls: 'icon-redo', handler: function () \{  
                editRow = undefined;  
                $("\#Student\_Table").datagrid('rejectChanges');  
                $("\#Student\_Table").datagrid('unselectAll');  
            \}  
        \}, '-', \{  
            text: '删除', iconCls: 'icon-remove', handler: function () \{  
                var row = $("\#Student\_Table").datagrid('getSelections');  
   
            \}  
        \}, '-', \{  
            text: '修改', iconCls: 'icon-edit', handler: function () \{  
                var row = $("\#Student\_Table").datagrid('getSelected');  
                if (row != null) \{  
                    if (editRow != undefined) \{  
                        $("\#Student\_Table").datagrid('endEdit', editRow);  
                    \}  
   
                    if (editRow == undefined) \{  
                        var index = $("\#Student\_Table").datagrid('getRowIndex', row);  
                        $("\#Student\_Table").datagrid('beginEdit', index);  
                        editRow = index;  
                        $("\#Student\_Table").datagrid('unselectAll');  
                    \}  
                \} else \{  
   
                \}  
            \}  
        \}, '-', \{  
            text: '上移', iconCls: 'icon-up', handler: function () \{  
                MoveUp();  
            \}  
        \}, '-', \{  
            text: '下移', iconCls: 'icon-down', handler: function () \{  
                MoveDown();  
            \}  
        \}\],  
        onAfterEdit: function (rowIndex, rowData, changes) \{  
            editRow = undefined;  
        \},  
        onDblClickRow: function (rowIndex, rowData) \{  
            if (editRow != undefined) \{  
                $("\#Student\_Table").datagrid('endEdit', editRow);  
            \}  
   
            if (editRow == undefined) \{  
                $("\#Student\_Table").datagrid('beginEdit', rowIndex);  
                editRow = rowIndex;  
            \}  
        \},  
        onClickRow: function (rowIndex, rowData) \{  
            if (editRow != undefined) \{  
                $("\#Student\_Table").datagrid('endEdit', editRow);  
   
            \}  
   
        \}  
   
    \});  
\}

效果图：

![29225101-5ab2c0eca37b4c918081f5dad049f356.jpg][]

[29225101-5ab2c0eca37b4c918081f5dad049f356.jpg]: /images/20220526/365085905e45479e950da7be3ea5ea7a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 easyUI datagrid的combobox的联动效果

最近做项目，大量用到easyui datagrid的方法，也学到了不少东西，先记录下来，方便以后查找 combobox的联动效果和赋值旁边的表格 \{field:'joi

悠悠/ 2022年09月25日 12:21/ 0 赞/ 239 阅读

相关 Easyui datagrid editor为combobox时指定数据源

当在datagrid行内部应用添加编辑操作时，引入combobox是非常方便的操作，我在引入combobox时对数据源这快做个总结，在做demo的过程中遇到个问题

拼搏现实的明天。/ 2022年08月04日 10:47/ 0 赞/ 158 阅读

相关 jquery esqyUI datagrid editor:{type:'combobox'} 数据源

<th field="level" width="80" editor="{ type:'combo

旧城等待，/ 2022年08月04日 10:47/ 0 赞/ 122 阅读

相关在EasyUI的DataGrid中嵌入Combobox

在做项目时，需要在EasyUI的DataGrid中嵌入Combobox，花了好几天功夫，在大家的帮助下，终于看到了它的庐山真面：

淩亂°似流年/ 2022年08月01日 15:45/ 0 赞/ 215 阅读

相关 easyui combobox

<div id=id+"_type"></div><span style="white-space:pre"> </span> var data=[

雨点打透心脏的1/2处/ 2022年07月21日 08:56/ 0 赞/ 232 阅读

相关 easyui-combobox

在做功能的时候用到easyui的combobox，下拉框经常使用，因此把它的使用方法简单总结如下： html代码部分： <pre name="cod

梦里梦外;/ 2022年07月15日 13:19/ 0 赞/ 216 阅读

相关 EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格前

左手的ㄟ右手/ 2022年06月04日 06:40/ 0 赞/ 383 阅读

相关 EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格

落日映苍穹つ/ 2022年06月03日 08:15/ 0 赞/ 234 阅读

相关 Easyui datagrid editor为combobox时指定数据源

当在datagrid行内部应用添加编辑操作时，引入combobox是非常方便的操作，我在引入combobox时对数据源这快做个总结，在做demo的过程中遇到个问题，就是当你选

蔚落/ 2022年05月26日 00:52/ 0 赞/ 220 阅读

相关 EasyUI--datagrid中编辑器(editor)的类型为combobox的值得绑定

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 1.绑定固定的值 <span style="f

小咪咪/ 2022年01月16日 16:35/ 0 赞/ 844 阅读