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>

 

posted @ 2016-07-11 21:50  来自潘大大  阅读(5145)  评论(0编辑  收藏  举报