lyGrid.js-1.1.0v 正式开源,源码可加官方群获取, 详细文档请看 http://www.lanyuanoss.com/document.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);        } })