效果图：
使用之前在html需要引用一下
https://maplemei.gitee.io/xm-select/#/component/install 下载插件
<script type="text/javascript" src="${request.contextPath}/statics/plugins/select/xm-select.js">
//定义空数据
vm.tbData = [{
tempId: new Date().valueOf(), //生成的唯一id 根据时间
llst: [], //不同行被选择的下拉数据
suoyou: [] //这里可以是多选下拉的所有动态数据。因为下面我写死了 张三李四王五 所以这个数组没用到
}],
//数据表格实例化
tableRes = $("#tableRes"), tbWidth = tableRes.width();
//渲染表格
tableIns = layui.table.render({
elem: '#dataTable',
data: vm.tbData,
id: layTableId,
width: tbWidth,
loading: true,
even: false, //不开启隔行背景
text: {none: '无数据，去添加一行~'},
cols: [[
{title: '序号', type: 'numbers'},
{
field: 'batchNo', title: '<p class="mandatory">多选名单</p>', width: 240,
templet: function(d){
return '<a lay-event="batchNo"></a><div id="XM-' + d.tempId + '" lay-filter="batchNo"></>'
}
},
{
field: 'tempId',
width: 100,
// fixed: 'right',
align: 'center',
title: '操作',
templet: function (d) {
return '<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del" lay-id="' +
d.tempId + '"><i class="layui-icon layui-icon-delete"></i>移除</a>';
}
}
]],
done: function(res){
//修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
var cells = document.querySelectorAll('select[lay-id="demo"] .layui-table-cell');
for(var i = 0 ; i < cells.length ; i++ ){
cells[i].style.overflow = 'unset';
cells[i].style.height = 'auto';
}
//渲染多选
res.data.forEach(item => {
var xm = xmSelect.render({
el: '#XM-' + item.tempId,
autoRow: true,
// on为监听事件
on: function(data){
var arr = data.arr;
console.log(JSON.stringify(arr, null, 2))
console.log("可行"+item.tempId)
//获取表格数据
var rows = layui.table.cache[layTableId];
for (var i = 0, row; i < rows.length; i++) {
row = rows[i];
//for循环更新下拉已选中数据
if (row.tempId == item.tempId) {
console.log(row)
$.extend(row,{llst: arr});
console.log(JSON.stringify(arr, null, 2))
console.log(JSON.stringify(row.llst, null, 2))
break;
//成功把不同行选中的存到了数据中
}
}
},
data: [
{name: '张三', value: '张三'},
{name: '李四', value: '李四',},
{name: '王五', value: '王五',},
]
})
item.__xm = xm;
//添加一行或删除一行后 回显之前已经选择的数据
var rows = layui.table.cache[layTableId];
for (var i = 0, row; i < rows.length; i++) {
row = rows[i];
if(row.tempId == item.tempId){
xm.setValue(row.llst)
}
}
});
}
});
},
error: function (res) {
//console.log(res);
}添加一行代码 html
//注册按钮事件
$('.layui-btn[data-type]').on('click', function () {
var type = $(this).data('type');
activeByType(type);
});
//激活事件的通用调用方法
var activeByType = function (type, arg) {
active[type] ? (arguments.length === 2 ? active[type].call(this, arg) : active[type].call(this)) : '';
}
var active = {
addRow: function () { //添加一行
var rows = layui.table.cache[layTableId]; //table.cahce 中保存着当前页面中的表格数据
var newRow = {
tempId: new Date().valueOf(),
colorNo: "",
batchNo: "",
batchNo: "",
batchNo: "",
goodsId: "",
optionCount: ""
};
rows.push(newRow);
tableIns.reload({
data: rows
});
console.log("现在表格数据",layui.table.cache[layTableId]);
},
updateRow: function (obj) { //更新行记录对象
var rows = layui.table.cache[layTableId];
for (var i = 0, row; i < rows.length; i++) {
row = rows[i];
if (row.tempId == obj.tempId) {
$.extend(rows[i], obj);
break;
}
}
tableIns.reload({
data: rows
});
},
updateData: function (obj) { //更新行记录对象
var rows = layui.table.cache[layTableId];
for (var i = 0, row; i < rows.length; i++) {
row = rows[i];
if (row.tempId == obj.tempId) {
$.extend(rows[i], obj);
break;
}
}
},
removeEmptyRow: function () { //移除表格数据中的空对象记录
var rows = layui.table.cache[layTableId];
for (var i = 0, row; i < rows.length; i++) {
row = rows[i];
if (!row || !row.tempId) {
rows.splice(i, 1); //删除一项
}
continue;
}
tableIns.reload({
data: rows
});
},
/* 保存*/
save: function () { //保存
layui.form.on('submit(savOrder)', function (data) {
layui.form.render();
var index = layer.load(1, {
shade: [0.5, '#000'] //0.1透明度的背景
});
var formData = data.field;
var rows = layui.table.cache[layTableId];
console.log(rows);
for (var i = 0, row; i < rows.length; i++) {
row = rows[i];
}
if (formData) {
rows.forEach(function (item) {
delete item.__xm;
for (var i in item) {
if (i == "LAY_TABLE_INDEX" || i == "tempId" ) {
delete item[i]
}
}
});
formData.detailList = rows;
}
var seen = [];
var replacer = function(key, value) {
if (value != null && typeof value == "object") {
if (seen.indexOf(value) >= 0) {
return;
}
seen.push(value);
}
return value;
};
$.ajax({
url: baseURL + 'repository/erpRepositoryDeployment/saveOrUpdate',
type: 'POST',
contentType: "application/json;charset=utf-8",
// console.log(JSON.stringify(row.llst, null, 2))
data: JSON.stringify(formData, replacer),
success: function (res) {
if (res.code == 0) {
layer.msg('已经完成添加', {icon: 1});
setTimeout(function () {
layer.closeAll();
layui.table.reload('gridid');
layer.close(index);
}, 1000);
} else {
layer.close(index);
layer.msg(res.msg, {icon: 2});
}
},
error: function (res) {
layer.close(index);
console.log(res);
}
});
});
}
}
//删除一行
//监听工具条
layui.table.on('tool(dataTable)', function (obj) {
var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
switch (event) {
case "del":
layer.confirm('是否执行此操作？', function (index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
activeByType('removeEmptyRow');
});
break;
}
});
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
