easyui的datagrid实例实现

 功能要求如图所示:

 

function Loading() {
var editRow = undefined;//保存行的索引
var query= $("#myform").serializeObject();
$("#tabTopicList").datagrid({
url: 'Tools/GetTopicList.ashx',
queryParams:query,
pagination: true,
width: 800,
height:350,
pageSize: 10,
pageList: [10, 50],
fit: true,
fitColumns: true,
nowarp: false,
idField: 'top_id',
sortName: 'top_createtime',
sortOrder: 'desc',
columns: [[
{ field: 'cbx', checkbox: true },
{
title: '类别',
field: 'cat_title',
width:80,
editor: {
type: 'combobox',
options: {
required: true,
missingMessage: '请选择类别',
url: 'Tools/GetTopicCategory.ashx', 
valueField: 'Cat_Id',
textField: 'Cat_Title',
onSelect: function (record) {
//重点在此处 
//先获取到当前选中行
//根据当前行获取，当前行的下标
//在根据下标和要获取列的filed获取对应filed的Editor对象
//然后在根据对应的Editor操作
var row = $("#tabTopicList").datagrid('getSelected');
var rindex = $("#tabTopicList").datagrid('getRowIndex', row);
console.log(rindex);
var ed = $("#tabTopicList").datagrid('getEditor', {
index: rindex,
field: 'cat_title'
});
console.log($(ed.target).combobox('getText'));
var msg = $(ed.target).combobox('getText');

if (msg == '单选题') {
console.log(1);
var rows = getEditRow(rindex, 'top_answer');
//这里能对答案的combobox赋值为2
//$(rows.target).combobox('setValues','2');
//这里我以为能这样操作,
//既然可以操作方法, 为什么就不能重新定义data数据呢
//$(rows.target).combobox({
// data:[{
// label: 'A',
// value:'A'
// }, {
// label: 'B',
// value: 'B'
// },{
// label: 'C',
// value: 'C'
// }, {
// label: 'D',
// value: 'D'
// }]
//});
} else if (msg == '多选题') {
console.log(2);
var rows = getEditRow(rindex, 'top_answer');
$(rows.target).combobox('setValues', '1');
}
}, 

}
}
},
{
title: '题目',
field: 'top_description',
width: 80,
editor: {
type: 'validatebox',
options: {
required: true,
missingMessage: '请输入题目'
}
}

},
{
title: '选项A',
field: 'top_answera',
width: 80,
editor: {
type: 'validatebox',
options: {
required: true,
missingMessage:'请输入选项A'
}
}
},
{
title: '选项B',
field: 'top_answerb',
width: 80,
editor: {
type: 'validatebox',
options: {
required: true,
missingMessage: '请输入选项B'
}
}
},
{
title: '选项C',
field: 'top_answerc',
width: 80,
editor: {
type: 'validatebox',
options: {
required: true,
missingMessage: '请输入选项C'
}
}
},
{
title: '选项D',
field: 'top_answerd',
width: 80,
editor: {
type: 'validatebox',
options: {
required: true,
missingMessage: '请输入选项D'
}
}
},
{
title: '答案',
field: 'top_answer',
width: 80,
editor: {
type: 'combobox',
options: {
required: true,
missingMessage: '请选择答案',
multiple: true,
editable: false,
valueField: 'label',
textField: 'value', 
formatter:function (row) {
//console.log(row);
return "<input type=\"checkbox\" name=\"" + row.label + "\" id=\"" + row.value + "\"/>" + row.value;
},
onSelect:function (rec) {
//console.log(rec.value);
$("#" + rec.value).attr("checked", "checked");
},
onUnselect: function (rec) {
$("#" + rec.value).removeAttr("checked");
}, 
}
}
}, {
title: '类型',
field: 'top_name',
width: 80,
editor: {
type: 'combobox',
options: {
required: true,
missingMessage: '请选择类型',
multiple: true,
editable: false,
valueField: 'Top_Id',
textField: 'Top_Name',
url: 'Tools/getTopicTypeList.ashx',
formatter: function (row) {
//console.log(row);
return "<input type=\"checkbox\" name=\"" + row.Top_Id + "\" id=\"" + row.Top_Id + "\"/>" + row.Top_Name;
},
}
}
},
{
title: '创建人',
field: 'sta_username',
width: 80
},
{
title: '创建时间',
field: 'top_createtime',
width: 80
}
]]

});
}