Layui 多选按钮（可添加，可删除）以及动态添加列和设置某列可编辑
作者：互联网
Layui 多选按钮（可添加，可删除）
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'checkbox'], function () {
var laydate = layui.laydate //日期
, laypage = layui.laypage //分页
, layer = layui.layer //弹层
, table = layui.table //表格
, carousel = layui.carousel //轮播
, upload = layui.upload //上传
, element = layui.element //元素操作
, slider = layui.slider //滑块
, $ = layui.$
, checkbox = layui.checkbox
//这里是监听外面layuitable操作栏的按钮。点击后就出现上图的弹出框
table.on('tool(DetailsTable)', function (obj) {
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
var values = data.values
var typeName = data.Property_name;
var type = 1;
if ("光度" == typeName)
{
type = 2;
}
//向后台发起请求查询出已有的选中的选项如果已有选中
$.ajax({
url: '/MarketingManagement/GetMTReatil',
data: {
List: values, Valuetype:type
},
type: 'get',
async: false,
dataType: "Json",
success: function (res) {
var data = JSON.stringify(res.data);
//这里是返回的数据
//"[{"Id":2,"name":"100","on":true,"type":""},{"Id":3,"name":"125","on":true,"type":""},{"Id":4,"name":"150","on":true,"type":""},{"Id":5,"name":"175","on":true,"type":""},{"Id":6,"name":"200","on":true,"type":""},{"Id":7,"name":"225","on":true,"type":""},{"Id":8,"name":"250","on":true,"type":""},{"Id":9,"name":"275","on":true,"type":""},{"Id":10,"name":"300","on":true,"type":""},{"Id":11,"name":"325","on":true,"type":""},{"Id":12,"name":"350","on":true,"type":""},{"Id":13,"name":"375","on":true,"type":""},{"Id":14,"name":"400","on":false,"type":""},{"Id":15,"name":"425","on":false,"type":""},{"Id":16,"name":"450","on":false,"type":""},{"Id":17,"name":"475","on":false,"type":""},{"Id":18,"name":"500","on":false,"type":""},{"Id":19,"name":"550","on":false,"type":""},{"Id":20,"name":"600","on":false,"type":""},{"Id":21,"name":"650","on":false,"type":""},{"Id":22,"name":"700","on":false,"type":""},{"Id":23,"name":"750","on":false,"type":""},{"Id":24,"name":"800","on":false,"type":""},{"Id":25,"name":"850","on":false,"type":""},{"Id":26,"name":"900","on":false,"type":""},{"Id":27,"name":"950","on":false,"type":""},{"Id":28,"name":"1000","on":false,"type":""},{"Id":182,"name":"其他度数请联系客服","on":true,"type":""},{"Id":183,"name":"405","on":true,"type":""}]"
var btndata = JSON.parse(data);
layer.open({
type: 1,
title: typeName,
area: ['550px', '350px'],
content: '<div id="testbox"></div> ' +
' <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-top:5px;position:relative;width:100px;height:33px;" id="addAttribute"><i class= "layui-icon" ></i></button>' +
' <input type="text" name="password" lay-verify="pass" id="addBox" style="width:100px;height:33px;position:relative; left: 0px;top: -33px;z-index:-333" class="layui-input">'
,//testbox是装这些选项的容器，addBox是添加时的输入框，addAttribute是添加按钮
success: function (layero, index) {
$("#addAttribute").click(function () {
$("#addBox").css("z-index", "333");
$("#addBox").blur(function () {//这里是添加时的输入框失去焦点后传入后台做添加操作
var val = $("#addBox").val();
var data = {
app_food_code: code,
val: val,
type: type
}
if (val != '') {
$.post("/MarketingManagement/AddRemetail", data, function (Reldata) {
var data = JSON.parse(Reldata);
layer.msg(data.msg);
})
$("#addBox").val("");
}
$("#addBox").css("z-index", "-333");
});
})
$("#testbox").children("li").remove();
checkbox({
elem: "#testbox"
, nodes: btndata
, click: function (node) {
console.log("点击", node);
}
, del: function (node) {
console.log("删除", node);
var data = {
app_food_code: code,
val: node.name,
type: type
}
$.post("/MarketingManagement/DelRemetail", data, function (Reldata) {
var data = JSON.parse(Reldata);
})
return true;
}
});
},
end: function () {
var list = JSON.stringify(btndata);
var data = {
app_food_code: code,
List: list,
type: typeName
}
$.post("/MarketingManagement/ChangeRemetail", data, function (Reldata) {
$("#DetailsTable").html('');
LoadData(Type);
var data= JSON.parse(Reldata);
})
}
});
},
error: function (data) {
layer.msg("查询失败！")
}
})
})
})
根据具json动态添加layuitable中的数据
function LoadDetails(data) {
result = data.data;
var strs = new Array();
mycars = new Array();
var Ishide = false;
strs = result[0];
for (var k in strs) {
var name;
var isedit = false;
if (k == "attrId") {
name = "销售属性Id";
} else if (k == "attrName") {
name = "销售属性名称"
} else if (k == "app_food_code") {
name = "商品编码"
}
else if (k == "valueId") {
name = "销售属性值Id"
} else if (k == "value") {
Ishide = false;
name = "销售属性值"
isedit = true;
} else if (k == "Property_name") {
Ishide = false;
name = "商品属性";
} else if (k == "values") {
name = "商品属性值";
isedit = true;
} else if (k == "properties" && Type == 1) {
Ishide = true;
name = "商品属性"
isedit = true;
}
mycars.push({
field: k, title: name, align: 'center', edit: isedit, sort: false, hide: Ishide
});
}
if (Type == 2) {
mycars.push({
field: 'right', title: '操作', align: 'center', sort: false, toolbar: '#barDemo', width: 200
});
}
table.render({
elem: '#DetailsTable',
data: data.data,
id: "DetailsTable",
height: 420,
defaultToolbar: false,
limits: [10, 15, 20, 25, 50, 100],
limit: 50,
page: true,
cols: [mycars],
});
}
//监听可编辑单元格，当单元格失去焦点后就往后台传入新的值进行修改操作
//监听单元格编辑
table.on('edit(DetailsTable)', function (obj) {
var list = obj.value;//修改后的数据
var typeName = obj.data.Property_name;//修改的字段名
var data = obj.data;//修改的当行数据
//获取修改行的ID值
var ID = data.SupplierCategoryDetailsID;
var data = {
app_food_code: code,
List: list,
type: typeName
}
$.post("/MarketingManagement/ChangeRemetail2", data, function (Reldata) {
$("#DetailsTable").html('');
LoadData(Type);
var data = JSON.parse(Reldata);
})
});
标签：false,某列,Layui,data,添加,var,type,Id,name 来源： https://blog.csdn.net/qq_42455262/article/details/119351170