首页 > 代码库 > easyUI dataGrid使用
easyUI dataGrid使用
前台js
//加载数据表格 $("#tab_user").datagrid({ title:"用户表", iconCls:‘icon-edit‘,//图标 url:"getAllUserInfo", fitColumns:"true", striped:"true", nowrap:"true", loadMsg:"正在努力加载", pagination:"true", rownumbers:"true", showHeader:"true", toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function() { $("#add").dialog("open").dialog(‘添加信息‘, ‘New User‘); } }, ‘-‘, { text: ‘修改‘, iconCls: ‘icon-edit‘, id:"", handler: function() { } }, ‘-‘,{ text: ‘删除‘, iconCls: ‘icon-remove‘, handler: function(){ $("#dd").show(); } }], }); //设置分页控件 var p = $(‘#tab_user‘).datagrid(‘getPager‘); $(p).pagination({ pageSize: 10,//每页显示的记录条数,默认为10 pageList: [5,10,15],//可以设置每页记录条数的列表 beforePageText: ‘第‘,//页数文本框前显示的汉字 afterPageText: ‘页 共 {pages} 页‘, displayMsg: ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘, });
注意事项:编辑器会自动向后台传入两个个参数
1 rows 每页显示多少行
2 page 当前显示的页数 后台需要向前台返回json字符串
字符串格式为
{ "total": 15,//代表总行数 "rows": [//每一页的单独数据 { "u_id": 1, "u_name": "张杰", "u_role": 1 }, { "u_id": 2, "u_name": "aa", "u_role": 2 }, { "u_id": 3, "u_name": "bb", "u_role": 3 }, { "u_id": 4, "u_name": "cc", "u_role": 4 }, { "u_id": 5, "u_name": "dd", "u_role": 5 }, { "u_id": 6, "u_name": "ee", "u_role": 6 }, { "u_id": 7, "u_name": "ff", "u_role": 7 }, { "u_id": 8, "u_name": "gg", "u_role": 8 }, { "u_id": 9, "u_name": "hh", "u_role": 9 }, { "u_id": 10, "u_name": "ii", "u_role": 10 } ]}
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。