当在datagrid行内部应用添加编辑操作时，引入comboBox是非常方便的操作，我在引入comboBox时对数据源这快做个总结，在做demo的过程中遇到个问题，就是当你选择了下拉框的值后点击保存，此时显示的是value值，而不是text值，这时使用格式化函数解决此问题。
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: { <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>: true } } },{ field: 'Age',title: '年龄',align: 'center',{ field: 'Address',title: '地址',formatter: unitformatter,editor: { type: 'combo<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>',options: { data: Address,valueField: "value",textField: "text" } } }
]],toolbar: [{
text: '<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>',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);
//如果<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>acceptChanges(),使用getChanges()则<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>不到编辑和新增的数据。
//使用JSON序列化datarow对象，发送到<a href="https://www.jb51.cc/tag/houtai/" target="_blank" class="keywords">后台</a>。
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: '<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>',iconCls: 'icon-remove',handler: function () {
var row = $("#Student_Table").datagrid('getSelections');
}
},{
text: '<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>',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,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,editRow);
}
}});
}
效果图：
