EasyUI Datagrid數據網格

 

 

1 建立datagrid
1>在table中建立
第一種：

 1 <table class="easyui-datagrid">
 2     <thead>
 3         <tr>
 4             <th data-options="field:'code'">Code</th>
 5             <th data-options="field:'name'">Name</th>
 6             <th data-options="field:'price'">Price</th>
 7         </tr>
 8     </thead>
 9     <tbody>
10         <tr>
11             <td>001</td><td>name1</td><td>2323</td>
12         </tr>
13         <tr>
14             <td>002</td><td>name2</td><td>4612</td>
15         </tr>
16     </tbody>
17 </table>

這種實現效果爲

表格內容爲本身手動輸入的內容。
第二種：

<table class="easyui-datagrid" style="width:400px;height:250px"
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
        <tr>
            <th data-options="field:'code',width:100">Code</th>
            <th data-options="field:'name',width:100">Name</th>
            <th data-options="field:'price',width:100,align:'right'">Price</th>
        </tr>
    </thead>
</table>

這種實現效果爲

 

 其中表格內容爲屬性data -options中url所指向的數據。
2>在javascript中建立表格
首先在前臺頁面中建立一個table，用來放datagrid.

<table id="dg"></table>

接着在js中

1 $('#dg').datagrid({
2     url:'datagrid_data.json',
3     columns:[[
4         {field:'code',title:'Code',width:100},
5         {field:'name',title:'Name',width:100},
6         {field:'price',title:'Price',width:100,align:'right'}
7     ]]
8 });

在第2行url裏面引用的就是數據源。

2 Datagrid 屬性
1>columns  類型爲array  默認值爲undefined
賦值

在以往的工做中，遇到過兩種狀況

a 直接給出,數據爲一個json字符串，換言之就是列標題是死的

。

 

b columns的值須要自動建立的，換言之列標題是隨返回結果而變化的

建立的方法以下

 1 function createColumns(data){
 2     var dataLength = data.length;
 3     var column = [];
 4     var columns = [];
 5     if(dataLength>0){
 6         var title="";
 7         var jsonObj = data[0];
 8         for(var key in jsonObj){
 9             title=key;
10             if(key.indexOf("質控碼_")>-1){
11                 title = "質控碼";
12             }
13             var columnObj = {field:key,title:title,width:100, align:'center'};
14             column.push(columnObj);
15             if(title.indexOf("日數")>-1){
16                 columnObj = {field:" ",title:'操做',width:100,
17                     formatter: function(value,row,index){
18                         return '<a href="javascript:void(0)" onclick="window_detail('+index+');">詳情</a>';
19                     }
20                 }
21                 column.push(columnObj);
22             }
23         }
24     }
25     columns.push(column);
26     return columns;

其中返回的數據格式爲

loadResult({"total":42,"rows":[{"站號":"53596","站名":"順平","雨量":"0","觀測日期":"20171226","站點類型":"國家站"},{"站號":"54627","站名":"鹽山","雨量":"0","觀測日期":"20171226","站點類型":"國家站"},{"站號":"54604","站名":"安國","雨量":"0","觀測日期":"20171226","站點類型":"國家站"},{"站號":"54615","站名":"青縣","雨量":"0","觀測日期":"20171226","站點類型":"國家站"}]})

 

建立過程：

備註：明確column類型爲array
colunms能夠直接定義一個變量

var arrCols=[
                 {field:'staNum',title:'站號',width:50},
                {field:'staName',title:'站名',width:80,},
                {field:'staAdd',title:'站址',width:325},
                {field:'staYaoSu',title:name,width:95}
            ];
    
    if(yaosu.indexOf("SNOW")>-1){
        arrCols=[
                     {field:'staNum',title:'站號',width:50},
                    {field:'staName',title:'站名',width:80,},
                    {field:'staAdd',title:'站址',width:260},
                    {field:'staYaoSu',title:name,width:95},
                    {field:'staMark',title:"備註",width:50}
                    
                    ];
    }

 列屬性
title String 列的標題文本
field String 列的字段名
width number 列寬
rowspan  指示一個單元格佔據多少行。

colspan 指示一個單元格佔據多少列。
align String  對齊方式 left,right,center

sortable boolean true爲容許被排序
order String asc或者desc

fixed boolean 設置爲 true，則當 'fitColumns' 設置爲 true 時放置調整寬度。
hidden  設置爲 true，則隱藏該列。

formatter 類型爲function 
單元格的格式化函數，須要三個參數：
value：字段的值。
rowData：行的記錄數據。
rowIndex：行的索引。

eg:

{field:'title',title:'產品名稱',width:300,
                                formatter: function(value,row){
                                        var url=row.address;
                                        var src = "<a href='#' onclick=\"getDetail('"+url+"')\">"+value+"</a>";
                                        return '<img src="${pageContext.request.contextPath}/misp/observation/qixiangweixing/images/023.png" width="20px" height="19px" style="padding-right: 5px; padding-left: 5px;position:relative;top:3px;">'+src;
                                    }
                        
                            
                                },

sorter function 

用於本地排序的自定義字段的排序函數，須要兩個參數：
a：第一個字段值。
b：第二個字段值。

$('#dg').datagrid({
    remoteSort: false,
    columns: [[
        {field:'date',title:'Date',width:80,sortable:true,align:'center',  
            sorter:function(a,b){  
                a = a.split('/');  
                b = b.split('/');  
                if (a[2] == b[2]){  
                    if (a[0] == b[0]){  
                        return (a[1]>b[1]?1:-1);  
                    } else {  
                        return (a[0]>b[0]?1:-1);  
                    }  
                } else {  
                    return (a[2]>b[2]?1:-1);  
                }  
            }  
        }
    ]]
});

 

3>fitColumns 類型爲布爾 默認值爲false 2>frozenColumns  類型爲array  默認值爲undefined 同上columns，可是把在這個屬性裏面定義的列凍結在左側

做用：設置爲 true，則會自動擴大或縮小列的尺寸以適應網格的寬度而且防止水平滾動。

出現問題：當fitColumns爲true可是失效時（數據列並無自動填充滿datagrid指定的寬度）的解決辦法
首先要明白當fitColumns設置爲true時，會依據配置列width和datagrid的指定寬度來從新計算列的寬度。若是都沒有指定，列寬取列標題寬度或者此列內容寬度最大值。即要想datagrid fitColumns:true生效，至少要爲一列指定寬度。意思就是columns裏面的全部列中必須至少有一列設置width等於多少。

eg:

var columnObj = {field:key,title:title,align:'center'};

在fitColumns設置爲true的前提下顯示效果爲

修正後：

var columnObj = {field:key,title:title,width:100, align:'center'};

注意此處加上了width屬性

顯示效果爲

 

 4>toolbar 類型爲array或者selector
數據網格（datagrid）面板的頭部工具欄。可能的值：

a、數組，每一個工具選項與連接按鈕（linkbutton）同樣。
b、選擇器，只是工具欄。
在div標籤裏面定義工具欄

<div id="dg_tb" >
            <a href="#" id="dt_export" class="easyui-linkbutton" iconCls="icon-save" plain="true">導出</a>
 </div>

$('#dg').datagrid({
	toolbar: '#dg_tb'
});

經過數組定義工具欄：

$('#dg').datagrid({
    toolbar: [{
        iconCls: 'icon-edit',
        handler: function(){alert('edit')}
    },'-',{
        iconCls: 'icon-help',
        handler: function(){alert('help')}
    }]
});

項目中實例：

 

5>method，url，rownumbers，queryParams

 1 $('#dg_fw').datagrid({
 2                             //method    類型string    請求遠程數據的方法（method）類型。    默認值爲post
 3                             method: 'get',
 4                             //url    類型string    從遠程站點請求數據的 URL。
 5                             url: 'jiankongS.jsp',
 6                             fit: true,
 7                             fitColumns: true,
 8                             //rownumbers    類型boolean    設置爲 true，則顯示帶有行號的列。 默認值爲false
 9                             rownumbers:true,
10                             pageNumber: 1,
11                             columns:[[
12                               {field: 'field', title: ' ', width: 100},
13                               {field: 'value', title: ' ', width: 100},
14                                       ]],
15                             //queryParams    類型object 當請求遠程數據時，發送的額外參數。
16                             queryParams: {
17                                 method: 'getJianKongFileDetail',
18                                 type: encodeURI(_e.text())
19                             },
20                             //當請求遠程數據時，發送的額外參數。 返回要顯示的過濾數據。該函數有一個參數 'data' ，表示原始數據。您能夠把原始數據變成標準數據格式。該函數必須返回標準數據對象，含有 'total' 和 'rows' 屬性。
21                             loadFilter: JK.pagerFilter,
22                             onBeforeSelect: function(rowIndex, rowData){
23                                 return false;    
24                             }
25                         });
26                         
27 pagerFilter: function(data){
28                 if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判斷數據是不是數組
29                     data = {
30                         total: data.length,
31                         rows: data
32                     }
33                 }
34                 var dg = $(this);
35                 var opts = dg.datagrid('options');
36                 var pager = dg.datagrid('getPager');
37                 pager.pagination({
38                     onSelectPage:function(pageNum, pageSize){
39                         opts.pageNumber = pageNum;
40                         opts.pageSize = pageSize;
41                         pager.pagination('refresh',{
42                             pageNumber:pageNum,
43                             pageSize:pageSize
44                         });
45                         dg.datagrid('loadData',data);
46                     }
47                 });
48                 if (!data.originalRows){
49                     data.originalRows = (data.rows);
50                 }
51                 var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
52                 var end = start + parseInt(opts.pageSize);
53                 data.rows = (data.originalRows.slice(start, end));
54                 return data;
55             },
56                                     

 

6>其餘屬性以及項目中出現過得事件

 1 $('#dg').datagrid({   
 2         url:null, 
 3         //pagination類型爲boolean,設置爲 true，則在數據網格（datagrid）底部顯示分頁工具欄。
 4         pagination:true, 
 5         //當設置了 pagination 屬性時，初始化頁面尺寸。
 6         pageSize:20, 
 7         //當設置了 pagination 屬性時，初始化頁碼
 8         pageNumber:1,
 9         //striped類型爲boolean,設置爲 true，則把行條紋化。（即奇偶行使用不一樣背景色）
10         striped:true,
11         fitColumns:true,  
12         columns:columns,
13         //singleSelect類型爲boolean,設置爲 true，則只容許選中一行。
14         singleSelect:true,
15         fit: true,
16         //事件 參數param 發送加載數據的請求前觸發，若是返回 false 加載動做就會取消。
17         onBeforeSelect:function(){
18             return false;
19         },
20         
21         //類型爲String,設置爲 true，當從遠程站點加載數據時，顯示的提示消息。
22         loadMsg:'正在全速查詢數據，請稍等...',
23         toolbar: '#dg_tb',
24         //事件  參數data 當數據加載成功時觸發 
25         onLoadSuccess : function () {
26             $(this).datagrid("fixRownumber");
27             
28             $('#dg').datagrid('loaded');   
29         },
30         rownumbers:true ,
31         loadFilter:pagerFilter,
32         
33     }).datagrid('loadData',data);   
34     
35 }

還有沒總結的沒遇到使用過的往後看http://www.jeasyui.net/plugins/183.html