Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法
數(shù)據(jù)表格中的數(shù)據(jù)是通過直接賦值的方式。這里實(shí)際上思想是反過來的,將拿數(shù)據(jù)表格中的所有數(shù)據(jù),轉(zhuǎn)換為L(zhǎng)ayui數(shù)據(jù)表格拿原始數(shù)據(jù)去渲染數(shù)據(jù)表格。
1、創(chuàng)建一個(gè)作用域合適的JS對(duì)象數(shù)組用來保存數(shù)據(jù)表格中的原始數(shù)據(jù)。
2、將上一步創(chuàng)建的JS對(duì)象數(shù)組也就是原始數(shù)據(jù)賦給table.render()的data參數(shù)。
3、獲取表格中的所有數(shù)據(jù)其實(shí)直接獲取第一步中創(chuàng)建的JS對(duì)象數(shù)組即可,參照下面的代碼,獲取表格中的所有數(shù)據(jù)就是獲取tableContent中的數(shù)據(jù)。
// 存放數(shù)據(jù)表格中的數(shù)據(jù)的對(duì)象數(shù)組tableContent
var tableContent = new Array();
table.render({
elem : '#viewTable',
height : 325,
even: true,
text: {
none: '您沒有選中任何字段!'
},
// 拿對(duì)象數(shù)組tableContent中的數(shù)據(jù)作為原始數(shù)據(jù)渲染數(shù)據(jù)表格
data : tableContent,
page : {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
},
limit : 5,
limits : [5, 10, 15, 20, 25],
cellMinWidth: 80,
cols:[[
{type:'checkbox',fiexd : 'left'},
{title : '序號(hào)',type:'numbers'},
{field : 'column',title : '列',align:'center'},
{field : 'alias',title : '別名',align:'center',edit : 'text'},
{title : '操作',fiexd : 'right',align:'center', toolbar: '#viewBar'}
]],
done : function(res, curr, count){
// do something...
}
});
數(shù)據(jù)表格中的數(shù)據(jù)是通過異步請(qǐng)求的方式
直接通過table.render()的done參數(shù)即可獲得,該參數(shù)的值是一個(gè)數(shù)據(jù)渲染完的回調(diào),無論是直接賦值還是異步請(qǐng)求數(shù)據(jù),在渲染完之后都會(huì)觸發(fā)該回調(diào)。注意:使用直接賦值方式給Laytable原始數(shù)據(jù)時(shí),該方法獲取到的是數(shù)據(jù)表格中當(dāng)前頁(yè)的數(shù)據(jù),并不是表格中的所有數(shù)據(jù),想獲取表格中所有數(shù)據(jù)必須按照上面“數(shù)據(jù)表格中的數(shù)據(jù)是通過直接賦值的方式”的方法
table.render({ //其它參數(shù)在此省略
done: function(res, curr, count){
//如果是異步請(qǐng)求數(shù)據(jù)方式,res即為你接口返回的信息。
//如果是直接賦值的方式,res即為:{data: [], count: 99} data為當(dāng)前頁(yè)數(shù)據(jù)、count為數(shù)據(jù)總長(zhǎng)度
console.log(res);
//得到當(dāng)前頁(yè)碼
console.log(curr);
//得到數(shù)據(jù)總量
console.log(count);
}
});
以上這篇Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript設(shè)計(jì)模式之工廠模式簡(jiǎn)單實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式,結(jié)合完整實(shí)例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
JavaScript列表框listbox全選和反選的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript列表框listbox全選和反選的實(shí)現(xiàn)方法,涉及javascript操作列表框listbox的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JS實(shí)現(xiàn)頁(yè)面加載完成之后自動(dòng)刷新一次問題
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面加載完成之后自動(dòng)刷新一次問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02
JS模擬實(shí)現(xiàn)Excel條件格式中的色階效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript模擬實(shí)現(xiàn)Excel條件格式中的色階效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以嘗試一下2023-05-05

