码迷,mamicode.com
首页 > 其他好文 > 详细

easyui的datagrid实例实现

时间:2015-01-09 15:31:29      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

 功能要求如图所示:技术分享

 

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
}
]]

});
}

 

easyui的datagrid实例实现

标签:

原文地址:http://www.cnblogs.com/starksoft/p/4213434.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!