Datagrid组件的基本讲解

1.datagrid的基本属性

• datagrid—- 一种接收后台数据用于，以标准表单的形式展示的组件。
• EasyUI 接收两种参数：对象参数；数组参数。

    url：数据请求后台的地址。
    title:表单的标题。
    iconCls:图标。

    pagination:分页工具条。
    pageSize：15。
    pageList：[15,30,45,60],默认是以10为标准显示的。

    fit：true--datagird的宽高自适应。
    fitColumns：底层滚动条。左右拉升（是否要求自适应），默认false，列少的时候给true，列多的时候给false。
    nowarp：true/false 给true某一行展示所有的内容信息。折行？
    border--边框。

    idField--标识。后台返回的数据的标识（ifField的标识和后台传过来的字段之一相同），需求：跨页删除、记住所有选中的，类似于数据库中的主键。
    columns--列，easyUi支持多级表头。 一列一个对象，需要多少个就加多少个对象。
        title：列的名称
        field：后台返回的前台json对应的key，必须一一对应，不然datagrid找不到
        width：100 列的宽度。最好大于50
    datagrid翻页细节，
    默认回传两个参数：page，rows，第page页，一个多少rows条，显示的总记录数和json的total有关

2.前台级别的排序

    1.前台级别的排序，指定以某一规则排序；
        sortName：以什么字段排序；
        sortOrder:倒序正序，给以某字段加上属性 sortable：true（标识在点击时候，来回切换排序方式）

3.formatter属性

用于单元格的初始化
    带3个参数：
    value：字段值。
    rowData：行记录数据。
    rowIndex: 行索引。 
    代码示例：
$('#dg').datagrid({
    columns:[[
        {field:'userId',title:'User', width:80,
            formatter: function(value,row,index){
                if (row.user){
                    return row.user.name;
                } else {
                    return value;
                }
            }
        }
    ]]
});