更新到1.2.0V版本
lyGrid.js 正式开源,源码可加官方群获取,
详细文档请看 http://www.lanyuanoss.com/document.shtml
git 地址: https://gitee.com/lanyuan/lyGrid.git
lyGrid 蓝缘表格插件 lyGrid.js-1.1.0v 正式开源,..欢迎到蓝缘官网评论 http://www.lanyuanoss.com/lanyuanoss/1463730205140/views.shtml
lyGrid表格插件
[示例] git 地址: https://gitee.com/lanyuan/lyGrid.git
[表格基础参数] 说明:以下参数是表格默认值,根据自己需求可以重新设置
var grid = $("#paging").lyGrid({
l_column : [{//表格列表数据
colkey : null,
name : null,
width : 'auto',
theadClass:'',
tbodyClass:'',
height : 'auto',
align : 'center',
hide : false,
isSort:false,
renderData : function( rowindex ,data, rowdata, colkey)//渲染数据
{
//rowindex 当前行号 ,data 当前列的数据 ,rowdata 当前行json数据, colkey 当前列的colkey
//处理当前列数据。可自定义html
return "";
}
}],
dymCol : false,//是否显示动态列
width : '100%', // 表格高度
height : '100%', // 表格宽度
theadHeight : '28px', // 表格的thead高度
tbodyHeight : '27px',// 表格body的每一行高度
jsonUrl : '', // 访问后台地址 支持静态数组数据[{xxx},{xxx},{xxx}]
isFixed : false,//是否固定表头
usePage : true,// 是否分页
setNumber : false,// 是否显示序号
local:false,//是否本地分页,即返回所有数据,让前端分页
records : 'records',// 分页数据
pageNow : 'pageNow',// 当前页码 或 当前第几页
totalPages : 'pageCount',// 总页数
totalRecords : 'rowCount',// 总记录数
pagecode : '10',// 分页时，最多显示几个页码
async : false, // 默认为同步
data : {
sidx:'',// 排序字段
sord:''// 排序 asc / desc
}, // 发送给后台的数据 是json数据 例如{nama:"a",age:"100"}....
pageSize : 10, // 每页显示多少条数据
checkbox : false,// 是否显示复选框
checkValue : 'id', // 当checkbox为true时，需要设置存放checkbox的值字段 默认存放字段id的值
trRowClick:null,//trRowClick:function(index,data)tr.rowIndex 第几行 ,rowdata 当前行数据双击行事件
beforeComplete:null,//请求数据之前,执行这个方法 beforeComplete(params); 表格所有参数
afterComplete:null,//所有数据请求完成之后执行这个方法 afterComplete(column,currentData);//回调函数 column 字段名,当前界面的数据 currentData
treeGrid : {
type: 1, //1 表示后台已经处理好父类带children集合 2 表示没有处理,由前端处理树形式
tree : false,// 是否显示树
hide : false,//默认展开
//checkParent : false,//选中子类，自动选中父类
checkChild : false,//选中父类，自动选中子类
name : 'name',// 以哪个字段 的树形式 如果是多个 name,key
id: "id",
pid: "pid"
},
// 树形式 {tree : false,//是否显示树 name : 'name'}//以哪个字段 的树形式
});
[查询方法] $("#search") 绑定查询按扭 setOptionis 设置查询参数, 具体参数请看 [表格基础参数],所有参数都可以重设.
1
2
3
4
5
6
$("#search").click("click", function() {// 绑定查询按扭
var searchParams = $("#searchForm").serializeJSON();
grid.setOptions({//设置参数，具体参数与表格参数一致
data : searchParams//查询条件数据，必须是json格式
});
});
[刷新表格] 具体参数请看 [表格基础参数] 中 var grid = lyGrid({......
1
grid.loadData();
[设置复选框值] grid 是表格对象,具体参数请看 [表格基础参数] 中 checkValue : 'id', // 当checkbox为true时，需要设置存放checkbox的值字段 默认存放字段id的值
1
checkValue : 'id', // 当checkbox为true时，需要设置存放checkbox的值字段 默认存放字段id的值
[获取复选框值] grid.getSelectedCheckbox() 获取选择的行的Checkbox值,值是一个数组,[id1,id2,id3,id4....]
1
2
3
var ck = grid.getSelectedCheckbox(); ---> [1,2,3,4] //是数组
ck = ck..join(",") ---> 1 //是字符串
console.log(ck) --> 1 //是字符串
[获取行数据] grid.selectRow(),// 获取选中行数据，当前行的所有json数据，包括隐藏和非隐藏的数据,返回一个list数组对象
1
2
3
var row = grid.selectRow();
//例如选中了两个
---> [{id:1,name:'小明'},{id:2,name:'小红'}] //是对象的list
[上移一行] grid.lyGridUp();当前选中的行会向上移动一行.
1
grid.lyGridUp();
[下移一行] grid.lyGridDown();当前选中的行会向下移动一行.
1
grid.lyGridDown();
[获取当页数据] var c = grid.getCurrentData(); 获取当前页的所有数据, 是json 数组对象
1
var c = grid.getCurrentData();
[获取表头数据] var c = grid.getColumn();//得到你定义表格头 l_column 的数据
1
var c = grid.getColumn()
[导出数据] grid.exportData(url);//传入导出url地址. 发送到后台的参数是 exportData=表格头对象数据 + 查询条件参数
1
grid.exportData(url);
[动态显示表头] 基础参数设置 dymCol : false,//是否显示动态列 默认为false
1
2
3
4
5
6
7
var localData = [{"id":179,"methods":"资源管理-修改资源","accountName":"admin","module":"系统管理","userIP":"0:0:0:0:0:0:0:1",
"description":"执行成功!","operTime":1447128013000,"logType":"0","actionTime":"18"}.....
var grid = $("#paging").lyGrid({
l_column : [{....}]{//表格列表数据
dymCol : false,
......
[当前行回调] 定义一个数组对象,基础参数设置 renderData : function( rowindex ,data, rowdata, colkey)//渲染数据
1
2
3
4
5
6
7
8
9
10
var grid = $("#paging").lyGrid({
l_column : [{.. 在某一列设置渲染函数
renderData : function( rowindex ,data, rowdata, colkey)//渲染数据
{
//rowindex 当前行号 ,data 当前列的数据 ,rowdata 当前行json数据, colkey 当前列的colkey
//处理当前列数据。可自定义html
return "";
}
}....]//表格列表数据
......
[前端分页] 定义一个数组对象,基础参数设置 localData:localData,local:true
1
2
3
4
5
6
7
8
var localData = [{"id":179,"methods":"资源管理-修改资源","accountName":"admin","module":"系统管理","userIP":"0:0:0:0:0:0:0:1",
"description":"执行成功!","operTime":1447128013000,"logType":"0","actionTime":"18"}.....
var grid = $("#paging").lyGrid({
l_column : [{....}]{//表格列表数据
jsonUrl:localData,
local:true,//表示前端分页
......
[回调方法] var grid_c=lyGrid(parm,function(obj){}) obj 是当前表格对象, parm 是表格的基础参数
1
2
3 var grid = $("#paging").lyGrid({ beforeComplete:function(conf){
var s = "加载之前触发,当前表格配置参数 "+JSON.stringify(conf);
layer.alert(s);
},
afterComplete:function(column,currentData){
var s = "加载之后触发,当前页数据是 "+JSON.stringify(currentData);
layer.alert(s);
}
})
来源：oschina
链接：https://my.oschina.net/u/819276/blog/1606374