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>

執行結果如下:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章