所属分类:网页特效-UI/布局/瀑布流,表格
使用方法:
引入CSS样式
<link rel="stylesheet" type="text/css" href="css/base.css">
引入jQuery库文件、插件JS文件
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/GridManager.js"></script>
单列表简易渲染、插件初始化、配置
$(function(){
//单列表简易渲染
var table = $('table[grid-manager]');
table.GM({
supportRemind: true
,isDevelopMode: true
,autoLoadCss:true //自动加载CSS文件,无需在页面中引用
,i18n:'zh-cn'
,textConfig:{
'page-go': {
'zh-cn':'跳转',
'en-us':'Go '
}
}
,gridManagerName:'aaa'
,disableCache:false
,disableOrder:false
,supportSorting: true
,supportDrag:true
,supportAjaxPage:true
,emptyTemplate: '<div class="gm-emptyTemplate">什么也没有</div>'
,ajax_data : {
"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": "修改"
},
{
"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": "修改"
},
{
"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": "修改"
},
{
"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": "修改"
},
{
"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
}
,isCombSorting: false
,pageSize:30
,query: {ex: '用户自定义的查询参数,格式:{key:value}'}
,columnData: [{
key: 'name',
remind: 'the username',
sorting: 'up',
width: '200px',
text: 'username'
},{
key: 'age',
remind: 'the age',
sorting: '',
width: '200px',
text: 'age'
},{
key: 'createDate',
remind: 'the createDate',
sorting: 'down',
width: '200px',
text: 'createDate'
},{
key: 'info',
remind: 'the info',
sorting: '',
text: 'info'
},{
key: 'operation',
remind: 'the operation',
sorting: '',
width: '100px',
text: 'operation',
template: function(operation, rowObject){ //operation:当前key所对应的单条数据;rowObject:单个一行完整数据
return '<a href=javascript:alert("这是一个按纽");>'+operation+'</a>';
}
}
]
,pagingBefore:function(query){
console.log('Event: 分页前', query);
}
,pagingAfter: function(query){
console.log('Event: 分页后', query);
}
,sortingBefore:function(query){
console.log('Event: 排序前', query);
}
,sortingAfter: function(query){
console.log('Event: 排序后', query);
}
,ajax_success: function(data){
console.log('Event: ajax_success', data);
}
},function(query){
console.log('init方法回调query参数', query);
});
});
调用方式:
<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节点是否为
格式 查看配置项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');