Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法
數(shù)據(jù)表格中的數(shù)據(jù)是通過直接賦值的方式。這里實際上思想是反過來的，將拿數(shù)據(jù)表格中的所有數(shù)據(jù)，轉(zhuǎn)換為Layui數(shù)據(jù)表格拿原始數(shù)據(jù)去渲染數(shù)據(jù)表格。
1、創(chuàng)建一個作用域合適的JS對象數(shù)組用來保存數(shù)據(jù)表格中的原始數(shù)據(jù)。
2、將上一步創(chuàng)建的JS對象數(shù)組也就是原始數(shù)據(jù)賦給table.render()的data參數(shù)。
3、獲取表格中的所有數(shù)據(jù)其實直接獲取第一步中創(chuàng)建的JS對象數(shù)組即可，參照下面的代碼，獲取表格中的所有數(shù)據(jù)就是獲取tableContent中的數(shù)據(jù)。
// 存放數(shù)據(jù)表格中的數(shù)據(jù)的對象數(shù)組tableContent
var tableContent = new Array();
table.render({
elem : '#viewTable',
height : 325,
even: true,
text: {
none: '您沒有選中任何字段！'
},
// 拿對象數(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 : '序號',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ù)是通過異步請求的方式
直接通過table.render()的done參數(shù)即可獲得，該參數(shù)的值是一個數(shù)據(jù)渲染完的回調(diào)，無論是直接賦值還是異步請求數(shù)據(jù)，在渲染完之后都會觸發(fā)該回調(diào)。注意：使用直接賦值方式給Laytable原始數(shù)據(jù)時，該方法獲取到的是數(shù)據(jù)表格中當(dāng)前頁的數(shù)據(jù)，并不是表格中的所有數(shù)據(jù)，想獲取表格中所有數(shù)據(jù)必須按照上面“數(shù)據(jù)表格中的數(shù)據(jù)是通過直接賦值的方式”的方法
table.render({ //其它參數(shù)在此省略
done: function(res, curr, count){
//如果是異步請求數(shù)據(jù)方式，res即為你接口返回的信息。
//如果是直接賦值的方式，res即為：{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長度
console.log(res);
//得到當(dāng)前頁碼
console.log(curr);
//得到數(shù)據(jù)總量
console.log(count);
}
});
以上這篇Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript設(shè)計模式之工廠模式簡單實例教程
這篇文章主要介紹了JavaScript設(shè)計模式之工廠模式,結(jié)合完整實例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
JavaScript列表框listbox全選和反選的實現(xiàn)方法
這篇文章主要介紹了JavaScript列表框listbox全選和反選的實現(xiàn)方法,涉及javascript操作列表框listbox的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS實現(xiàn)頁面加載完成之后自動刷新一次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
延遲加載的函數(shù)，第一次調(diào)用后，會覆蓋原來的老函數(shù)，以后再次調(diào)用的是新函數(shù)，不會再進(jìn)行條件的判斷，提升效率2012-10-10
這篇文章主要介紹了Bootstrap被封裝的彈層 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
今天發(fā)表一個自己剛學(xué)js的練習(xí)，javascript五圖輪播切換---實用版，這個實力有個缺陷就是沒有過渡效果，這個本人也還在研究中，也希望高手可以指點一下2012-08-08
往往在網(wǎng)頁上有JS加密代碼的解碼方法，但是由于代碼中存在轉(zhuǎn)義字符，無法正確的進(jìn)行解碼。2010-07-07
ECharts 是一個使用JavaScript實現(xiàn)的開源可視化庫，涵蓋各行業(yè)圖表，滿足各種需求。這篇文章介紹了ECharts的基礎(chǔ)知識，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript模擬實現(xiàn)Excel條件格式中的色階效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以嘗試一下2023-05-05
這篇文章主要介紹了使用controller接收js傳過來的參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02