细说nui之datagrid

头像
qiaoqisha
    阅读 7 分钟

    本期我们要讲述一下最常见的布局————表格：
    如何引入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],"accountName":"成品油测试","is_transfer":null,"source":0,"status":0,"accID":"35CD8ED07E5943489B2D2ABA12C74385"},
{"monthstatus":[4,4,4,4,4,4,4,4,4,4,4,4],"accountName":"50999","is_transfer":null,"source":0,"status":0,"accID":"306D4C0974ED47DBBDD66A9FF2B12A37"}
],
"aCount":21
}

    datagrid配置参数

    width

    功能：设置表格的宽

    height

    功能：设置表格的高

    paging

    类型：Object
    功能：配置接口请求
    大部分的参数参照http://zjaisino.github.io/plu...
    下面是参数的补充说明

    字段名称 参数类型 参数值 参数意义
    getData Function data data表示的就是接口的返回值，比如接口的结果是{data:{list:[],aCount:0}} ,这时候需要将数据处理下返回给表格组件：getData:function(data){ return data.data;}

    isPaging

    类型： Boolean
    功能：默认为true。当设置为true的时候paging设置有效，表格采用接口请求加载；设置为false的时候，表格不会调用接口请求，这个时候要配置datagrid的data参数

    data

    类型：Array
    功能：表格的数据，为空的时候请传值为空数组；

    dataField

    类型：String
    功能：paging传入值里作为datagrid数据的键值，默认是list

    columns

    字段名称 参数类型 参数值 参数意义
    title String 收款单编号 表头列的展示内容
    field String accountName 在这个td里面展示的是键为accountName的值
    children Array columns对象 表头里面的合并列需要
    fixed String left
    right    		 列固定在左边或者固定在右边
    className String 给td增加样式
    content string number
    checkbox
    input
    `<%if $value.source?? && $value.source == '1'%>众<%$value.accountName%><%else%><i class="u-zhb"></i><%$value.accountName%><%/if%> `    		 number ：序列号
    checkbox 是复选框
    input输入框
    字符串其中的$value表示的就是当前这一行数据，并且template设置为true，filter为null
    checked Boolean true 复选框勾选
    filter Function
    		例子 filter:function(val,name,data){ return '<a title="'+val+'" data-c_receiptid = '+data.c_receiptid+' href="javascript:void(0)"> '+data.number+'</a>'; }
    null    		 作为函数的时候返回的就是td的展示内容
    作为null的时候采用content配置字符串的方式
    当content为checkbox的时候filter返回可以是个对象，用来表示复选框的disabled的属性
    nowrap Boolean true
    false    		 true 溢出隐藏并且末尾以省略号的格式展示
    默认是false
    showtitle Function
    Boolean    		 Function
    true
    false    		 title为函数的的返回值 默认是true，鼠标放上去展示title
    设置为false，则不展示title，
    order {} {field:'sort', desc:'2',asc:'1'} 当排序的时候额外传给后台一个键值对，其中field传的是键 当点击向下的箭头传的是desc对应的参数，点击向上的箭头传的是asc对应的参数
    width 和table默认的参数格式一样 "10%"
    colspan 和table默认的参数格式一样
    rowspan 和table默认的参数格式一样

    来个demo：

    option

    当你很多column写的要吐血的时候这个参数就派上的用场，里面的参数作为column的基础配置
    比如:option:{
    align:'left'
    },表示所有的column的align都是left

    fields

    类型：Array
    类型：String
    类型：Boolean （设置为true）
    功能：在tr上添加数据，用jquery的data()进行取值；当配置为true时，表示当前一行的数据都绑定到tr上；

    onRowRender

    onRowRender(self, val, i){//在渲染每一行的时候执行
/*
*self 是datagrid的实例对象
*val为这行数据
*i标识这是第几行（从0开始）
*返回来的对象是绑定在tr标签上的属性以及属性值键值对，className是追加在tr class属性上；
*/
 return {
     className:'',
     flag:1
 }
},

    onRender

    onRender(self){//表格渲染完成之后执行的函数
    },

    onCheckboxChange

    onCheckboxChange(self, e, elem){//勾选复选框之后的回调函数
    }

    footer

    功能：表格的脚注
    类型：String

    events

    datagrid内嵌了events模块，可以在表格上绑定事件，我们以删除按钮的功能为例

    events:{//原理是在table表格上做代理事件，对于不能代理的事件（input propertychange）不能在此使用，希望后期能完善这个
    'click .j-delete':'del'
},
del:function(e,elem){//e事件，elem 触发事件的dom的jquery对象
    layer({//使用前请先引用layer、request、router、hintmsg模块
        content:'确定删除？',
        button:[{
            id:'confirm',
            callback:function (self) {
                request.get(elem.data().url, elem.data(), {//  在dom元素上绑定删除的url，以及接口要传的参数                  
                    '200':(res)=> {
                        hintmsg('删除成功！',1);
                        let activeRouter = router.active(true);//获取当前路由
                        activeRouter.grid.paging.query(true);//刷新列表
                        self.hide();//关闭弹出层
                    },
                    other:(res)=>{
                        hintmsg(res.message,0);
                        let activeRouter = router.active(true);
                        activeRouter.grid.paging.query(true);
                        self.hide();
                    }
                })
            }
        },{
            text:'取 消'
        }]
    })
}

    还有很多参数就不一一描述，下面列出全部的参数以及默认值，至于没有描述到的参数功能可以参考源码

    全部的参数以及默认值

    container:null,
data:null,
columns:null,
isFixed:true,
isLine:false,
isActive:true,
isBorder:true,
option:null,
isPaging:true,
isDir:false,
keyCode:[9, 13],
url:null,
paging:null,
fields:null,
dataField:'list',
width:'100%',
height:'100%',
footer:'',
placeholder:'',

onFocusin:null,
onFocusout:null,
onFocus:null,
onBlur:null,

filterQuery:null,
stringify:null,
rowRender:null,
colRender:null,

onActive:null,
onCancelActive:null,
onRowRender:null,
onRowClick:null,
onRowDblclick:null,
onCheckboxChange:null,
onRender:null,
onRenderBefore:null,
onScroll:null

    在初始化完成组件之后将返回实例对象，这个实例对象对于后续的条件搜索、修改一行数据可以提供一些便捷的方法

    实例对象的方法

    方法名称 参数 参数意义 功能
    update index, data 行的索引，需要更新的数据采用键值对的形式{修改的列的filed名称：值} 更新单行
    checkedData field 数据的字段名称 返回勾选行tr上field的list，如果参数为空表示的是获取tr全部数据
    scrollTo x, y 横向坐标，纵向坐标 回滚表格到指定位置
    resize 重新按照参数调整表格布局

    常用的实例对象属性

    对象名称 类型 功能
    data Object 接口返回来的数据
    element $dom 表格的jquery对象
    list Array 表格的数据列表
    paging Object 分页的实例对象
    router Object 表格所在的路由实例对象

    技巧总结

    1. 数据增、删、改、查、展示是表格的核心，接口返回的数据作为self的data，我们要将这些数据按照一定的规则展示在页面，并且存储在dom上（有利于后续的删除以及修改操作），还能在表格的第一列增加复选框的功能，完成表格数据的批量操作，在完成操作时候及时更新表格上的数据。那么在数据的流转中，我们和后台约定好，后续处理数据时，字段传的参数名字要和接口请求回来的字段名称一样，可以省去繁琐的字段转换过程。
    2. 将表格的相似功作为基础设置，最常见的是表格的删除，当我们以数据为核心的时候，我们关注的是删除的链接，以及这行的数据，将链接绑定在dom元素上，或者配置在表格中，在函数中获取配置，这样删除就可以作为项目表格公用的方法。
    3. 表格的刷新:self.paging.query();保留查询条件的刷新:self.paging.query(true);当前分页的数据更新，请使用self.update(),也可以使用self.paging.query('reload'),获取当前接口请求的参数 self.paging.condition。

    如何引入datagrid组件

    如果你安装的是npm包nuonuo-libs:
    首先配置在webpack.config.js中增加配置

    {
      test:/\.js$/,
      use:[{
        loader:'nui-loader',
        options:{
          paths:{
            pub:'src/public'
          },
          alias:{
            nuijs:'nuonuo-libs/script/nui/index',
            util:'{pub}/util',
            store:'{pub}/store',
            data:'{pub}/data',
            frame:'{pub}/frame',
            layer:'{pub}/layer',
            router:'{pub}/component/platformRouter',
            JSON:'nuonuo-libs/script/polyfill/json'
          }
        }
      }]
    }

    在模块中引入

    import {datagrid} from 'nuijs'

    如果你使用的是libs公用文件
    那么使用

    import datagrid from '/libs/script/nui/components/datagrid';
    javascript
    qiaoqisha
    0 声望0 粉丝

    引用和评论

    推荐阅读
    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 23阅读 10.2k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.2k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.3k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新