對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解
更新時(shí)間：2019年10月25日 17:14:42 作者：數(shù)學(xué)太陡
今天小編就為大家分享一篇對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如搜索查詢(xún)時(shí)，常會(huì)遇到按日期時(shí)間段查詢(xún)，并顯示查詢(xún)的每個(gè)日期的數(shù)據(jù)，后臺(tái)拼裝數(shù)據(jù)此處不討論。
把表格渲染封裝在函數(shù)里面，cols_arr是傳入的字段數(shù)組
function tableRender(cols_arr){
table.render({
elem: '#demo'
, url: 請(qǐng)求地址 //數(shù)據(jù)接口
, method: 'post'
, page: true //開(kāi)啟分頁(yè)
, cols: cols_arr
, id: 'demo'
, limit: 10
, limits: [10, 20, 50, 100, 200, 500]
, done: function (res) {}
});
}
監(jiān)聽(tīng)搜索提交
// 搜索
form.on('submit(demo1)', function (obj) {
var start_date = obj.field.start_date;
var end_date = obj.field.end_date;
if (start_date != '' && end_date != ''){
var all_date = getAll(start_date, end_date);
if ( all_date.length>7){
layer.msg('查詢(xún)天數(shù)不得超過(guò)7天', {icon: 2, anim: 6});
return false;
}
window.cols_arr[0] = [];
window.cols_arr[0][0] = {field:'group_id', title: '群號(hào)', align: 'center'};
all_date.forEach(function(value,i){
window.cols_arr[0][i+1]=({field: value, title: value, align: 'center'})
})
}
tableRender(window.cols_arr);
table.reload('demo', {
page: {
curr: 1
},
where: {
all_date: all_date
}
});
return false;
});
如果只是重載，cols屬性不會(huì)改變，解決思路：重載前執(zhí)行一次封裝了渲染的函數(shù)，也就是tableRender();用全局變量或傳參的形式都行
以上這篇對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了小程序轉(zhuǎn)發(fā)探索示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
JavaScript中使用Object.create()創(chuàng)建對(duì)象介紹
這篇文章主要介紹了JavaScript中使用Object.create()創(chuàng)建對(duì)象介紹,本文先是講解了語(yǔ)法,然后給出了創(chuàng)建實(shí)例,需要的朋友可以參考下2014-12-12
JavaScript數(shù)組_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript數(shù)組的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了bootstrap手風(fēng)琴的制作方法，制作聲明式觸發(fā)手風(fēng)琴，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了JS異步宏隊(duì)列微隊(duì)列原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
一直以來(lái)，對(duì)于JavaScript 中的this的理解都是很模糊的， 特別是對(duì)函數(shù)進(jìn)行apply 與 call 調(diào)用。這兩個(gè)操作如果沒(méi)有很好的理解 JavaScript中this的概念，會(huì)越搞越迷糊。2009-07-07
這篇文章主要為大家詳細(xì)介紹了基于JavaScript canvas繪制貝塞爾曲線的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript實(shí)現(xiàn)班級(jí)抽簽小程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)班級(jí)抽簽小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
在日常開(kāi)發(fā)中，后端主要提供數(shù)據(jù)以及處理業(yè)務(wù)邏輯，前端主要提供頁(yè)面布局以及數(shù)據(jù)展示。本文主要介紹如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單獲取IP歸屬地的小程序，感興趣的可以了解一下2022-09-09
JavaScript之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08