细说nui之datagrid

最新推荐文章于 2022-07-22 15:17:56 发布

weixin_34378969

最新推荐文章于 2022-07-22 15:17:56 发布

阅读量1.6k

点赞数

文章标签： json webpack javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015000074

版权

本文详细介绍了datagrid组件的配置参数，包括width、height、paging等，并提供了实例和常用方法。datagrid的核心功能如数据展示、操作及事件绑定被详细阐述，帮助读者掌握如何有效地引入和使用datagrid组件。

摘要由CSDN通过智能技术生成

本期我们要讲述一下最常见的布局————表格：
如何引入datagrid组件（在文章的末尾）
来个demo，调用的代码

let options = {
    container:'.con',//表格的容器
    paging：{//分页的相关配置，其他参数配置参考[诺诺组件之分页（旧版）][1]
        
        url:'accinfo/receipt/query.do' 
    }，
    columns:[{//表头配置，由于columns的配置比较复杂，单独拎出来在下方说明
        title:'收款单编号',
        field:'number',
        nowrap:true,
        className:'f-tali',
        align:'left',
        width:90
    },{
        title:'<i class="u-zhb"></i>客户名称',
        field:'accountName',
        showtitle:true,
        width:80,        
        nowrap:true,
        align:'left',
        className:'f-tali',
        order:{field:'sort', desc:'2',asc:'1'},
        content:
        `
            <%if $value.source?? && $value.source == '1'%>
            <i class="zhongbao u-zhb">众</i>
            <%$value.accountName%>
            <%else%>
            <i class="u-zhb"></i>
            <%$value.accountName%>
            <%/if%>
        `
        ,
        filter:null
    }
    ...
    ],
    fields：['c_receiptid','accountName'],
};
datagrid(options)

名词简称：
self：datagrid的实例对象也就是datagrid(opt)的返回值
$dom:dom的jquery对象

下面展示下接口返回的格式：

{
"result":"success",
"periods":["2017-01","2017-02","2017-03","2017-04","2017-05","2017-06","2017-07","2017-08","2017-09","2017-10","2017-11","2017-12"],"page":1,
"list":[
{"monthstatus":[4,4,4,4,4,4,4,4,4,4,4,4],"accountName":"导账测试","is_transfer":null,"source":0,"status":0,"accID":"07A508889E594CA0A69A7F1C748D570B"},
{"monthstatus":[4,4,4,4,4,4,4,4,1,1,3,1],"accountName":"张慧502","is_transfer":null,"source":0,"status":0,"accID":"F02D7151DEDA4A51803DD7FBFAD5F7E6"},
{"monthstatus":[4,4,4,4,4,4,4,4,4,4,4,4],"accountName":"进项Q","is_transfer":null,"source":0,"status":0,"accID":"0ED1859B007F462CB9B250F87229D6B3"},
{"monthstatus":[1,1,1,1,1,1,1,1,1,1,1,1],"