細說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:'<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';