开发者社区> 山月风成> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

相关文章
WPF 4 DataGrid 控件(进阶篇一)
原文:WPF 4 DataGrid 控件(进阶篇一)      上一篇《WPF 4 DataGrid 控件(自定义样式篇)》中,我们掌握了DataGrid 列表头、行表头、行、单元格相关的自定义样式方法,本篇我们继续对自定义样式进行一些高级设置。
823 0
Easyui datagrid 隐藏多选框 checkbox
在加载 表格的时候添加事件:onLoadSuccess 在事件中写入下面句,用空代替原有HTML 达到取消效果。 $(".datagrid-header-check").html("");   代码实例: onLoadSuccess:function(){ $(".
1291 0
Flex 4 advancedDataGrid的使用
参考 http://www.cnblogs.com/xuehai/archive/2009/09/26/1574531.html                                                                                     ...
1349 0
flex中datagrid列滚动锁定
原文http://www.cnblogs.com/80hou/articles/1856640.html   熟悉excel的人应该都知道表格中可以将比如标题行/列锁定,使其不滚动,从而便于浏览。flex的datagrid控件也可以实现这样的效果。
886 0
滚动DataGrid
有时候你的页面只有一个固定的地方,但是需要显示非常多的数据,亦或是也不定,但是只有固定的一个地方给你显示它了。这时你就可以用下面这招,自动出滚动条,而且适用许多控件。很简单将你的控件放在一个DIV中将overflow属性设置成auto<div style=“height:400px;width:20...
582 0
+关注
山月风成
君子不以辞尽人,故天下有道,则行有枝叶;天下无道,则辞有枝叶。热爱技术岗位,因为这里单纯友好,自由和分享。
37
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载