要实现的效果:编辑表格中的一行数据:先选中一行数据,然后点击编辑弹出框中可以显示选中行的内容然后再让用户进行修改。
限制条件:弹出框中的combobox提交的时候必须获取combobox的id而不是下拉框的显示值,但是表格中不存在这个ID
要解决这个问题,首先选中行必须包含你要绑定的字段,但是还不可以在表格中显示出来。然后把选中行的值赋给combobox。
//隐藏表格的一列
$('#dg').datagrid({
url: "/QuestManage/LoadPageQuestIndex", //获取数据地址
width: "100%", //宽度
striped: true, //把行条纹化(奇偶行背景色不同)
idField: 'quesID', //标识字段
loadMsg: '正在加载用户的信息.......', //从远程站点加载数据是,显示的提示消息
pagination: true, //数据网格底部显示分页工具栏
singleSelect: false, //只允许选中一行
pageList: [10, 20, 30, 40, 50], //设置每页记录条数的列表
pageSize: 10, //初始化页面尺寸(默认分页大小)
pageNumber: 1, //初始化页面(默认显示第一页)
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '第{from}到{to}条,共{total}条',
columns: [[ //每页具体内容
{
field: 'quesID', //列的字段名(数据库)
title: '题目编号', //列的标题文本
editor: 'text', //编辑类型
hidden: true, //隐藏该列
fit: true //自适应宽度
},
{ field: 'quesContent', title: '题目内容', editor: 'text' },
{ field: 'quesScore', title: '题目分值', editor: 'text' },
{ field: 'quesTypeID', title: '所属类别id', editor: 'text', hidden: 'true' },//这是增加的原来没有的属性,隐藏用到了hidden属性
{ field: 'quesType', title: '所属类别', editor: 'text' },
{ field: 'quesController', title: '所用控件', editor: 'text' },
{ field: 'quesControllerID', title: '所用控件id', editor: 'text', hidden: 'true' },
]]
})
});
//绑定选中行的题型,显示题型,传值questypeid
var row = $('#dg').datagrid('getSelected');//获取选中的行
$('#QuesTypeE').combobox({
url: '/QuestManage/LoadPage',
panelHeight: 'auto',
valueField: 'quesTypeID',
textField: 'quesType',
editable: false,
onLoadSuccess: function () {
$("#QuesTypeE").combobox("select", row.quesType);
$("#QuesTypeE").combobox("setValue", row.quesTypeID);
}
});