同步操作将从 写个程序换个饼/GridManager 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
###文档介绍及源码
##使用需知 下载时请选择对应的tag进行下载, 请不要直接使用marset分支上的代码.
v2.0和之前版本为jquery版本
v2.1开始为原生js版本 ##实现功能 GridManager.js可快速的对table标签进行实例化,实例化后将实现以下功能:
宽度调整: 表格的列宽度可进行拖拽式调整
位置更换: 表格的列位置进行拖拽式调整
配置列: 可通过配置对列进行显示隐藏转换
表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
排序: 表格单项排序或组合排序
分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号: 自动生成序号列
全选: 自动生成全选列
导出: 当前页数据下载,和仅针对已选中的表格下载
右键菜单: 常用功能在菜单中可进行快捷操作
##安装命令
npm install GridManager
##引入方式
<link rel="stylesheet" type="text/css" href="/node_modules/GridManager/dist/css/GridManager.css"/>
<script type="text/javascript" src="/node_modules/GridManager/dist/js/GridManager.js"></script>
##浏览器兼容 -Firefox, Chrome,IE10+ -这里提一下为什么不支持低版本: 使用表格插件的大都是管理平台或系统,通常都是会进行浏览器指定,所以设计之初就没有考虑这个方面.
##demo演示
##调用方式
<table grid-manager="test"></table>
document.querySelector('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: 'ASC',
width: '200px',
text: 'username'
},{
key: 'age',
remind: 'the age',
width: '200px',
text: 'age'
},{
key: 'createDate',
remind: 'the createDate',
sorting: 'DESC',
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实例中一直存在,并且可以在筛选条件更改后通过document.querySelector('table').GM('setQuery')方法进行重置.
###3.开发中想查看当前的GirdManager实例中的数据怎么实现? 通过document.querySelector('table').GM('get')方法可以获得完整的GirdManager对象; 通过document.querySelector('table').GM('getLocalStorage')可以获得本地存储信息.
###4.实例化出错怎么办? 查看DOM节点是否为
###5.后端语言返回的数据格式与插件格式不同怎么处理? 可以通过参数[dataKey:ajax请求返回的列表数据key键值,默认为data][totalsKey:ajax请求返回的数据总条数key键值,默认为totals]进行配置.
###6.表格th中的文本显示不全 查看配置项[columnData]中的width, 将该值提高或不进行设置由插件自动控制. 如果还为生效,那是由于当臆实例开始了记忆功能; 解决方法为:将localStorage中包含与当前表格grid-manager名称对应的项清除,或使用localStorage.clear()将本地存储全部清除.
###7.想清除当前记忆的宽度及列位置时怎么办? 可使用clear方法,调用方式:document.querySelector('table').GM('clear');
##联系我 QQ群号: 452781895
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。