摘要：表格的刷新保留查詢條件的刷新當前分頁的數據更新，請使用也可以使用獲取當前接口請求的參數。

本期我們要講述一下最常見的布局————表格：
如何引入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";