资讯专栏INFORMATION COLUMN

分享表格组件-GridManager

KaltZK / 2315人阅读

摘要:优势纯原生实现,不依赖任何框架使用简单快捷,功能强大与用户进行沟通,采纳来自于使用的需求,并不间段的进行升级维护特色功能表格的列宽度可进行拖拽式调整表格的列位置进行拖拽式调整可通过配置对列进行显示隐藏转换在表存在可视区域的情况下表头将一直存

GridManager

优势

纯原生javascript实现,不依赖任何框架

使用简单快捷,功能强大

与用户进行沟通,采纳来自于使用的需求,并不间段的进行升级维护

特色功能

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

表格的列位置进行拖拽式调整

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

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

表格单项排序或组合排序

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

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

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

自动生成序号列

自动生成全选列

当前页数据导出、已选中数据导出

右键菜单快捷操作

生成示例
这是一个很简单的示例,具体的请参考demo
var table = document.querySelector("table[grid-manager="demo-baseCode"]")
table.GM({
    ajax_url: "http://www.lovejavascript.com/learnLinkManager/getLearnLinkList"
    ,ajax_type: "POST"
    ,query: {pluginId: 1}
    ,columnData: [
        {
            key: "name",
            text: "名称"
        },{
            key: "info",
            text: "使用说明"
        },{
            key: "url",
            text: "url"
        }
    ]
})
相关链接

主站: http://gridmanager.lovejavasc...

github: https://github.com/baukh789/G...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93106.html

相关文章

  • React 表格组件 GridManager-React

    摘要:基于的封装用于便捷的在中使用除过特性外,其它与相同。刷新更新查询条件其它更多请直接访问查看当前版本的版本的版本 GridManager React 基于 React 的 GridManager 封装, 用于便捷的在 React 中使用GridManager. 除过React特性外,其它API与GridManager API相同。 showImg(https://segmentfault...

    cyixlq 评论0 收藏0
  • Vue表格组件--GridManager Vue

    摘要:基于的封装用于便捷的在中使用除过特性外,其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。并且使用服务需要提前通过将注册至全局组件。刷新或更新查询条件或其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridManag...

    khs1994 评论0 收藏0
  • vue表格组件

    摘要:基于的封装用于便捷的在中使用除过特性外,其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。非必设项,选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外,其它API与GridM...

    ysl_unh 评论0 收藏0
  • 表格组件 GridManager Angular 1.x

    摘要:非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。前端鸡汤前端框架前端相关筛选选中项,字符串默认为。非必设项,选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager. s...

    darcrand 评论0 收藏0
  • GridManager 隐藏列

    摘要:表格管理组件,对列的隐藏与显示的操作有两种方式。初始化时指定列为隐藏或显示状态。在已经执行过的前提下,可通过如下方式对列进行操作对第一列进行显示对第二列进行隐藏批量操作隐藏第二和第三列批量操作显示全部列 GridManager 表格管理组件, 对列的隐藏与显示的操作有两种方式。 初始化时指定列为隐藏或显示状态。方式如下: var table = document.querySele...

    luqiuwen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<