EasyUI Datagrid數據網格

 

 

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

<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'code'">Code</th>
            <th data-options="field:'name'">Name</th>
            <th data-options="field:'price'">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td><td>name1</td><td>2323</td>
        </tr>
        <tr>
            <td>002</td><td>name2</td><td>4612</td>
        </tr>
    </tbody>
</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中

$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
        {field:'code',title:'Code',width:100},
        {field:'name',title:'Name',width:100},
        {field:'price',title:'Price',width:100,align:'right'}
    ]]
});

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

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

在以往的工作中，遇到過兩種情況

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

。

 

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

創建的方法如下

function createColumns(data){
    var dataLength = data.length;
    var column = [];
    var columns = [];
    if(dataLength>0){
        var title="";
        var jsonObj = data[0];
        for(var key in jsonObj){
            title=key;
            if(key.indexOf("質控碼_")>-1){
                title = "質控碼";
            }
            var columnObj = {field:key,title:title,width:100, align:'center'};
            column.push(columnObj);
            if(title.indexOf("日數")>-1){
                columnObj = {field:" ",title:'操作',width:100,
                    formatter: function(value,row,index){
                        return '<a href="javascript:void(0)" onclick="window_detail('+index+');">詳情</a>';
                    }
                }
                column.push(columnObj);
            }
        }
    }
    columns.push(column);
    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

$('#dg_fw').datagrid({
                            //method    類型string    請求遠程數據的方法（method）類型。    默認值為post
                            method: 'get',
                            //url    類型string    從遠程站點請求數據的 URL。
                            url: 'jiankongS.jsp',
                            fit: true,
                            fitColumns: true,
                            //rownumbers    類型boolean    設置為 true，則顯示帶有行號的列。 默認值為false
                            rownumbers:true,
                            pageNumber: 1,
                            columns:[[
                              {field: 'field', title: ' ', width: 100},
                              {field: 'value', title: ' ', width: 100},
                                      ]],
                            //queryParams    類型object 當請求遠程數據時，發送的額外參數。
                            queryParams: {
                                method: 'getJianKongFileDetail',
                                type: encodeURI(_e.text())
                            },
                            //當請求遠程數據時，發送的額外參數。 返回要顯示的過濾數據。該函數有一個參數 'data' ，表示原始數據。您可以把原始數據變成標准數據格式。該函數必須返回標准數據對象，含有 'total' 和 'rows' 屬性。
                            loadFilter: JK.pagerFilter,
                            onBeforeSelect: function(rowIndex, rowData){
                                return false;    
                            }
                        });
                        
pagerFilter: function(data){
                if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判斷數據是否是數組
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                var dg = $(this);
                var opts = dg.datagrid('options');
                var pager = dg.datagrid('getPager');
                pager.pagination({
                    onSelectPage:function(pageNum, pageSize){
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        pager.pagination('refresh',{
                            pageNumber:pageNum,
                            pageSize:pageSize
                        });
                        dg.datagrid('loadData',data);
                    }
                });
                if (!data.originalRows){
                    data.originalRows = (data.rows);
                }
                var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = (data.originalRows.slice(start, end));
                return data;
            },
                                    

 

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

$('#dg').datagrid({   
        url:null, 
        //pagination類型為boolean,設置為 true，則在數據網格（datagrid）底部顯示分頁工具欄。
        pagination:true, 
        //當設置了 pagination 屬性時，初始化頁面尺寸。
        pageSize:20, 
        //當設置了 pagination 屬性時，初始化頁碼
        pageNumber:1,
        //striped類型為boolean,設置為 true，則把行條紋化。（即奇偶行使用不同背景色）
        striped:true,
        fitColumns:true,  
        columns:columns,
        //singleSelect類型為boolean,設置為 true，則只允許選中一行。
        singleSelect:true,
        fit: true,
        //事件 參數param 發送加載數據的請求前觸發，如果返回 false 加載動作就會取消。
        onBeforeSelect:function(){
            return false;
        },
        
        //類型為String,設置為 true，當從遠程站點加載數據時，顯示的提示消息。
        loadMsg:'正在全速查詢數據，請稍等...',
        toolbar: '#dg_tb',
        //事件  參數data 當數據加載成功時觸發 
        onLoadSuccess : function () {
            $(this).datagrid("fixRownumber");
            
            $('#dg').datagrid('loaded');   
        },
        rownumbers:true ,
        loadFilter:pagerFilter,
        
    }).datagrid('loadData',data);   
    
}

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