GridManager.js

快速、灵活的对Table标签进行实例化，让Table标签充满活力。

实现功能

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

• 宽度调整: 表格的列宽度可进行拖拽式调整
• 位置更换: 表格的列位置进行拖拽式调整
• 配置列: 可通过配置对列进行显示隐藏转换
• 表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
• 排序: 表格单项排序或组合排序
• 分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
• 用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
• 序号: 自动生成序号列
• 全选: 自动生成全选列
• 导出: 当前页数据下载,和仅针对已选中的表格下载
• 右键菜单: 常用功能在菜单中可进行快捷操作
• 过滤: 通过对列进行过滤达到快速搜索效果

安装

npm install gridmanager --save

相关链接

• API
• Version
• GridManager by Vue

在线demo

• base grid
• use I18N grid
• use search grid
• use export grid
• use template grid

浏览器兼容

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

示例

使用默认配置

<table></table>

document.querySelector('table').GM({
	gridManagerName: 'demo-baseCode',
    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'
        }
    ]
});

使用分页

<table></table>

document.querySelector('table').GM({
	gridManagerName: 'demo-ajaxPageCode',
    ajax_url: 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList',
    ajax_type: 'POST'
    query: {pluginId: 1},
    supportAjaxPage: true,
    columnData: [
        {
            key: 'name',
            text: 'name'
        },{
            key: 'info',
            text: 'info'
        },{
            key: 'url',
            text: 'url'
        }
    ]
});

数据格式

这是标准格式, 如果返回格式不同。可以通过参数或responseHandler进行修改。 具体请参考API

   {
   	"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
   }

License

• License