本期我們要報告一下最常見的規劃————表格：
怎樣引入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…
下面是參數的補充申明

isPaging

範例： Boolean
功用：默以為true。當設置為true的時刻paging設置有用，表格採納接口要求加載；設置為false的時刻，表格不會挪用接口要求，這個時刻要設置datagrid的data參數

data

範例：Array
功用：表格的數據，為空的時刻請傳值為空數組；

dataField

範例：String
功用：paging傳入值里作為datagrid數據的鍵值，默許是list

columns

來個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

在初始化完成組件以後將返回實例對象，這個實例對象關於後續的前提搜刮、修正一行數據能夠供應一些便利的要領

實例對象的要領

經常使用的實例對象屬性

技能總結

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';