Easy UI DataGrid 与 分页

时间：2021-11-06 22:28:30
<%@ 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() - );

        }

        $(function () {

            $('#div_data').height($(document.body).height() - );

        });

        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: , height: "auto", minHeight: , modal: true, collapsible: false, minimizable: false, maximizable: false, resizable: false };

            //加载数据表格

            $('#dg').datagrid({

                fit: true, //自适应大小

                pageSize: , //页面条数

                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 = ; 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: [, , , , ], //可以设置每页记录条数的列表

                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 == ) {

                return '<a href="javascript:counTypeChange(\'' + row.AttType_code + '\',0)" ><img src="/Css/themes/icons/nolock.png" title="状态" /></a>';

            } else if (row.AttType_IsSystem == ) {

                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>

相关文章