细说nui之datagrid

时间  2019-12-14
标签 细说 nui datagrid 繁體版
原文   原文链接

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

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对象html

下面展现下接口返回的格式：java

{
"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

功能：设置表格的宽jquery

height

功能：设置表格的高webpack

paging

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

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

isPaging

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

data

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

dataField

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

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：json

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';
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程