lyGrid表格插件

 表格基础参数:

grid = 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 "";

                }

        }],

        pagId : ‘paging‘// 加载表格存放位置的ID

        width : ‘100%‘// 表格高度

        height : ‘100%‘// 表格宽度

        theadHeight : ‘28px‘// 表格的thead高度

        tbodyHeight : ‘27px‘,// 表格body的每一行高度

        jsonUrl : ‘‘// 访问后台地址

        isFixed : false,//是否固定表头

        usePage : true,// 是否分页

        serNumber : false,// 是否显示序号

        local:false,//是否本地分页,即返回所有数据,让前端分页

        localData:[],//本地数据集

        records : ‘records‘,// 分页数据

        pageNow : ‘pageNow‘,// 当前页码 或 当前第几页

        totalPages : ‘pageCount‘,// 总页数

        totalRecords : ‘rowCount‘,// 总记录数

        pagecode : ‘10‘,// 分页时,最多显示几个页码

        async : false// 默认为同步

        data : ‘‘// 发送给后台的数据 是json数据 例如{nama:"a",age:"100"}....

        pageSize : 10, // 每页显示多少条数据

        checkbox : false,// 是否显示复选框

        checkValue : ‘id‘// 当checkbox为true时,需要设置存放checkbox的值字段 默认存放字段id的值

        treeGrid : {

            type: 1, //1 表示后台已经处理好父类带children集合 2 表示没有处理,由前端处理树形式

            tree : false,// 是否显示树

            hide : false,//默认展开

            name : ‘name‘,// 以哪个字段 的树形式 如果是多个 name,key

            id: "id",

            pid: "pid"

        },

        // 树形式 {tree : false,//是否显示树 name : ‘name‘}//以哪个字段 的树形式

    };

});

        1.  setOptions,//自定义条件查询

$("#search").click("click"function() {// 绑定查询按扭

    var searchParams = $("#searchForm").serializeJSON();

    grid.setOptions({//设置参数,具体参数与表格参数一致

        data : searchParams//查询条件数据,必须是json格式

    });

});

   2. loadData//重新加载数据

  grid.loadData();

     3. getSelectedCheckbox,//获取选择的行的Checkbox值

 var ck = grid.getSelectedCheckbox(); ---> [1] //是数组

     ck = ck..join(",") ---> 1 //是字符串

     console.log(ck)  --> 1 //是字符串

  4. selectRow,// 获取选中行数据,当前行的所有json数据,包括隐藏和非隐藏的数据

  var row = grid.selectRow(); 

     //例如选中了两个

     ---> [{id:1,name:‘小明‘},{id:2,name:‘小红‘}] //是对象的list

5. lyGridUp,// 选中行向上移一行

 grid.lyGridUp();

6.lyGridDown,// 选中行向下移一行

  grid.lyGridDown();

7. getCurrentData,// 获取表格当前页所有的json数据

  var g = grid.getCurrentData();

 8.getColumn,//获取表头

 var c = grid.getColumn(); //得到你定义表格头 l_column 的数据

时间: 2024-10-29 04:14:20

lyGrid表格插件的相关文章

(原)jq表格插件dataTables的一些总结(一)

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量的演示和详细的文档进行说明,官网网站是http://www.datatables.net/,参考的网址还有DataTables中文网http://dt.thxopen.com/.这段时间因为需要用表格在前台显示数据,所以接触到dataTables,上网查资料发现网上的资料都比较老,所以想将自己最近用到的dataTables的

bootstrap-table表格插件获取分页参数

bootstrap-table是一款非常优秀表格插件,因为本人初次使用,还不是很熟悉,在使用的过程中遇到了一些问题,遂记录在此与大家分享. 插件的使用最重要是配置参数,表格插件更重要的是分页,所以这里有几个很重要的参数大家一定要注意: 1.一般分页都是在服务器端分页,所以 sidePagination : "server", 2.页数和页面大小 pageNumber : 1, //初始化加载第一页,默认第一页 pageSize : 10, //每页的记录行数(*) 3.查询参数类型,默

15 个最佳的 jQuery 表格插件

现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点. 大多数网站设计要靠margins, guides, rows and columns等网格系统和布局来在网页上组织内容.网格设计常见于报纸和杂志中的文字图像排版设计. 可以创建网格布局的数量几乎是无限的,并且能够用无数种方式排布.比如:在等间距的两列,三列或者四列网格顶端有一个横跨的header,或者一整页的有着同样外观和感觉的方格. 有一些很好的JQuer

表格插件之一datatables

datatables的基础使用 引入css文件dataTables.bootstrap.css 引入js插件dataTables 引入js文件:jquery.dataTables.js,dataTables.bootstrap.js Js调用: $(".dataTables-example").dataTable(); html部分: 展示效果如下,功能都能操作 但是一般我们不需要按条分页还有搜索,只需要分页,我们可以配置相关参数 例如 去掉排序: $(".dataTable

Datatables快速入门开发--一款好用的JQuery表格插件

博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquery表格插件,上手很快,重点是超级好用,有完善的中文文档,今天有空,整理一下Datatable的一些使用方法及注意事项,以便随时查阅. DataTables支持的功能: 1.分页,只需要返回符合规范的数据类型,Datatable能帮我们实现好用的分页,同时支持排序,和即时搜索. 2.丰富的数据源的

web多终端开发学习系列(三)--- 基于bootstrap的表格插件bootstrap-table

基于网页管理系统的开发大多数功能只是对数据的显示与操作,对于数据的显示一般都是通过table表格来显示,所以管理系统的开发很有必要引入表格插件,对于sencha touch等商业化框架,都有自己自带的表格控件,而对于bootstrap需要引入第三方的表格插件,这里我学习下bootstrap table. 介绍 bootstrap table是基于bootstrap框架的一个表格插件,官网地址是http://wenzhixin.net.cn/p/bootstrap-table/docs/index

bootstrap表格插件——Bootstrap-Table

注:本文引用自:http://www.cnblogs.com/wuhuacong/p/7284420.html 一.概述 1.是什么 是一个基于bootstrap的灌数据式的表格插件 2.能干什么 可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,以及一些不错的扩展功能 3.怎么干 插件官网:http://bootstrap-table.wenzhixin.net.cn/  官方示例:http://bootstrap-table.we

jquery DataTables表格插件的使用(网页数据表格化及分页显示)

DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用DataTables: 只需要在html或ejs下引用写好的样式表css和脚本文件js,对应代码如下: 1 <head> 2 <link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css"

Dynatable – 基于 HTML5 &amp; jQuery 的交互表格插件

Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5和 JSON 实现.Dynatable 的目的是提供一种简单的.可扩展的 API,能够轻松的浏览和操作大规模的数据集.Dynatable 提供包括排序,搜索和过滤等常用的数据处理功能. 效果预览下载