Datagrid组件的基本讲解

发布时间 2023-04-18 17:38:20作者: yinghualeihenmei

https://blog.csdn.net/qq_37192800/article/details/78468034

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