文档章节

lyGrid.js 正式开源,源码可加官方群获取,

蓝缘Y
 蓝缘Y
发布于 2018/01/12 20:52
字数 1470
阅读 577
收藏 0

更新到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);

   }

})

© 著作权归作者所有

蓝缘Y
粉丝 22
博文 6
码字总数 4714
作品 0
广州
私信 提问
Exrick/3D-Banner

3D-Banner 基于Vue开发的3D轮播图组件 在线Demo:http://xmall.exrick.cn/ 高仿锤子商城官网轮播图,3D视差效果,实现后台可灵活配置,定时自动轮播 原作者 qingjin ; 二次开发 yucccc ; 本作...

Exrick
2018/04/21
0
0
开源重磅,java内容管理系统CMS,点击即可编辑,保存,轻松构建自己的网站

买的临时空间不给力,内存不足,老给关闭,先转到京东云上了,免费的,也不知免费多久, 这是地址 http://java4cms.jd-app.com/index.html 这是地址 http://bamboocms.jd-app.com/index.html...

姜小北
2014/05/04
4.5K
0
TBSchedule应用实战(零)—— 前言

TaoBaoSchedule(以下简称tbs)是国产市面上最早开源得一款“分布式定时任务调度”框架。开源之初因其卓越的性能、近乎零侵入的api设计、去中心化的设计思想、故障自动转移等等特性,几乎是一...

Wednesday_OSC
2017/12/18
902
0
Exrick/xmall-front

XMall-Front 基于Vue开发的XMall商城前台页面 项目已部署,在线Demo 前台商城:http://xmall.exrick.cn/ 后台管理系统:http://xmadmin.exrick.cn/ 感谢 yucccc 的开源 vue-mall 项目提供前端...

Exrick
2018/04/21
0
0
车江毅/ConfigManager

##分支说明## 该分支是基于BSF的基础上开发的分支。 修改内容 1)sdk以插件的形式扩展自BSF。 2)项目命名空间从Dyd.BaseService.ConfigManager修改为ConfigManager 3) 打包安装包,可以直接...

车江毅
2015/11/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
53分钟前
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部