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则会加载出对应的列数

随机推荐

Unix/Linux操作系统中如何在sqlplus/rman中使用方向键
默认情况下在Unix/Linux中使用Oracle的sqlplus/rman是无法使用↑↓←→几个方向键进行操作的,要想达到Windows下使用sqlplus/rman的效果需要安装rlwrap. r ...
Python开篇——Python的哲学
今天奉上Python设计哲学,宣告着自己正式开始系统的学习Python The Zen of Python, by Tim Peters Beautiful is better than ugly.E ...
jstl c:choose>、<c:when>和<c:otherwise>标签的简单使用介绍
<c:choose>.<c:when>和<c:otherwise>在一起连用,可以实现Java语言中的if-else语句的功能.例如以下代码根据username请求 ...
Ubuntu中安装Flask模块
pip3 list——python3下安装的***** #如果列表没有flask pip3 install flask即可
OpenStack之Keystone模块
一.Keystone介绍 OpenStack Identity(Keystone)服务为运行OpenStack Compute上的OpenStack云提供了认证和管理用户.帐号和角色信息服务,并为Op ...
Nginx配置location跳转后偶尔出现404
tv.xxx.com/voice请求时需跳转至:tv.xxx.com/zongyi/zt2015/haoshengyin/index.shtml 目录结构: nginx服务器配置: location ...
mysql left join中where和on条件的区别
left join中关于where和on条件的几个知识点: 1.多表left join是会生成一张临时表,并返回给用户 2.where条件是针对最后生成的这张临时表进行过滤,过滤掉不符合where条件 ...
20145310 GDB调试汇编堆栈分析
GDB调试汇编堆栈分析由于老师说要逐条分析汇编代码,所以我学习卢肖明同学的方法,重新写了一篇博客. 代码: #include<stdio.h> short addend1 = 1; st ...
springmvc.xml配置图解
MR案例：路径过滤PathFilter
问题描述:现有一批cookie日志,按照日期进行存放,如目录 “dir/2015-08-08” 下存放2015-08-08这一天的所有cookie.而目录 “/2015-08-08/” 下又根据数据文 ...

Easy UI DataGrid 与 分页

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

随机推荐

热门专题

Easy UI DataGrid 与分页

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