Development tools and key technologies: Visual Studio and layui, ajax request
Author: Huang Can
Writing time: 2019.7.26
At present, the layui data table only supports the cell edit type, and does not support the cell drop-down type, but we can use the cell template custom template, layui-cols-header parameter list explanation: custom column templates follow the laytpl syntax , This is a very practical function, you can use it to realize logical processing and transform the original data into other formats. This template custom template can use me to implement the cell drop-down box
First of all, after adding the temple parameter and the temple parameter when the method renders the table, the field parameter can be omitted
Then write the template parameter as a function, declare the variables in the function, splice the select tag, the option tag, the data in the option tag uses the ajax request controller, splice the data received by the asynchronous request for loop into the option tag, and then return Spliced html code.
function
selectMaintenanceItem() {
var selMaintenanceItem = '<select>'
$.ajax({
url: '/BreakdownManagement/Appointment/selectMaintenanceItem',
type: 'post',
async: false,
success: function (data) {
for (k in data) {
selMaintenanceItem += '<option value=' + data[k].id + '>' + data[k].text + '</option>';
}
selMaintenanceItem
+= '</select>';
}
});
return selMaintenanceItem
}
In this way, what the template parameter receives is a custom drop-down item, and the data table cell will display the drop-down item
Layui table cell custom column drop-down box, but also add some styles
/* 防止下拉框的下拉列表被隐藏---必须设置--- */
.layui-table-cell {
overflow: visible;
}
.layui-table-box {
overflow: visible;
}
.layui-table-body {
overflow: visible;
}
/* 设置下拉框的高度与表格单元相同 */
td .layui-form-select {
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
Without these styles, the drop-down box will be hidden and the width and height of the drop-down box will be inconsistent with the cell, which will look ugly
