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)//渲染数据

 
      var 
        
      grid = $("# 
      paging").lyGrid({

 
      l_column : [{.. 在某一列设置渲染函数

 
      renderData :  
      function 
      ( rowindex ,data, rowdata, colkey) 
      //渲染数据

{

 
      //rowindex 当前行号 ,data 当前列的数据 ,rowdata 当前行json数据, colkey 当前列的colkey

 
      //处理当前列数据。可自定义html

 
      return  
      "" 
      ;

}

 
      }....] 
      //表格列表数据

 
      ......

[前端分页]

定义一个数组对象,基础参数设置 localData:localData,local:true

 
          
      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);