jquery easyui 研究（一）Datagrid初始化設置

Datagrid初始化設置

$('#post').datagrid({
    url :'remote.php',  
    fitColumns : true,
    striped : true,
    rownumbers : true,
    border : false,
    pagination : true,
    pageSize : 20,
    pageList : [10, 20, 30, 40, 50],
    pageNumber : 1,
    sortName : 'create_time',
    sortOrder : 'DESC',
    columns : [[
        {
            field : 'id',
            title : 'Id',
            width : 100,
            checkbox : true
        },
        {
            field : 'name',title : 'Name',
            width : 100
        },
        {
            field : 'create_time',
            title : '創建時間',
            width : 100,
            sortable : true
        }
    ]],
    toolbar:$('#post-tool')
});

　　

說明：
url:后台數據調用地址。如果是現有json格式數據，則用data代替url
data:如果沒有url屬性，則用該屬性表示需要加載的數據。數據格式為：
data: [
{f1:'value11', f2:'value12'},
{f1:'value21', f2:'value22'}
]

fitColumns: 使表格自適應頁面寬度
striped:條紋顯示
rownumbers:顯示行號
pagenation:是否分頁
pageSize:每頁顯示記錄數
pageList:每頁記錄數選擇范圍設置
pageNumber:當前頁號
sortName:排序列名稱 設置后將向后台傳送名為sort的post/get參數
sortOrder:排序列升降序 設置后將向后台傳送名為order的post/get參數
columns:datagrid的每一列的具體設置。詳細設置見下文。
checkOnSelect:如set true,如有checkbox列，則點擊該行后該行和其checkbox一起為選中狀態。
selectOnCheck: 如set true,如有checkbox列，則點擊該行的checkbox會連同該行一起被選中。
toolbar:工具欄。可放入增刪改查等easyui格式的linkbutton.可先在頁面設置div,然后在toolbar指定該div的id, 也可以按以下方法設置：

$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('edit')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('help')}
	}]
});//iconCls:easyui的圖標class,handler:點擊按鈕時觸發的function

　　

其他屬性：
loadMsg:加載數據時的提示信息
emptyMsg:加載數據為空時的信息
singleSelect:只能單選記錄
ctrlSelect:可ctrl+點擊多選記錄
pagePosition:分頁欄位置，可選 'top', 'bottom', 'both'
queryParams:向后台傳遞的附加參數
rowStyler: function根據數據加工該行樣式。可以是內聯樣式，也可以是class. 實例如下：

$('#dg').datagrid({
    rowStyler: function(index,row){
        if (row.listprice>80){
            return 'background-color:#6293BB;color:#fff;'; 
        }
    }
});

//參數：index:該行索引
　　　　row:該行數據集

　　

Columns屬性：

 columns : [[
        {
            field : 'id',
            title : 'Id',
            width : 100,
            checkbox : true
        },
        {
            field : 'name',title : 'Name',
            width : 100
        },
        {
            field : 'create_time',
            title : '創建時間',
            width : 100,
            sortable : true
        }
    ]]

　　

field:從后台取得的數據記錄中的相應字段名
title:顯示在表頭的每列標題
checkbox:是否以checkbox表現此列
sortable:是否可排序
order:升降序
resizable:是否可改變大小
fixed:當表格fitColumns屬性為true,即自適應寬度時，設置fixed為true禁止自動改變此列寬度
hidden:是否隱藏此列
formatter:用function加工數據內容格式 見以下實例：

$('#dg').datagrid({
    columns:[[
        {field:'userId',title:'User', width:80,
            formatter: function(value,row,index){
                if (row.user){
                    return row.user.name;
                } else {
                    return value;
                }
            }
        }
    ]]
});
//參數： value:該單元格數據
　　　　　row:該行數據
　　　　　index:該行索引

　　

styler:用function 根據數據返回單元格相應的style,可以是內聯樣式，也可以是class 見如下實例：

$('#dg').datagrid({
    columns:[[
        {field:'listprice',title:'List Price', width:80, align:'right',
            styler: function(value,row,index){
                if (value < 20){
                    return 'background-color:#ffee00;color:red;';
                    
                }
            }
        }
    ]]
});