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;';
                    
                }
            }
        }
    ]]
});