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