本期咱們要講述一下最多見的佈局————表格:
如何引入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 }
功能:設置表格的寬jquery
功能:設置表格的高webpack
類型:Object
功能:配置接口請求
大部分的參數參照http://zjaisino.github.io/plu...
下面是參數的補充說明git
字段名稱 | 參數類型 | 參數值 | 參數意義 |
---|---|---|---|
getData | Function | data | data表示的就是接口的返回值,好比接口的結果是{data:{list:[],aCount:0}} ,這時候須要將數據處理下返回給表格組件:getData:function(data){ return data.data;} |
類型: Boolean
功能:默認爲true。當設置爲true的時候paging設置有效,表格採用接口請求加載;設置爲false的時候,表格不會調用接口請求,這個時候要配置datagrid的data參數github
類型:Array
功能:表格的數據,爲空的時候請傳值爲空數組;web
類型:String
功能:paging傳入值裏做爲datagrid數據的鍵值,默認是listnpm
字段名稱 | 參數類型 | 參數值 | 參數意義 |
---|---|---|---|
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
當你不少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
在初始化完成組件以後將返回實例對象,這個實例對象對於後續的條件搜索、修改一行數據能夠提供一些便捷的方法
方法名稱 | 參數 | 參數意義 | 功能 |
---|---|---|---|
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 | 表格所在的路由實例對象 |
若是你安裝的是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';