zoukankan      html  css  js  c++  java
  • eayui datagrid 分页 排序 详解

      最近因为经常使用easyui 在做表格时难免后出现排序 及分页的问题,但是 在官网中没有 相关的介绍及例子,所以经过多方面的查找后,终于完成了分页 和排序的功能

    首先 页面datagrid 要排序的必要的条件是 2个 sortable:true,remoteSort: false,见标红处

     function JTContent(titile) {
    
                $("#Info").datagrid({
                    title: titile + "--二级公司",
                    loadMsg: "正在加载数据,请等待!",
                    singleSelect: true,
                    rownumbers: true,
                    remoteSort: false, //必要条件1
                    autoRowHeight: false,
                    pagination: true,
    
                    queryParams: { "name": "Tload" },
                    striped: true,
    
                    align: 'center',
    
                    url: "CouInfo.aspx",
    
                    columns: [[
    
                     { field: 'T_COMDESC', title: '单位名称'<spanstyle="color:#ff0000sortable: true, align: 'center' },
    
                      { field: '电厂地址', title: '地理位置', align: 'center', sortable: true },
                      { field: '所属省份', title: '所属省份', align: 'center', sortable: true },
    
                      { field: '火电装机容量', title: '火电装机容量(兆瓦)', align: 'center',sortable:true },
                     { field: '脱硫装置类型装机容量', title: '脱硫装机容量(兆瓦)', align: 'center',sortable: true },
    
                     { title: '脱硝装机容量(兆瓦)', field: '脱硝装置类型装机容量', align: 'center', sortable: true },
                       { title: '火电厂个数', field: '电厂个数', align: 'center', sortable: true },
                      { title: '火电机组数量(台)', field: '火电机组数量', align: 'center', sortable: true },
                     { title: '脱硫机组数量(台)', field: '脱硫装置类型机组', align: 'center', sortable: true },
                      { title: '脱硝机组数量(台)', field: '脱硝装置类型机组', align: 'center', sortable: true },
                      { title: '脱硫装置套数(套)', field: '脱硫装置套数', align: 'center', sortable: true },
                        { title: '脱硝装置套数(套)', field: '脱硝装置类型机组', align: 'center', sortable: true },
                       { title: '二级单位接入情况', field: '二级单位接入情况', align: 'center', sortable: true }
    
                                ]]
    
    
                }, 'json');
    
            }

    然后就是 easyui每次访问后台数据时都会默认传送两个参数 rows,page

    rows ---每页显示多少条数据 ,page--- 第几页

    这样大家就知道怎么处理了吧,为了方便大家我封装了一个dll 大家在页面引用下就可以用了

    使用用方式  Common_CFJ.Common_CFJ.datagridData(data);

    文件下载 http://files.cnblogs.com/DDSkay/Common_CFJ.zip 

  • 相关阅读:
    StarUML中时序图
    HTML5/jQuery雷达动画图表 图表配置十分简单
    AspNetPager样式以及属性帮助文档
    IE浏览器img不显示解决
    php表单提交--文件
    javascript继承---组合式继承
    javascript继承--原型链的 继承
    【转】JavaScript 之arguments、caller 和 callee 介绍
    Array对象
    android 系统提示对话框(AlertDialog)的使用
  • 原文地址:https://www.cnblogs.com/DDSkay/p/4130576.html
Copyright © 2011-2022 走看看