细说nui之datagrid

籍利

2023-12-01

本期我们要讲述一下最常见的布局————表格：
如何引入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	表格所在的路由实例对象

技巧总结

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