细说nui之datagrid

摘要：表格的刷新保留查询条件的刷新当前分页的数据更新，请使用也可以使用获取当前接口请求的参数。

本期我们要讲述一下最常见的布局————表格：
如何引入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:"客户名称",
        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"%>
            众
            <%$value.accountName%>
            <%else%>
            
            <%$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
}

功能：设置表格的宽

功能：设置表格的高

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

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

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

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

来个demo：

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

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

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

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

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

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

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

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

数据增、删、改、查、展示是表格的核心，接口返回的数据作为self的data，我们要将这些数据按照一定的规则展示在页面，并且存储在dom上（有利于后续的删除以及修改操作），还能在表格的第一列增加复选框的功能，完成表格数据的批量操作，在完成操作时候及时更新表格上的数据。那么在数据的流转中，我们和后台约定好，后续处理数据时，字段传的参数名字要和接口请求回来的字段名称一样，可以省去繁琐的字段转换过程。

将表格的相似功作为基础设置，最常见的是表格的删除，当我们以数据为核心的时候，我们关注的是删除的链接，以及这行的数据，将链接绑定在dom元素上，或者配置在表格中，在函数中获取配置，这样删除就可以作为项目表格公用的方法。

表格的刷新:self.paging.query();保留查询条件的刷新:self.paging.query(true);当前分页的数据更新，请使用self.update(),也可以使用self.paging.query("reload"),获取当前接口请求的参数 self.paging.condition。

如果你安装的是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";