一丶常用属性
1 $('#j_dg_left').datagrid({ 2 url: '/Stu_Areas/Stu/GradeList', 3 fit: true, // 自动适应父容器大小 4 singleSelect: true, //设置是否只能单选 5 loadMsg: '请稍等，正在拼命加载...',//加载数据的时候显示提示消息 6 fitColumns: true, //自动收缩列的大小 7 rownumbers: true, //是否加行号 8 pagination: true, //是否显式分页 9 pageSize: 5, //页容量，必须和pageList对应起来，否则会报错 10 pageNumber: 1, //默认显示第几页 11 pageList: [5, 10, 15],//分页中下拉选项的数值 12 checkOnSelect: true,//当用户点击行的时候该复选框就会被选中或取消选中。 13 selectOnCheck: true,//单击复选框将永远选择行 14 //固定列 15 frozenColumns: [[ 16 { field: 'gName', title: '年级名称', 150, align: 'center' }, 17 ]], 18 //非固定列 19 columns: [[ 20 { field: 'gExplain', title: '年级说明', 150, align: 'center' }, 21 ]], 22 //单击单元格 23 onClickRow: function (index, row) { 24 dg_right.datagrid('load', { 25 gId: row.gId, 26 }); 27 gId = row.gId; 28 }, 29 onLoadSuccess: function () { 30 //修改全选按钮 31 $(".datagrid-header-check").html("序号"); 32 $(".datagrid-header-check").parent().prev().html(""); 33 $(".datagrid-header-check").attr("style", "71px") 34 var rows = dg_left.datagrid('getRows'); 35 if (rows.length > 0) { 36 pageUtil.LoadGrid_Right(rows[0].gId); 37 } 38 }, 39 toolbar: [{ 40 text: '刷新', 41 iconCls: 'fa fa-refresh', 42 handler: function () { 43 pageUtil.Refresh(); 44 } 45 } 46 , 47 '-', { 48 text: '取消选中', 49 iconCls: 'fa fa-undo', 50 handler: function () { 51 pageUtil.CancelSelected(); 52 } 53 }, 54 '-', { 55 text: '添加', 56 iconCls: 'fa fa-plus', 57 handler: function () { 58 pageUtil.AddStudent(); 59 } 60 }, 61 '-', { 62 text: '编辑', 63 iconCls: 'fa fa-edit', 64 handler: function () { 65 pageUtil.EditStudent(); 66 } 67 }, 68 '-', { 69 text: '删除', 70 iconCls: 'fa fa-remove', 71 handler: function () { 72 pageUtil.DelStudent(); 73 } 74 }, 75 ], 76 })
内容:
{ title: '内容说明', field: 'ContentRemark', align: 'center', 350, sortable: true, formatter: function (value) { if (value) { value = value.replace(/<[^>]*>/ig, ""); value = value.replace(/&(nbsp|#160);/ig, ""); if (value.length > 25) { value = value.substring(0, 15) + "......"; } return value; } } },
修改复选框和序号样式：
onLoadSuccess: function () { //修改全选按钮 $(".datagrid-header-check").html("序号"); $(".datagrid-header-check").parent().prev().html(""); $(".datagrid-header-check").attr("style", "56px"); },
二丶行内编辑
var editIndex = undefined;定义全局变量
1.单元格触发事件
onClickCell: function (index, field, value) { if (editIndex == undefined) { if (field == "content") { // 判断是否是field为content列，如果不是固定某列的话，不需要判断 $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', { index: index, field: field }); $(ed.target).focus(); } editIndex = index; //alert("点击触发editIndex:" + editIndex); } else if (editIndex != undefined) {//如果不相等，说明已经打开编辑器了，需要关闭编辑器 $(this).datagrid('endEdit', editIndex); editIndex = undefined; //alert("关闭编辑器"); } //$("#dg").datagrid('onClickRow'); },
2.关闭编辑器后触发
onAfterEdit: function (index, row, changes) { // 关闭编辑器后触发
var updated = $(this).datagrid('getChanges', 'updated'); // updated 是一个getChanges的属性，可以查看api
//alert("onAfterEdit。。" + updated.length);
if (updated.length < 1) { // 如果编辑器中的数据已经修改，则length为1，否则为0，判断是否已经修改数据
editRow = undefined;
$(this).datagrid('unselectAll');
return;
} else {
// 传值
//alert("提交数据");
submitForm(index, row, changes); //这里ajax提交数据的方法
}
},
3.使用ajax提交数据
function submitForm(index, row, changes) { //alert(row.content + "--" + changes.content); //daliyResultRate var Econtent = row.content; // 当前行中修改的数据值 if (Econtent == "") { $.messager.alert('提醒', '没有录入数据！'); $("#dg").datagrid('reload'); return; } //var r = /^-?[1-9]/;//判断输入的是正整数 //if (!r.test(resultId)) { // $.messager.alert('提醒', '请输入正整数！'); // return; //} $.ajax({ type: "post", async: false, url: "/T1/Edit", data: { "Econtent": Econtent, //将数据ajax到后台 "id": row.id, }, success: function (data) { if (data == "true") { alert("保存成功"); $("#dg").datagrid('reload'); } } }) }
三丶默认选择
1 //选中事件 2 onSelect: function (index, row) { 3 dgStaff.datagrid('load', { 4 id: row.id, 5 }); 6 }, 7 8 onLoadSuccess: function (data) { 9 //修改全选按钮 10 $(".datagrid-header-check").html("序号"); 11 $(".datagrid-header-check").parent().prev().html(""); 12 $(".datagrid-header-check").attr("style", "79px !important;font-weight: 700;font-size: 14px;line-height:18px;"); 13 14 if (data != "" && data.total > 0) { 15 dgDepartment.datagrid("selectRow", 0); 16 } 17 18 }, 19 });
四丶初始化下拉框
1 var demoData = oc.BllSession.ISysDemoBLL.Entities.Select(a => new ComoboData 2 { 3 value = a.id, 4 text = a.departName, 5 }).ToList(); 6 7 demoData.Insert(0, new ComoboData 8 { 9 value = "", 10 text = "全部", 11 }); 12 return Json(demoData );
js
1 $('#j_departId').combobox({ 2 editable: false, 3 height: 30, 4 url: '远程路径/控制器相对路径', 5 panelHeight: 'auto', 6 panelMaxHeight: 220, 7 valueField: 'value', 8 textField: 'text', 9 onSelect: function (rec) { 10 if (rec.value == "") { 11 $('#departName').val(""); 12 } else { 13 $('#departName').val(rec.text); 14 } 15 } 16 });