1. 程式人生 > >easyUI小技巧

easyUI小技巧

  • 一、顯示分頁(pagination:true)情況下,隱藏每頁顯示的記錄條數的那個select(即pageList),下圖
方法
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
        });


二、在第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

三、個人常用,mark一下

    $.messager.confirm('提示','確定要刪除所選專案嗎?',function(r){

        if (r){}
    })

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

    }


五、 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')


六、顯示尾行合計(圖片與下文無關)


    方法一,載入後在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));
    }


    方法二、後臺返回一個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影響

七、獲得當前選中的tabs

1、 var index=$('#tabs').tabs('getTabIndex',$('#tabs').tabs('getSelected')); //從0開始 2、tabs的 onSelect改變一個全域性變數的值,用於標記選中的tab 八、easyui combobox禁止輸入 <select id="aa" name="aa" class="easyui-combobox" data-options="editable:false" >  下拉框高度設定:panelHeight:'auto' 九、easyui-validate型別的輸入框,可以直接 觸發onblure()事件, easyui-textbox型別的輸入框,onblure()事件需要換一種觸發方式: $("input",$("#loginName").next("span")).blur(function(){ alert("登入名已存在"); })


js 判斷兩字串是否相等, 不區分大小寫toLowerCase()

十、datagrid view 給列設定預設值
  1. formatter:function(value,row){  
  2.  if(value == '00'){  
  3.    return "是";  
  4.  }else if(value=='01'){  
  5.   return "否";  
  6.  }  
  7. }

轉載於http://blog.csdn.net/t_1007/article/details/52316604 方法
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
        });


二、在第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

三、個人常用,mark一下

    $.messager.confirm('提示','確定要刪除所選專案嗎?',function(r){

        if (r){}
    })

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

    }


五、 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')


六、顯示尾行合計(圖片與下文無關)


    方法一,載入後在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));
    }


    方法二、後臺返回一個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影響

七、獲得當前選中的tabs

1、 var index=$('#tabs').tabs('getTabIndex',$('#tabs').tabs('getSelected')); //從0開始 2、tabs的 onSelect改變一個全域性變數的值,用於標記選中的tab