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

随机推荐

JAVA中hashmap的分析
从http://blog.csdn.net/luanlouis/article/details/41576373?utm_source=tuicool&utm_medium=referral学 ...
带你走进ajax(2)
ajax原理介绍传统的web应用传统的web应用是客户端向服务器发送一个http请求后,客户端要一直等待服务器的响应,这时用户什么事也干不成. 最麻烦的是对于表单的提交.比如用户要填写用户信息,等 ...
node异步流程控制async
1.串行无关联:async.series(tasks,callback); 多个函数依次执行,之间没有数据交换,其中一个函数出错,后续函数不再执行 async.series({ one: functi ...
mysql-connector-java小笔记
Java 连接MySQL需要驱动包,否则JDBC无法访问数据库(无法注册驱动),常用的是mysql-connector-java,在idea中新建项目时可以在选择依赖时勾选Mysql,这样就会自动加载 ...
20145321 《Java程序设计》第6周学习总结
20145321 <Java程序设计>第6周学习总结教材学习内容总结第十章输入输出 10.1 InputStream OutputStream 1.数据有来源与目的,衔接两者的是串流 ...
前端初级技能No.1 [切图]
“切图”是指通过测量设计稿,从设计稿中提取图片等方式为页面开发提供支持的过程. 整个“切图”过程主要分为以下五个主要步骤: 分析设计图: 测量元素: 提取图片: 保存图片: 图片优化与合并: 1.分析 ...
Hadoop资源调度器
hadoop调度器的作用是将系统中空闲的资源按一定策略分配给作业.调度器是一个可插拔的模块,用户可以根据自己的实际应用要求设计调度器.Hadoop中常见的调度器有三种,分别为: 1.基于队列的FIFO ...
通过Fiddler进行手机抓包
通过Fiddler进行手机抓包通过Fiddler抓包工具,可以抓取手机的网络通信,但前提是手机和电脑处于同一局域网内(WI-FI或热点),然后进行以下设置: 用Fiddler对Android应用进行 ...
C# 删除文件以及文件夹
代码如下: /// <summary> /// 删除文件夹以及文件 /// </summary> /// <param name="directoryPath& ...
PyTorch源码解读之torch.utils.data.DataLoader(转)
原文链接 https://blog.csdn.net/u014380165/article/details/79058479 写得特别好!最近正好在学习pytorch,学习一下! PyTorch中数据 ...

Easy UI DataGrid 与 分页

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

随机推荐

热门专题

Easy UI DataGrid 与分页

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