首页 > 代码库 > easyui dategrid 操作示例
easyui dategrid 操作示例
Datagrid数据绑定
说明：datagrid为页面中使用到的一个datagrid的实例:
var datagrid;
var editRow = undefined; //定义当前正在编辑的行
var selectRow = undefined;//当前选择行
$(function () {
datagrid = $(‘#tabInfo‘).datagrid({
url: ‘/easyUITest/Ashx/center.ashx?type=getUser‘,
……
}); //datagrid end
});
1. 绑定列
Eg: columns:[[
{ field: ‘ID‘, title: ‘编号‘, width: 100,sortable:true,order:‘asc‘ },
{}
]]
Msg： 字段中只有field时必不可少的的，而且field的字段要与数据库一致，区分大小写。
2. 分页
涉及分页的属性
pagination: true, //是否在grid底部显示分页
pageSize: 10, //每页显示的行数
pageList: [10, 20, 30],//页面显示行数的显示列表
要求c#返回的信息为一个json对象 返回对象格式
Total: 查询数据的总长度
Rows：要绑定的数据源
C# 返回字符串
int totalCount=20;//数据总长度，可以从数据库获取
string strResult = "{\"total\":" + totalCount + ",\"rows\":" + Common.JsonHelper.ToJson(dt) + "}"; //dt为获取的一个table表,ToJson为转换json的方法
context.Response.Write(strResult);
3. 排序
1> 在datagrid属性中指定页面第一次初始化要遵循的排序字段和排序规则
sortName: ‘Name‘,
sortOrder: ‘asc‘,
2> 在列属性中给要排序的字段启用排序
columns: [[
{ field: ‘ID‘, title: ‘编号‘, width: 100,sortable:true,order:‘asc‘ },
{ field: ‘Name‘, title: ‘姓名‘, width: 100, sortable: true, order: ‘asc‘ }
]]
4. 查询
使用datagrid的load 方法
//方式一： 在查询参数少的时候可以将查询条件逐个传递
function FunSearch() {
datagrid.datagrid(‘load‘, {
ID:$(‘input[name=txtID]‘).val(),
Name:$(‘input[name=txtName]‘).val()
});
}
//方式二： 在查询条件较多的时候，将form表单序列换一个对象
function FunSearch() {
datagrid.datagrid(‘load‘, serializeObject($(‘#frmSearch‘).form())
);
}
function serializeObject(form) { var o = {}; $.each(form.serializeArray(), function (index) { if (o[this[‘name‘]]) { o[this[‘name‘]] = o[this[‘name‘]] + "," + this[‘value‘]; } else { o[this[‘name‘]] = this[‘value‘]; } }); return o;}
将要传递的查询参数放在load参数中，浏览器默认以post方式提交到后台.
5. 新增记录
Way1： 打开独立窗口增加
function FunShowAddForm() { var strContent = "<form id=‘frmAdd‘> <table id=‘tblAdd‘ style=‘width:100%;height:100%; padding:5px 20px‘>" + "<tr><th>Name:</th><td><input name=‘addName‘ type=‘text‘/></td></tr>" + "<tr><th>Password:</th><td><input name=‘addPassword‘ type=‘text‘/></td></tr>" +"</table></form>"; $(‘<div/>‘).dialog({ id: ‘divAdd‘, title: ‘新建用户‘, width: 400, height: 300, closed: false, modal: true, content: strContent, buttons: [{ text: ‘保存‘, iconCls: ‘icon-save‘, handler: function () { $.ajax({ url: ‘/easyUITest/Ashx/center.ashx?type=addUser‘, type: ‘post‘, cache: false, dataType: ‘json‘, data: $(‘#frmAdd‘).serialize(), success: function (r) { console.info(r); if (r == "1") { $(‘#divAdd‘).dialog(‘destroy‘); //销毁当前窗体 datagrid.datagrid(‘load‘, {}); //重新刷新datagrid $.messager.show({ title:‘提示‘, msg:‘添加新用户成功!‘, timeout:2000, showType:‘slide‘ }); } }, error: function () { alert(‘error‘); } }); } }] }); }
Msg: 每次打开时新建一个窗口，在经ajax把数据处理完成后，将当前的dialog销毁，并重新刷新datagrid
Way2：行内编辑模式新增
1> 为datagrid的columns增加editor属性
Eg: columns: [[ { field: ‘Name‘, title: ‘姓名‘, width: 100, sortable: true, order: ‘asc‘, editor: { type: ‘validatebox‘, options: { required: true} } }, { field: ‘CreateDate‘, title: ‘创建时间‘, width: 100, editor: { type: ‘datetimebox‘, options: { required: true} }, styler: function (value, rowData, rowIndex) { if (parseInt(value) >= 20) { return ‘color:red;‘; } } } ]]
$.extend($.fn.datagrid.defaults.editors, { datetimebox: { init: function (container, options) { var input = $(‘<input />‘).appendTo(container); options.editable = false; input.datetimebox(options); return input; }, getValue: function (target) { return $(target).datetimebox(‘getValue‘); }, setValue: function (target, value) { $(target).datetimebox(‘setValue‘,value); }, resize: function (target, width) { $(target).datetimebox(‘resize‘, width); }, destroy: function (target) { $(target).datetimebox(‘destroy‘); } }});
2> 点击按钮开启编辑模式
function FunAddForm() { if (editRow == undefined) {//为防止出现多个编辑行，当前已经存在编辑行的时候，不再新建编辑行 datagrid.datagrid(‘insertRow‘, { index: 0, row: { Name: ‘请输入姓名!‘, Password: ‘请输入密码!‘ } }); datagrid.datagrid(‘beginEdit‘, 0);//第0行开启编辑模式 editRow = 0; }}
function FunSave() { datagrid.datagrid(‘endEdit‘,editRow);//参数editRow为当前正在编辑的行索引,同时会触发datagrid的onAfterEdit事件 }
/* 在用户进行新建、更新、删除事件处理完成后，均使用endEdit方式结束datagrid的行编辑状态,然后再onAfterEdit事件中处理数据提交 */ onAfterEdit: function (rowIndex, rowData, Changes) {//在结束编辑时触发 var inserted = datagrid.datagrid(‘getChanges‘, ‘inserted‘); //getChanges获取上次提交改变的行，改变的类型有 inserted\updated\deleted三种 console.info(‘inserted:‘ + inserted); var updated = datagrid.datagrid(‘getChanges‘, ‘updated‘); console.info(‘updated:‘ + updated); var deleted = datagrid.datagrid(‘getChanges‘, ‘deleted‘); console.info(‘deleted:‘ + deleted); var url = ‘‘; if (inserted.length > 0) { url = ‘/easyUITest/Ashx/center.ashx?type=addUser‘; } if (updated.length > 0) { url = ‘/easyUITest/Ashx/center.ashx?type=updateUser‘; } $.ajax({ url: url, type: ‘post‘, data: rowData, dataType: ‘text‘, cache: false, success: function (r) {//r==‘1‘成功, r==‘0‘失败 if (r == ‘1‘) { datagrid.datagrid(‘acceptChanges‘); //提交上一次更改的数据 $.messager.show({ title: ‘成功‘, msg: ‘数据提交成功!‘, timeout: 2000, showType: ‘slide‘ }); } else { datagrid.datagrid(‘rejectChanges‘); //在数据提交失败的时候回滚操作 $.messager.alert(‘错误‘, r.msg, ‘error‘); } editRow = undefined; //通过编辑验证之后，将当前编辑的行再次设为undefined（需要在数据异步提交完成之后进行） }, error: function (r) { console.info(‘error‘); editRow = undefined; //通过编辑验证之后，将当前编辑的行再次设为undefined } }); }
3>撤销编辑
当需要撤销编辑时，可以使用dategird的撤销编辑事件
function FunEditRedo() { if (editRow != undefined) { datagrid.datagrid(‘cancelEdit‘,editRow); // datagrid.datagrid(‘rejectChanges‘); } }
onCancelEdit: function (rowIndex, rowData) { alert("您取消了第 " + rowIndex + " 行的编辑!"); }
6. 修改记录
Way1: 用户选择一行，点击修改按钮，进入编辑模式
function FunEdit() { var rows = datagrid.datagrid(‘getSelections‘); if (rows.length == 1) {//当用户只选中一行的时候，启用编辑模式 var rowIndex = datagrid.datagrid(‘getRowIndex‘, rows[0]);//这里的rows时一个数组,rows[0]是数组的第一项，因此rows[0]才是一个真正的对象，不能混淆 editRow = rowIndex; datagrid.datagrid(‘beginEdit‘,rowIndex); }}
然后的处理同新建数据一样，在js向c#后台传递数据的时候，可以将rows[0]对象传递过去。
Way2: 用户双击当前行的时候，可以修改当前行的数据
onDblClickCell: function (rowIndex, field, value) {//单元格双击事件，开启行编辑模式 datagrid.datagrid(‘beginEdit‘, rowIndex); //开启行编辑模式 editRow = rowIndex; //设置当前正在编辑的行索引 }
7. 删除记录
function FunShowDelete() { var rows = datagrid.datagrid(‘getSelections‘);//不能选中所有的行 if (rows.length >0) {//当用户只选中一行的时候，启用编辑模式 $.messager.confirm(‘请确认‘, ‘您确认要删除记录吗?‘, function (r) { if (r) { // FunDelete(rows[0]);//这里的rows时一个数组,rows[0]是数组的第一项，因此rows[0]才是一个真正的对象，不能混淆 FunDelete(rows); } }); } }
function FunDelete(rows) { if (rows.length > 0) { var idlist = new Array(); for (var i = 0; i < rows.length; i++) { idlist.push(rows[i].ID); } console.info(‘idlist:‘+idlist); $.ajax({ url: ‘/easyUITest/Ashx/center.ashx?type=delete‘, type: ‘post‘, dataType: ‘text‘, cache: false, // data: ‘{\"idlist\":\"‘+idlist+‘\"}‘, data: ‘idlist=‘ + idlist, success: function (r) { $.messager.show({ title: ‘提示‘, msg: ‘记录删除成功!‘, timeout: 2000, showType: ‘slide‘ }); //重新刷新数据 datagrid.datagrid(‘load‘, {}); }, error: function (r) { console.info(‘delete error‘); } }); } }
这里先使用getSelections方法获取当前被选中的所有行（如果datagrid的singleSelect属性被设置为true，则只能获取到一行），然后把每行的ID字段合并，传递的后台处理。
在这里遇到一个问题是我在页面中选择了多行记录，但是在
var rows = datagrid.datagrid(‘getSelections‘); 一条语句中获取到的只是最后一条记录。
原因是我在开始的时候为datagrid设置了 idField: ‘id‘，并且又在columns中的ID字段设置其checkbox为true，这样ID字段没有显示，datagrid就认为页面中所有记录的ID均是相同的，所有就只获取到组后一条记录。
解决办法是： 1：在页面中显示ID字段
2: 取消idField属性或将其设为其他字段
8. 扩展datagrid 动态添加和删除列的editor属性
创建原因：比如在记录中的一些字段（用户密码等），我们希望在创建记录的时候，该字段可以编辑，但是在修改的时候该字段不可编辑，这是即需要我们在新建一条记录的时候为该字段添加editor属性，在修改一条记录的时候解除该字段的editor属性
使用示例：
添加editor属性：
datagrid.datagrid(‘addEditor‘, {//为密码项动态添加editor属性
field: ‘Password‘,
editor: { type: ‘validatebox‘, options: { required: true} }
});
删除editor属性：
datagrid.datagrid(‘removeEditor‘, ‘Password‘);//单个字段
datagrid.datagrid(‘removeEditor‘, [‘Password‘,‘Address‘]);//多个字段
$.extend($.fn.datagrid.methods, { addEditor: function (jq, param) { if (param instanceof Array) { $.each(param, function (index, item) { var e = $(jq).datagrid(‘getColumnOption‘, item.field); e.editor = item.editor; }); } else { var e = $(jq).datagrid(‘getColumnOption‘, param.field); e.editor = param.editor; } }, removeEditor: function (jq, param) { if (param instanceof Array) { $.each(param, function (index, item) { var e = $(jq).datagrid(‘getColumnOption‘, item); e.editor = {}; }); } else { var e = $(jq).datagrid(‘getColumnOption‘, param); e.editor = {}; } }});
9. 合并行/列事件
Jeasyui.com网站上的示例：
onLoadSuccess: function (data) {//数据加载成功时触发 console.info(‘data load ok!‘); var merges = [{ index: 2, rowspan: 2 }, { index: 5, rowspan: 2 }, { index: 7, rowspan: 2 }]; for (var i = 0; i < merges.length; i++) { datagrid.datagrid(‘mergeCells‘, { index: merges[i].index, field: ‘Address‘, rowspan: merges[i].rowspan }); } }onLoadSuccess为datagrid的一个事件，在数据全部加在成功时触发，先定义一个需要 合并行的数组，然后使用mergeCells方法为merges里的行合并单元格。
10. 右键菜单
1>在当前页面中添加一个用于显示右键菜单的div 默认隐藏，class为easyui-menu（因为之后要用easyui的方式将其显示出来）
Eg: <div id="menu" class="easyui-menu" style="width:120px; display:none"> <div onclick="FunAddForm()" iconCls="icon-add">新建</div> <div onclick="FunEdit()" iconCls="icon-remove">编辑</div> <div onclick="FunShowDelete()" iconCls="icon-edit">删除</div> </div>
2> 添加datagrid的onRowContextMenu事件
onRowContextMenu: function (e, rowIndex, rowData) { console.info(‘right click!‘); e.preventDefault(); //取消浏览器默认的右键菜单 datagrid.datagrid(‘unselectAll‘); datagrid.datagrid(‘selectRow‘, rowIndex); $(‘#menu‘).menu(‘show‘, { left: e.pageX, top: e.pageY }); }
参数 e:一个event对象，可以通过e.pageX,e.pageY找到鼠标的位置, e.preventDefault取消浏览器默认的右键显示菜单
在显示菜单前先选中当前行，这样方便之后的操作处理。
easyui dategrid 操作示例