UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery表格插件表格插件gridGridManager

所属分类：UI-图表

 119293  507  查看评论 (35)
分享到微信朋友圈
X
jQuery表格插件表格插件gridGridManager ie兼容10
 查看演示  website  立即下载

更新时间：2019/12/10 下午5:40:27

更新说明：

- 新增

    - `rowClick`: 行点击事件

    - `rowHover`: 行hover事件

    - `cellClick`: 单元格点击事件

    - `rowRenderHandler`中支持对`gm_row_class_name`进行修改，以达到对当前行className的操控

- 修复

    - `resetLayout`: 宽度刚够时，出现横向滚动条问题

    - 多个不同框架版本共存于一个页面时，实例覆盖问题

- 优化

    - tbody渲染时，模板错误信息抛出

    - `template` 参数扩充为4个，分别是cell: 单元格数据, row: 行数据, index: 行索引, key: 列唯一键

    - 将index.html中的`init()`逻辑迁移至`GridManager.init()`内, 并推荐使用new GridManager()替代TableElement.GM('init', {})方式

    - 切换每页显示条数与上一次值相同时，不再进行刷新操作

更新时间：2017/12/25 下午12:44:40

更新说明：

增加了新参数，优化了性能。

优化了视觉效果，用户交互

更新时间：2017/2/6 上午10:44:34

更新说明：

1.修复了部分BUG；

2.优化代码结构

3.增加单元测试

4.样式优化

实现功能

GridManager.js可快速的对table标签进行实例化，实例化后将实现以下功能:

  • 宽度调整: 表格的列宽度可进行拖拽式调整

  • 位置更换: 表格的列位置进行拖拽式调整

  • 配置列: 可通过配置对列进行显示隐藏转换

  • 表头吸顶: 在表存在可视区域的情况下,表头将一下存在于顶部

  • 排序: 表格单项排序或组合排序

  • 分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能

  • 用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数

  • 分页、排序、刷新时自动进行数据加载，且提供相应的before、after事件

  • 序号: 自动生成序号列

  • 全选: 自动生成全选列

  • 导出: 当前页数据下载,和仅针对已选中的表格下载

  • 右键菜单: 常用功能在菜单中可进行快捷操作

浏览器兼容

Firefox, Chrome,IE10+ 这里提一下为什么不支持低版本: 使用表格插件的大都是管理平台或系统,通常都是会进行浏览器指定,所以设计之初就没有考虑这个方面.

演示及文档

调用方式

<table grid-manager="test"></table>
$('table[grid-manager="test"]').GM({
        supportRemind: true
        ,i18n:'zh-cn'
        ,textConfig:{
            'page-go': {
                'zh-cn':'跳转',
                'en-us':'Go '
            }
        }
        ,disableCache:false
        ,disableOrder:false
        ,supportSorting: true
        ,isCombSorting: true
        ,sortDownText: 'up'
        ,sortUpText: 'down'
        ,supportDrag:true
        ,supportAjaxPage:true
        ,ajax_url: 'data/test.json'
        ,ajax_type: 'POST'
        ,pageSize:30
        ,query: {ex: '用户自定义的查询参数,格式:{key:value}'}
        ,columnData: [{
                key: 'name',
                remind: 'the username',
                sorting: 'up',
                width: '200px',
                text: 'username'
            },{
                key: 'age',
                remind: 'the age',
                width: '200px',
                text: 'age'
            },{
                key: 'createDate',
                remind: 'the createDate',
                sorting: 'down',
                width: '200px',
                text: 'createDate'
            },{
                key: 'info',
                remind: 'the info',
                text: 'info'
            },{
                key: 'operation',
                remind: 'the operation',
                sorting: '',
                width: '200px',
                text: 'operation',
                template: function(operation, rowObject){  //operation:当前key所对应的单条数据；rowObject：单个一行完整数据
                    return '<a href=javascript:alert("这是一个按纽");>'+operation+'</a>';
                }
            }
        ]
    });

数据格式

   {
    "data":[{
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
    "totals": 1682
   }

常见问题解答

1.数据在渲染前就已经存在,如何配置?

可以通过参数ajax_data进行配置,如果存在配置数据ajax_data,将不再通过ajax_url进行数据请求,且ajax_beforeSend、ajax_error、ajax_complete将失效，仅有ajax_success会被执行.

2.如何在数据请求中增加筛选条件?

可以通过参数query进行配置,该参数会在GirdManager实例中一直存在,并且可以在筛选条件更改后通过$('table').GM('setQuery')方法进行重置.

3.开发中想查看当前的GirdManager实例中的数据怎么实现?

通过$('table').GM('get')方法可以获得完整的GirdManager对象;通过$('table').GM('getLocalStorage')可以获得本地存储信息.

4.实例化出错怎么办?

查看DOM节点是否为<table grid-manager="test"></table>格式
查看配置项columnData中key值是否与返回数据字段匹配.

5.后端语言返回的数据格式与插件格式不同怎么处理?

可以通过参数[dataKey:ajax请求返回的列表数据key键值,默认为data][totalsKey:ajax请求返回的数据总条数key键值,默认为totals]进行配置.

6.表格样式未加载成功,怎么处理?

插件采用两种样式加载机制,一种是通过用户自动link,一种是通过配置参数autoLoadCss=true与参数basePath来进行自动加载.出现样式错误的情况,多半是由于采用自动加载机制,但参数basePath未配置正确导致的.
排错重点为参数:autoLoadCss(是否自动加载CSS文件),basePath(当前基本路径,用于css自动加载样式文件)
如果不能确定basePath,建议将autoLoadCss设置为false,通过link手动进行加载.

7.表格th中的文本显示不全

查看配置项[columnData]中的width, 将该值提高或不进行设置由插件自动控制. 如果还为生效,那是由于当臆实例开始了记忆功能,解决方法为:将localStorage中包含与当前表格grid-manager名称对应的项清除,或使用localStorage.clear()将本地存储全部清除.

8.想清除当前记忆的宽度及列位置时怎么办?

可使用clear方法,调用方式:$('table').GM('clear');
相关插件-图表
查看更多

ets实现汽车动态仪表盘

 通过ets实现汽车动态仪表盘，包括速度，转速等的实时数据更新
  图表
 17052  207

冻结表头

 冻结表头 实现表头的冻结效果
  图表
 46048  373

jQuery响应式表格插件ReStable

 jQuery restable是一个非常简单轻量级（~ 1KB）的jQuery插件,它可以将表格在指定的响应式断点时，使表格结构切换为无序列表结构，以适应在小屏幕设备中显示表格数据。
  图表
 32931  316

jquery.jqplot 绘图插件

 jqPlot是一个jQuery绘图插件，可以利用它制作漂亮的线状图、柱状图和饼图。
  图表
 45930  374

讨论这个项目（35）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    漂O_o洋过海来看你…… 0
    2020/11/23 9:34:54
    插件不支持ie10+吗 回复
    你真“林艳” 0
    2019/8/23 9:44:15
    $('table').GM('setQuery')这个方法怎么重新设置参数啊
        拭目以待0
        2019/11/28 14:10:46
        $('table').GM('setQuery', {name: 'alie'})
        建议更新至最新版本，使用方式如下
        GM.setQuery(gridManagerName, query);

        参考: http://gridmanager.lovejavascript.com/api/index.html#setQuery
        飞 梭丶0
        2019/12/26 11:49:52
        GridManager里面的模糊搜索功能 引用服务器的json数据可以实现搜索功能 为什么引用本地你会失效呢
    回复
    豆腐燕小乙 0
    2019/5/27 10:17:11
    请问列比较多时如何让表格出现横向滚动条？
        拭目以待0
        2019/11/28 14:12:41
        每一列相加的总宽度大于容器宽度时，会自动出横向滚动条。
    回复
    快乐宝贝 0
    2019/3/7 8:10:31
    请问GridManager列比较多的时候表头和内容对不齐怎么办
        拭目以待0
        2019/3/23 10:05:00
        建议去下载gridmanager最新版本
    回复
    豆腐燕小乙 0
    2019/1/24 10:18:51
    支持树状层级展示么？
        拭目以待0
        2019/11/28 14:17:04
        支持
    回复
    豆腐燕小乙 0
    2019/1/22 16:27:17
    箭头和多选框显示异常怎么解决啊，是少了什么文件么？
        拭目以待0
        2019/11/28 14:13:40
        建议去http://gridmanager.lovejavascript.com/下载gridmanager最新版本，jq22上更新版本很麻烦。
    回复
    ???????? 0
    2018/4/11 13:47:19
    数据加载过来之后，数据总数错误 并且当前页数控制也没用
        拭目以待0
        2019/1/10 17:49:33
        总数是由接口返回的，静态接口肯定有问题的
    回复
    与幸福相关 0
    2017/8/13 13:50:27

    动态加载自己的json数据后，无法实现分页，假如有100条数据，数据不全部显示在第一页，按2页以后，数据也是显示在第一页，不知道怎么解决。换了demo数据后，又能正常显示，不知道是不是数据格式问题

        亲爱的0
        2017/9/5 15:03:50

        我的也是。楼主解决了吗

        豆腐燕小乙0
        2019/5/27 9:38:50
        我也是这个问题
        豆腐燕小乙0
        2019/5/28 17:47:08
        楼主怎么解决的？
    回复
    狼灰灰 0
    2017/7/14 16:30:24

    IE下一片空白阿。IE11 换了台电脑还是空白。

        ?卡布淇诺不要糖?0
        2017/8/3 13:34:03

        请问问题解决了吗? 我的也是啊  

        狼灰灰0
        2017/8/3 16:11:07
        没有解决阿，应该是插件不支持IE
        -果冻--0
        2017/11/21 15:08:52

        根本不支持IE。试了下IE11都是空白的

    回复
    [ believe-] 0
    2017/6/23 17:11:58

    怎么删除一条数据

        豆腐燕小乙0
        2019/1/22 16:24:33
        删除数据肯定要另外写方法啊，比如数据库的增删改查
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复