欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQueryLigerUI插件基础函数的使用方法实例介绍

程序员文章站 2022-07-10 12:54:03
jquery ligerui作为我最近尝使用的前端插件之一,我针对其使用进行总结: 一、我针对其方法的调用做简单介绍,有三种方式(以数据表格为例): $("#dg").lig...

jquery ligerui作为我最近尝使用的前端插件之一,我针对其使用进行总结:

一、我针对其方法的调用做简单介绍,有三种方式(以数据表格为例):

$("#dg").ligergrid().getrow(index);   /** 有参方法的使用*/

$("#dg").ligergrid('getselectedrow'); /**针对没有参数的方法*/

/** js中初始化数据表格,并赋值*/
var dg = $("#dg").ligergrid({/** js 初始化部分省略*/})
dg.getrow(index);

二、针对js方法的优化

1、给数据表格的某一个单元格渲染(redener)后,点击单元格进行事件操作。

由于jquery ligerui自带的getselectedrow() 必须先选择一行后,再次点击单元格中的按钮进行操作,需要用户进行对一行点击两次进行操作,用户使用感极差。

此时可以利用jquery ligerui 中的getrow(index) 方法进行获取行,代码附上:

<script>
    $("#dg").ligergrid({
        columns:[ 
            {name: 'id', display: '查看操作',align:'center',width: '10%',
                  render:function (row,index,value){
                      return globals.func.getcelloper("look", value, index, "查看","red");
                 }
            },
            {name: 'name',display: '姓名', align: 'left', width:'10%'},
         ],
        url:url,//请求路径
        parms:{},//参数
        rownumbers: true,    // 显示序号
        frozenrownumbers:true,   // 行序号是否在固定列中
        enabledsort:true, //是否允许排序 
        height:295,
        pagesize:globals.prop.pagesize,  
        pagesizeoptions :globals.prop.pagelist,
        pagesizeparmname:'rows',
        loadfilter:function(data){
            var json = {
                rows : data.rows,
                total : data.total
            };
            return json;
        },
        onaftershowdata:function(data){/**数据加载完成后的操作*/
           $('look').unbind('click').click(function(){
            **var row = $("#dg").ligergrid().getrow($(this).closest("a").attr('index')) ;**
            console.log(row)
           })
        }
    });
    globals.func.getcelloper = function(handler,value,index,title,color,icon){
        var oper =  
            '' +
            '';
        return oper;
    };
</script>

执行结果如下:

JQueryLigerUI插件基础函数的使用方法实例介绍