Easyui datagrid editor为combobox时指定数据源

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

　　效果图：