Easyui datagrid editor为combobox时指定数据源

http://www.cnblogs.com/sword-successful/p/3395559.html

 

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

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121

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

　　效果图：