JQuery LigerUI基础函数的使用方法

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 =  
            '<a handler="'+ handler +'" val="'+ value +'" index="'+ index + '"' +
            '   style="text-decoration:none;font-size:16px;color:'+ color +';" href="javascript:;" title="'+ title +'">' +
            '</a>';
        return oper;
    };
</script>

执行结果如下:
这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值