Easy UI DataGrid 与 分页
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="HR_attType_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="../../Js/hdj_default/jquery.js"></script> <link rel="stylesheet" type="text/css" href="../../Css/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../Css/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="../../Css/demo.css" /> <script type="text/javascript" src="../../Js/hdj_default/jquery.min.js"></script> <script type="text/javascript" src="../../Js/hdj_default/jquery.tree.js"></script> <script type="text/javascript" src="../../Js/hdj_default/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../Js/hdj_default/jquery.py.min.js"></script> <script type="text/javascript" src="../../js/hdj_default/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(window).resize(function () { domresize(); }); function domresize() { $('#div_data').height($(document.body).height() - 37); } $(function () { $('#div_data').height($(document.body).height() - 37); }); function getData(page, rows) { $.post("../../HR/attType/list_attType.ashx?type=BindGrid", { page: page, rows: rows, attTypeIfType: $("#attType_iftype").val() }, function (result) { result = JSON.parse(result); $("#dg").datagrid("loadData", result); }) } $(function () { //设置默认样式 $.messager.defaults = { ok: "确认", cancel: "取消", width: 300, height: "auto", minHeight: 150, modal: true, collapsible: false, minimizable: false, maximizable: false, resizable: false }; //加载数据表格 $('#dg').datagrid({ fit: true, //自适应大小 pageSize: 20, //页面条数 striped: true, //是否显示斑马线效果。 rownumbers: true, //如果为true,则显示一个行号列。 fitColumn: false, //允许表格自动缩放,以适应父容器 pagination: true, //如果为true,则在DataGrid控件底部显示分页工具栏。 fitColumns: false, //真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。 singleSelect: false, //如果为true,则只允许选择一行。 autoRowHeight: true, //定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。 checkOnSelect: true, selectOnCheck: true, //selectOnCheck nowrap: false, //设置为true,当数据长度超出列宽时将会自动截取 loadMsg: "正在加载,请稍后......", //在从远程站点加载数据的时候显示提示消息。 url: '../../HR/attType/list_attType.ashx?type=BindGrid', //排序 onSortColumn: function (sort, order) { $("#dg").datagrid('load', { sort: sort, order: order }) } }); //多选 function getChecked() { var nodes = $('#tree').tree('getChecked'); var s = ''; for (var i = 0; i < nodes.length; i++) { if (s != '') s += ','; s += nodes[i].id; } alert(s); $("#dg").datagrid('load', { treeId: node.id, attTypeIfType: $("#attType_iftype").val() }) } //加载分页 $('#dg').datagrid('getPager').pagination({ pageList: [10, 20, 30, 40, 50], //可以设置每页记录条数的列表 displayMsg: '当前显示从第{from}条到第{to}条,共{total}条记录', onSelectPage: function (pageNumber, pageSize) { var state = $('#dg').data('datagrid'); var opts = state.options; opts.pageNumber = pageNumber; opts.pageSize = pageSize; getData(pageNumber, pageSize); } }); }); //数据表表格中添加编辑列 function formatOper(val, row, index) { return '<a href="javascript:openWin(' + row.id + ',' + row.AttType_ifType + ')" ><img src="/Css/themes/icons/pencil.png" title="编辑" /></a>'; } //数据表表格中添加状态列 function formatOperCounType(val, row, index) { if (row.AttType_IsSystem == 0) { return '<a href="javascript:counTypeChange(\'' + row.AttType_code + '\',0)" ><img src="/Css/themes/icons/nolock.png" title="状态" /></a>'; } else if (row.AttType_IsSystem == 1) { return '<a href="javascript:counTypeChange(\'' + row.AttType_code + '\',1)" ><img src="/Css/themes/icons/lock.png" title="状态" /></a>'; } } </script> </head> <body class="easyui-layout"> <div id="div_data" style="width: 100%"> <table id="dg"> <thead> <tr> <th field="AttType_code" align="center" sortable="true"> 编码 </th> <th field="AttType_name" align="center" sortable="true"> 名称 </th> <th field="AttType_ifPrint" sortable="true" align="center"> 必须打卡 </th> <th field="AttType_ifApply" sortable="true" align="center"> 必须申请 </th> <th field="AttType_IsIntragrl" sortable="true" align="center"> 积分考核 </th> <th field="AttType_ifType" sortable="true" align="center"> 大类 </th> <th field="AttType_wh" align="center" sortable="true"> 默认班次 </th> <th data-options="field:'AttType_IsSystem', sortable:true, align:'center', formatter:formatOperCounType"> 事物状态 </th> <th data-options="field:'id', align:'center', formatter:formatOper"> 编辑 </th> <th field="ck" data-options="checkbox:true"> </th> </tr> </thead> </table> </div> </body> </html>