???????????????????????????????????????????????????????????? Layui數據表格動態cols（字段）動態變化

1、代碼

<!-- HTML -->
<!-- 表格載體 -->
<div class="layui-form layui-card-header"><div class="layui-inline"><label class="layui-form-label">分組類型</label><div class="layui-input-inline"><input type="hidden" name="group_type"/><select multiple="multiple" lay-filter="group_type"><option value="">請選擇分組類型</option><option value="hobby" selected>愛好</option><option value="age">年齡</option><option value="date">日期</option></select></div></div><div class="layui-inline"><button class="layui-btn" lay-submit lay-filter="LAY-table-search"><i class="layui-icon layui-icon-search"></i></button></div>
</div>
<table id="table-id" lay-filter="LAY-table"></table>//JS
<script>//JSlayui.use(['table', 'form', 'multiSelect'], function () {let table = layui.table,form = layui.form;         //表格let tableObj = table.render({elem: '#table-id',   //掛載對象，表IDurl: '/.../.../...',    //數據來源路徑cols: [[{field: 'hobby', title: '愛好'},{field: 'come_in', title: '收入'},{field: 'come_out', title: '支出'}]],text: { //自定義文本，如空數據時的異常提示等。none: '暫無數據！'},where:{'target_date':'2020-02'},//查詢條件page: false, //關閉分頁parseData: function(res) {  //res 即為原始返回的數據return {code: res.code,msg: res.msg,count: res.data.count,data: res.data.data}},done(res, curr, count){}});//監聽下拉框的值let groupArray = ['hobby'];  //默認按愛好分組form.on('select(group_type)', function(data) {setTimeout(() => {	//選中獲取值異常問題let value = data.value;let bool = $(data.othis).find('.layui-this').children('div').hasClass('layui-form-checked');//判斷是否勾選let index = $.inArray(value, groupArray);if (bool) { //如果選中；if(index == -1){  //數組沒值，groupArray.push(value);   //把值壓入數組}} else {    //如果取消選中if(index != -1){  //數組中存在groupArray.splice($.inArray(value, groupArray), 1);   //移除數組指定元素}}$('input[name="group_type"]').val(JSON.stringify(groupArray));}, 100);})//監聽搜索按鈕form.on('submit(LAY-table-search)', function(data){let field = data.field;let tableCols = assembleTableCol(groupArray);	//重新定義標題那行//執行重載table.reload('LAY-table', { //通用渲染方式where: field,   //搜索的參數page: {curr: 1}, //重新從第 1 頁開始cols: tableCols});//或tableObj.reload({   //方法級渲染where: field,   //搜索的參數page: {curr: 1}, //重新從第 1 頁開始cols: tableCols});});//重新拼接數組標題行function assembleTableCol(groupArray){let thisCols = [];  //定義標題空間let defaultField = [    //定義通用列{field: 'come_in', title: '收入'},{field: 'come_out', title: '支出'}];let groupField = {  //hobby,age,date 對應下拉框的值'hobby': {field: 'hobby', title: '愛好'},'age': {field: 'age', title: '年齡'},'date': {field: 'date', align:'center',title: '日期'},};let length = groupArray.length;for (let i=0; i<length; i++){ //追加動態標題let addObj = groupField[groupArray[i]];thisCols.push( addObj );}let defaultLength = defaultField.length;for(let j=0;j<defaultLength;j++){   //追加默認標題thisCols.push( defaultField[j]);}return [thisCols];  //注意結果為：array[0]=thisCols}});
</script>

?

總結

以上是生活随笔為你收集整理的Layui 数据表格动态cols（字段）动态变化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。