Datagrid组件的基本讲解-阿里云开发者社区

开发者社区> 数据库> 正文
登录阅读全文

Datagrid组件的基本讲解

简介: 1.datagrid的基本属性 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/falsetrue某一行展示所有的内容信息。折行?
    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;
                }
            }
        }
    ]]
});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
数据库
使用钉钉扫一扫加入圈子
+ 订阅

分享数据库前沿,解构实战干货,推动数据库技术变革

其他文章