Easyui datagrid editor为combobox时指定数据源

最新推荐文章于 2020-08-28 17:18:08 发布

转载最新推荐文章于 2020-08-28 17:18:08 发布 · 689 阅读

文章标签：

#html-jQuery　UI

html-jQuery　UI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在datagrid表格的行内编辑操作中引入ComboBox，并解决了选择项显示为value而非text的问题。通过使用格式化函数unitformatter确保显示正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当在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);
 
            }
 
        }
 
    });
}