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() - );

        }

        $(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>

Easy UI DataGrid 与分页的更多相关文章

easy ui datagrid 数据分页
参照easyui官方网站提供的demo写了个datagrid数据分页的demo, 具体参数我就不一一罗列了,详细见官方网站, 这里只介绍一下具体的注意事项和常乃用到的几项, $('#test').da ...
JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
Jquery Easy UI Datagrid 上下移动批量保存数据
DataGrid with 上下移动批量保存数据通过前端变量保存修改数据集合,一次性提交后台执行本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...
easy ui datagrid 增，删，改，查等基本操作
如下图: ①列表信息图 ②添加信息图 ③修改信息图 html代码: <%@ Page Title="" Language="C#" MasterPageF ...
jquery Easy UI Datagrid(数据网格)学习心德，附API
第一步,引入主要的css样式和js文件 <meta http-equiv="Content-Type" content="text/html; charset=ut ...
JQuery Easy Ui dataGrid 数据表格
数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...
easy ui datagrid在没有数据时显示相关提示内容
$(function () { $('#dg').datagrid({ fitColumns: true, url: 'product.json', pagination: true, pageSiz ...
JQuery Easy Ui dataGrid 数据表格 -->转
转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容概况使用方法 ...
Jquery easy ui datagrid動態加載列問題
1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数

随机推荐

Ubuntu16.04安装Jenkins
Jenkins基于JAVA,所以需要先安装jdk 安装java 在官网上下载jdk,http://www.oracle.com/technetwork/java/javase/downloads/jd ...
Windows下编译live555源码
Windos下编译live555源码环境 Win7 64位 + VS2012 步骤 1)源码下载并解压在官网上下载最新live555源码,并对其进行解压. 2)VS下建立工程项目新建Win32项 ...
REST API Design
2017阿里C++研发工程师-校招-单词匹配
题目描述给一个字符串, 然后给一个字典. 把字符串分解成字典里的单词组成的句子, 请输出所需空格最少的方案.并输出该方案. 样例例如: 字符串为: str="ilikealibaba&q ...
JavaScript中字符操作之大小写转换
1.toUpperCase() 方法用于把字符串转换为大写 var str = prompt("请输入需转换大写的字符串:"); str = str.toUpperCase() ...
高手用的SourceInsight配置文件——仿Sublime风格【转】
本文转载自:https://blog.csdn.net/weixin_38233274/article/details/80209100 配置文件下载地址:https://download.csdn. ...
Sql Server数据库链接字符串参数说明
DataSource,//要连接到的 SQL Server 实例的名称或网络地址 FailoverPartner,//在主服务器停机时要连接到的伙伴服务 ...
Numpy学习1
NumPy学习(1) 参考资料: http://www.cnblogs.com/zhanghaohong/p/4854858.html http://linusp.github.io/2016/02/ ...
python中的参数传递和返回值
python中的参数传递类似java,有着自己的内存回收机制,这和C++有着很大的差别. 1.函数的参数传递: >>> a = [, , ] >>> def fun ...
编译binutil包报错cc: error trying to exec 'cc1obj': execvp: No such file or directory
在http://forums.fedoraforum.org/showthread.php?t=267449中找到的解决方法 $LFS/sources/binutils-2.15.91.0.2/gpr ...

Easy UI DataGrid 与 分页

Easy UI DataGrid 与 分页的更多相关文章

随机推荐

热门专题

Easy UI DataGrid 与分页

Easy UI DataGrid 与分页的更多相关文章