EasyUI中datagrid控件的使用總結

概述

        上一篇文章EasyUI的使用總結主要介紹了首次使用EasyUI 如何操做，介紹了EasyUI控件的總體結構以及實踐中的一些注意事項。

        這篇文章主要介紹一些EasyUI中datagrid控件實際使用過程當中的一些問題及技巧。在項目中最開始就是須要使用datagrid表格才引入EasyUI的。

Datagrid數據表格簡介

        數據表格以表格形式展現數據，並提供了豐富的選擇、排序、分組和編輯數據的功能支持。數據表格的設計用於縮短開發時間，而且使開發人員不須要具有特定的知識。

效果圖：

 

        經過<table>標籤建立數據表格控件。

<table class="easyui-datagrid" id="queryResultList" data-options="striped:true,fit:true,singleSelect:false,pagination:true,pagePosition:'top',pageSize:50,pageList:[15,50,100],rownumbers:true,sortName:'id',url:'<%=actionUrl%>?method=ajaxList/>'"/> <thead><tr> <th data-options="field:'id',checkbox:true" align="center" halign="center"><b>全選</b></th> <th data-options="field:'name', sortable:true" formatter="showName"><b>姓名</b></th> <th data-options="field:'age',sortable:true,align:'center', halign:'center',width:120"><b>年齡</b></th> <th data-options="field:'phone',width:70">電話</th> <th data-options="field:'remark',sortable:true,align:'center', halign:'center',width:100"><b>備 注</b></th> </tr> </thead> </table>

        使用Javascript去建立數據表格控件。

Html代碼

<table class="easyui-datagrid" id="queryResultList" ><table>

Javascript代碼

var columnArr = [  {field:'name',align:'center',halign:'center',title:'姓名'},     {field:'age',sortable:true,halign:'center',title:'年齡'},  {field:'phone',sortable:true,align:'center',title:'電話'},         {field:'remark',sortable:true,align:'center',title:'備註'}];      $("#queryResultList").datagrid({            url:'<%=actionUrl%>?method=ajaxList',            columns:columnArr,            pagination:true,            rownumbers:true,            pageSize:50,            pagePosition:'top',            pageList:[15,50,100],            sortName:'id',            onLoadSuccess: function(_data){                $("#totalNumSpan").text(_data.total);             }        }    );

        說明：兩種方式都能實現相同的功能，生成數據列表，數據都是經過datagrid的url從後臺請求數據，並在頁面展現。

        數據表格控件的屬性體如今data-options對象中。

好比pagination:true,表示分頁，rownumbers:true,表示是否顯示編號。

        數據表格列屬性主要體如今代碼中的columnArr 數組中。

好比title:'姓名'，表示表頭內容，sortable:true，表示是否能夠根據該字段排序

關於更多的屬性各位請本身在實踐時查看API。

Datagrid分頁

    Datagrid數據表格分頁，首先須要設置好分頁的一些參數

pagination:true,pagePosition:'top',pageList:[15、50,100]，pageSize:50

        參數說明：pagination:datagrid是否顯示分頁控件、pagePosition分頁控件顯示的位置，pageList分頁條數可選項，pageSize：默認當前頁面條數。

        分頁原理實現：經過url從後臺加載數據。若是不分頁的狀況下url請求的記錄結果爲結果對象集合轉成json對象。若是須要分頁則須要獲取的就是當前頁集合對象rows及全部記錄總數total兩個參數。

        因此須要在後臺組裝好，經過json方式傳遞到前臺。組裝方式能夠建立一個類，屬性包括rows、和total，而後把該對象轉成json。

具體代碼實現以下：

List list = new ArrayList();    int total = 0;    if(page != null){       total = page.getTotalNumber();//page爲當前頁對象       list.addAll(page.getList());    }       EasyUIDatagridVO datagridVO = new EasyUIDatagridVO(); datagridVO.setTotal(total); datagridVO.setRows(list); out.write(JsonUtil.java2JsonStr(datagridVO));

 

//注意：這裏省略了get、set方法 public class EasyUIDatagridVO implements Serializable{    private int total;    private List rows;    private List footer; }

  這樣就可以實現分頁功能了。

Datagrid操做

    這裏只是列舉部分datagrid控件的方法進行說明：

    在數據表格中若是須要選擇一條記錄

var selections = $("#queryResultList").datagrid("getSelections");

       須要根據查詢條件從新加載列表記錄

$("#queryResultList").datagrid("load",{name: '張三',remark: '查詢'});

        個性化展現(好比添加超連接、字符串格式化等操做)

function showName(value,row,index){    if(value){return "<a style='color:blue;'  href='javascript:view(\"" +row.id+ "\");'>" +value+ "</a>"    }else{return value;} } 在html中須要添加formatter=」showName」

     Datagrid控件還提供了不少事件、方法，也有多行編輯的功能，經過editor控件實現、具體請查看API。