EasyUI-1.Datagrid 數據網格

什麼是datagrid？
       datagrid顯示數據表格格式和選擇提供了豐富的支持,排序,組織和編輯數據。 datagrid被設計來減少開發時間和從開發人員不需要特定的知識。 它是不重要的和功能豐富的。 細胞融合,多列標題,凍結的列和頁腳只是幾個特性。

官方API文檔：http://www.jeasyui.com/documentation/datagrid.php

如何創建DataGrid
     我們一般是使用javascript來創建
1.在創建前需要在網頁上有一個div

<div id="dataInfo">

</div>

2.寫javascript代碼

$('#<span style="font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;">dataInfo</span><span style="font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;">').datagrid({</span>
    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'}
    ]]
});

注意：這裏使用ID選擇器選中DIV,然後使用" .datagrid "方法來創建datagrid。如果你要創建一個窗口則只需要用".window"方法就可以了。

常用DataGrid屬性
url：ajax異步提交數據的地址
        如：url:'/house/pageSearchHouseAction'

columns：設置datagrid的列屬性(包括 標題、寬度等)
先看一段JSON數據

{"rows":[{"id":1004,"streetEntity":{"districtEntity":{"name":"海淀"},"name":"中關村大街"},"title":"中關村兩居"}],"total":3}

這段JSON數據是服務器響應到客戶端的，其中rows和total兩個鍵的名字是固定的，因爲DataGrid會自動獲取這兩個鍵的值。rows獲取的是要顯示的數據，total獲取本次總共查詢出多少條數據來。此外也要注意rows的數據格式“[ {},{} ]”，rows是一個集合，在這個集合中包含多個對象。注意：DataGrid會根據你返回的total的值和你每頁顯示數量來自動的算出總頁數。
下面看如何創建columns

columns:[[{field:'id',title:'編號',width:100,align:"center"},
                    {field:'title',title:'房屋信息',width:300},
                    {field:'streetEntity',title:'區域',width:100, formatter:function (value,row,index) {
                        return value.districtEntity.name + "   " + value.name;
                    }}
                ]]

創建columns使用的是json對象創建，注意格式“[[ {},{} ]]”。其中field屬性的值，就是你JSON對象中的rows屬性中存放的鍵的值，例如上一段json數據中存在鍵名爲id的鍵，那麼想獲取到數據就需要指定field屬性爲id。
但是有些時候我們獲取出來的值是一個對象，例如streetEntity中存放的就是一個對象，這個時候我們就需要使用列屬性formatter方法來獲取到，streetEntity中某個對象的屬性。
爲此屬性指定一個方法，在這個方法中有三個參數
value:字段值。 
rowData:行記錄數據。 
rowIndex:行索引。
因爲我們使用field取出了streetEntity中的值，這個時候value中存放的值就相當於

{"districtEntity":{"name":"海淀"},"name":"中關村大街"}

此時我們就可以使用"value." 來獲取到想要的值了，獲取到最會返回就可以了。

fit：用於設置DataGrid是否佔滿整個父容器。取值true | false
fitColumns：設置爲 true，則會自動擴大或縮小列的尺寸以適應網格的寬度並且防止水平滾動。
pagination：設置爲 true，則在數據網格（datagrid）底部顯示分頁工具欄。
注意：在選擇頁數，或調整每頁顯示數量的時候，都會向後臺提交請求參數，rows爲每頁顯示數量，page爲當前頁數。如果忘記了這兩個參數可以通過谷歌瀏覽器的開發者工具箱來查看請求參數。


pageSize：當設置了 pagination 屬性時，初始化頁面尺寸。說白了就是默認每頁顯示幾條
                             如：pageSize:1 表示每頁顯示一條
pageList：當設置了 pagination 屬性時，初始化頁面尺寸的選擇列表。如果不設置此屬性則默認的選項爲10 20 30 40 50
                             如：pageList:[1,5,10]  表示 我們的選項有   1   5   10
loadMsg：當從遠程站點加載數據時，顯示的提示消息。
                             如：loadMsg:"正在加載消息..."
rowStyler：我一般用來設置某一行的樣式，例如各行變色

rowStyler:function (index, row) {
                    if(index % 2 != 0){
                        return 'background-color:#CCFF99;';
                    }
                }

本筆記代碼http://download.csdn.net/detail/gxy1317/9620962