当jQuery易用户数据网格编辑器为combobox时指定数据源实例

在datagrid行中应用添加和编辑操作时，引入combobox非常方便。在介绍combobox的时候，我会对数据源做一个快速的总结。在演示的过程中，我遇到了一个问题，就是当你选中下拉框的值，点击保存时，显示的是值而不是文本值。此时，格式化功能被用来解决这个问题。

var Address=[{ 'value': '1 '，' text': 'CHINA' }，{ 'value': '2 '，' text': 'USA' }，{ 'value': '3 '，' text ' : ' Koren ' }]；函数unitformatter(值，rowData，行索引){ if(值==0){ return；} for(var I=0；地址长度；i ) {如果(地址[i].value==value){ 0返回地址[i].文本；} } }函数GetTable(){ var editRow=undefined；$(“# Student _ Table”).datagrid({ height: 300，width: 450，title: '学生表，collapsible: true，singleSelect: true，url: '/Home/StuList '，idField: 'ID '，列3360[{ field : ' ID '，title: 'ID '，width: 100 }，{ field: 'Name '，title: '姓名，width: 100，editor: { type: 'text '，options 3360 { required d : true } }，{ field: 'Age '，title: '年龄，width: 100，align: 'center '，editor: { type: 'text '，options : { required d : true } }，{ field: 'Address '，title: '地址，width: 100，formatter: unitformatter，align: 'center '，editor: { type: 'combobox '，选项： { data: Address，valueField: 'value '，textField: 'text' } } } ]，toolbar: [{ text: '添加，iconcl s 3360 ' icon-add '，处理程序：函数(){ if(editRow！=未定义){ $('#Student_Table ').datagrid('endEdit '，editRow)；} if(editRow==undefined){ $(“# Student _ Table”).datagrid('insertRow '，{ index: 0，row : } })；$(“# Student _ Table”).datagrid('beginEdit '，0)；editRow=0；} } }，'-'，{ text: '保存，iconcl s 3360 ' icon-save '，处理程序：函数(){ $(' # Student _ Table ').datagrid('endEdit '，editRow)；//如果调用acceptChanges()，使用getChanges()则获取不到编辑和新增的数据。 //使用JSON序列化数据行对象，发送到后台var row=$(' # Student _ Table ').数据网格(' GetChanges ')；var row str=JSON。stringify(row)；$.post('/Home/Create '，rowstr，function(data){ })；} }、“-”、{ text: '撤销，iconcl s 3360 ' icon-redo '，处理程序： function(){ editRow=undefined；$(“# Student _ Table”).datagrid(' rejectChanges ')；$(“# Student _ Table”).datagrid('取消全选')；} }、“-”、{ text: '删除，iconcl s 3360 ' icon-remove '，处理程序：函数(){ var row=$(' # Student _ Table ').数据网格(' GetSelections ')；} }、“-”、{ text: '修改，iconcl s 3360 ' icon-edit '，处理程序：函数(){ var row=$(' # Student _ Table ').数据网格(' GetSelected ')；如果(划！=null) { if (editRow！=未定义){ $('#Student_Table ').datagrid('endEdit '，editRow)；} if(editRow==未定义){ var index=$(' # Student _ Table ').datagrid('getRowIndex '，行);$(“# Student _ Table”).datagrid('beginEdit '，索引);编辑行=索引；$(“# Student _ Table”).datagrid('取消全选')；} } else { } } }，“-”，{ text: '上移，iconcl s 3360 ' icon-up '，处理程序： function(){ MoveUp()；} }、“-”、{ text: '下移，iconcl s 3360 ' icon-down '，处理程序： function(){ MoveDown()；} }]，onAfterEdit:函数(行索引、行数据、更改){编辑行=未定义；}，onDblClickRow:函数(行索引，行数据){ if (editRow！=未定义){ $('#Student_Table ').datagrid('endEdit '，editRow)；} if(editRow==undefined){ $(“# Student _ Table”).datagrid('beginEdit '，RowIndex)；editRow=rowIndex} }，onClickRow:函数(行索引，行数据){ if (editRow！=未定义){ $('#Student_Table ').datagrid('endEdit '，editRow)；} } });} 效果图：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。