Layui 데이터 시트 동적 cols (필드) 동적 변화
1. 코드
//JS
//JS
layui.use(['table', 'form', 'multiSelect'], function () {
let table = layui.table,
form = layui.form; //
let tableObj = table.render({
elem: '#table-id', // , ID
url: '/.../.../...', //
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
}
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Rails Turbolinks를 페이지 단위로 비활성화하는 방법원래 Turobolinks란? Turbolinks는 링크를 생성하는 요소인 a 요소의 클릭을 후크로 하고, 이동한 페이지를 Ajax에서 가져옵니다. 그 후, 취득 페이지의 데이터가 천이 전의 페이지와 동일한 것이 있...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.