首页 > 代码库 > easyui的datagrid实例实现

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

 

easyui的datagrid实例实现