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

随机推荐

Redhat 7.4更新为Centos7的yum并安装docker-ce
以下命令请在root下执行 #删除原有的yum rpm -qa|grep yum|xargs rpm -e --nodeps #install centos yum #wget http://mirr ...
NetBeans 启动时出现 Invalid jdkhome specified提示
执行 NetBeans 出现如下文字内容: Invalid jdkhome specifiedCannot locate java installation in specifired jdkhome ...
Autowire
Field userService in com.demo.web.Controller.HomeController required a single bean, but 2 were found ...
python---自动群发邮件
生活中我们经常发送邮件,那么我们能不能用Python写一个自动发送邮件的功能呢?答案是肯定的!!! 开始实现功能之前我们需要开启我们邮箱的 IMAP/SMTP功能,我们先了解一下什么是IMAP/SMT ...
params
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Ch06 ...
Eclipse FindBugs插件
在线安装: Update Site:http://findbugs.cs.umd.edu/eclipse 本地安装: 1.首先从findbugs网站下载插件:http://findbugs.sourc ...
使用淘宝的npm代理下载模块
npm install node-sass --registry=http://registry.npm.taobao.org
codeforce diversity
2017-08-25 14:59:34 writer:pprp 题意如下:给你一个串字符,再给你一个数字,表示在字符串中的各不相同的字符个数, 问你最少需要改变几个字符达到要求,不能达到要求就输出im ...
geoserver源码学习与扩展——增加服务接口
参看:http://www.cnblogs.com/sillyemperor/archive/2011/01/11/1929420.html 上文写的很详细了.
决策树的剪枝，分类回归树CART
决策树的剪枝决策树为什么要剪枝?原因就是避免决策树“过拟合”样本.前面的算法生成的决策树非常的详细而庞大,每个属性都被详细地加以考虑,决策树的树叶节点所覆盖的训练样本都是“纯”的.因此用这个决策树来 ...

Easy UI DataGrid 与 分页

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

随机推荐

热门专题

Easy UI DataGrid 与分页

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