easyUI小技巧-純乾貨

1、顯示分頁（pagination:true）狀況下，隱藏每頁顯示的記錄條數的那個select（即pageList），下圖箭頭

方法1：
onBeforeLoad:function(param){
    $('#'+$(this)[0].id).datagrid('getPager').pagination({
        showPageList:false
    });
},
onLoadSuccess:function(data){
    $('#'+$(this)[0].id).datagrid('getPager').pagination({
        showPageList:false
    });
}

方法2：
onBeforeLoad:function(param){
    $('.pagination-page-list').hide();
},
onLoadSuccess:function(data){
    $('.pagination-page-list').hide();
}

方法3：
css樣式：select.pagination-page-list{display:none}

方法4：

$("#dgOrderList").datagrid({
    url:'。。。',
    queryParams:{。。。},
});

寫在datagrid獲取數據url以後，

        $("#dgOrderList").datagrid('getPager').pagination({
            showPageList: false
        });


2、在第n頁，檢索，利用queryParams方法，datagrid組裝參數時，會自動添加page=n，而不會切換到第1頁

方法1：

    $("#dgOrderList").datagrid({
        pageNumber:1,
        url:url,
        queryParams:{key:name,value:value}
    });
方法2：用load方法

    $dgOrderList.datagrid('load',param);//會自動添加&page=1&rows=。。

param爲空對象時：$('#dgWorkers').datagrid('load',{});//會去除page、rows之外的參數，且置page=1

3、我的經常使用，mark一下

    $.messager.confirm('提示','肯定要刪除所選項目嗎？',function(r){

        if (r){}
    })

4、linkbutton的disabled並不阻止事件，須要在事件中進行判斷
    if($(this).linkbutton('options').disabled){
            return false;

    }

 

5、 dialog閃現問題。在一個頁面使用一個dialog，初始隱藏（closed="true"），可是在頁面刷新的一瞬間，這個dialog會顯示出來，效果很是難看
方法一：
<div style="display:none">
    <div class="easyui-dialog"></div>
</div>
dialog用一個隱藏div包含起來，一個div包好幾個diglog也能夠，顯示的時候直接dialog('open')就能夠

方法二：

設定dialog的style  display:none，而後在頁面加載完後再讓它display:block或show()，或者$('dialog').show().dialog('open')

 

6、顯示尾行合計（圖片與下文無關）

    方法一，加載後在js中計算，但對formatter的列無效

//表格定義時顯示footer
        showFooter:true,

//定義加載成功事件，列名：數據

        onLoadSuccess:function(data){

$(this).datagrid('reloadFooter', [{
                heJi:'合計',
                tNo:compute(data.rows, "tNo"),
                        workhour:compute(data.rows, "workhour"),
                pay:compute(data.rows, "pay"),
            }]);
         },


    //定義合計函數
    function compute(rows,colName) {
        var total = 0;
        for (var i = 0; i < rows.length; i++) {
            total += parseFloat(isNaN(rows[i][colName])||$.trim(rows[i][colName])==''?0:rows[i][colName]);
        }
        return parseFloat(total.toFixed(2));
    }


    方法2、後臺返回一個footer行(PHP爲例)

    showFooter:true,

    //footer行對應列要顯示的內容，如合計後的內容，能夠加一個標識如footer，用於標明改行是footer內容，在formatter時可能會用到
    $footer=array(array('heJi'=>'合計','tNo'=>$tNo,'workhour'=>$workhour,'pay'=>$pay,'footer'=>1));

//返回數據中以footer爲鍵值
    echo json_encode(array('code'=>1,'msg'=>'查詢成功','total'=>count($rows),'rows'=>$rows,'footer'=>$footer));
    
    注：footer行的顯示一樣受formatter影響

7、得到當前選中的tabs

 

一、 var index=$('#tabs').tabs('getTabIndex',$('#tabs').tabs('getSelected')); //從0開始

二、tabs的onSelect改變一個全局變量的值，用於標記選中的tab