Layui中遇到的一些问题
Layui通过template实现对单元格样式的改变
1. Layui通过template实现对单元格样式的改变
ListR为数据集合
点击查看代码
function Escape(ListR) {
var ListData = [];
ListData.push({ type: 'checkbox', fixed: 'left' })
//获取系统参数表数据
MaterialTypeArr = [@Html.Raw(DataManager.GetJsonData("MaterialType"))]
ListR.forEach(function (element) {
if (element.Isvisible != 0) {
var hide;
var templet;
var sort = false; //表头是否排序
if (element.FieldName == "MaterialPrice") {
templet = function (d) {
res = d.Price+="￥"
return res
}
}
if (element.FieldName == "SupplierID") {
hide = true;
sort = true;
}
if (element.FieldName == "SupplierName") {
hide = true;
}
if (element.FieldName == "MaterialType") {
templet = function (d) {
res = MaterialTypeArr.find(item => item.value == d.MaterialType).text
return res
}
}
if (element.FieldName == "AuditStatus") {
templet = function (d) {
if (d.AuditStatus === '正常') {
return '<span style="color:#41ed78;font-weight:600">' + d.AuditStatus + '</span>';
}
else if (d.AuditStatus === '待审核') {
return '<span style="color:#fedc5e;font-weight:600">' + d.AuditStatus + '</span>';
}
else if (d.AuditStatus === '禁用') {
return '<span style="color:#ff4444;font-weight:600">' + d.AuditStatus + '</span>';
}
}
}
ListData.push({
sort: sort; //可以用来设置表头是否排序
field: element.FieldName,
title: element.Displaytext,
width: element.Width,
templet: templet,
hide: hide
})
}
})
return ListData
}
2. Layui通过Jquery, 监听表格行单击事件,单击表格行后勾选复选框
点击查看代码
// 表格单击行勾选复选框
$(document).on("click", ".layui-table-body table.layui-table tbody tr", function (e) {
var index = $(this).attr('data-index');
var tableBox = $(this).parents('.layui-table-box');
//存在固定列
if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
} else {
tableDiv = tableBox.find(".layui-table-body.layui-table-main");
}
var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
if (checkCell.length > 0) {
checkCell.click();
}
});
// 表格点击行出发复选框后，阻止向上冒泡
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
e.stopPropagation();
});
3.Layui给表单赋默认值,通过JQuery给下拉框赋值
给表单赋默认值
点击查看代码
var form = layui.form;
form.val('EditSupplyTruckForm', { //lay-filter属性定义为EditSupplyTruckForm, 下列为表单name属性
"TruckCap": items.TruckCap,
"OrderNo": items.OrderNo,
"OrderDetailNo": items.OrderDetailNo,
"OrderName": items.OrderName,
"ToAddress": items.ToAddress,
"GoodsName": items.GoodsName,
"GoodsPrices": items.GoodsPrices,
"ToAddress": items.ToAddress,
"FromAddress": items.FromAddress,
"Creator": items.Creator,
"Total": items.Total,
"TotalPrices": items.TotalPrices,
"Remark": items.Remark,
"TotalNum": TotalNum + "(吨)",
"TotalPlan": TotalPlan + "(吨)",
});
给下拉框赋值
点击查看代码
$("#TruckCode").val(items.TruckCode); //
changeInfo(items.TruckCode);
form.render("select")
4.解决Layui树形菜单回显问题->回显数据有勾选父节点时回导致所有子节点都勾选上
需要修改Layui的源码, 在Layui文件tree.js里面
源码:
修改后:
也就是说Layui回显数据时默认调用的是节点的click方法, 这里改成了通过改变checked属性来勾选节点, 附修改代码:
点击查看代码
$("input[name=layuiTreeCheck_" + value + "]").prop('checked', true).siblings(".layui-form-checkbox").addClass("layui-form-checked"); //此处修改了源代码
注: 解决方法出自https://www.jianshu.com/p/968cfa8b19b3 ,感谢这位大佬
5.Layui实现全选, 反选, 取消全选, 全部折叠, 全部展开
注: 由于Layui树形菜单没有半选机制, 反选还是有问题, 有待改进
点击查看代码
// 2024.1.8 在tree.render加上oncheck回调函数, 每次点击节点时赋值给树的数据源(permitTree)重新赋值
tree.render({
elem: '#PermitTree',
data: permitTree,
showCheckbox: true, // 是否显示复选框
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
id: 'tree',
isJump: false, // 是否允许点击节点时弹出新窗口跳转
oncheck: function (obj) {
var data = extractAll(tree.getChecked('tree'));
setNode(permitTree,data);
}
});
//对应的事件
util.event('lay-on', {
allSelect: function () {
allSelect(permitTree);
},
allUnSelect: function () {
allUnSelect(permitTree);
},
invertSelect: function () {
var allCheckedItem = extractAll(tree.getChecked('tree'));
invertSelect(permitTree, allCheckedItem);
},
foldAll: function () {
foldAll(permitTree);
},
expandAll: function () {
expandAll(permitTree);
}
});
//递归拿出data里面所有的id并返回一个数组
function extractIds(data) {
return data.flatMap(function (item) {
// 递归处理children
var childIds = item.children ? extractIds(item.children) : [];
// 返回当前节点的id和子节点的id合并
return [item.id, ...childIds];
});
}
function extractAll(data) {
return data.flatMap(function (item) {
// 递归处理children
var childIds = item.children ? extractAll(item.children) : [];
// 返回当前节点的id和子节点的id合并
return [item, ...childIds];
});
}
function setNode(data, data2) {
$.each(data, function (index, item) {
if (data2.length == 0) {
item.checked = true;
}
if (data2.find(a => a.id == item.id) != undefined) {
item.checked = true;
}
else {
item.checked = false;
}
if (item.hasOwnProperty('children') && item.children.length > 0) {
setNode(item.children, data2);
}
});
return data;
}
// 全选
function allSelect(database) {
$.each(database, function (index, item) {
item.checked = true;
if (item.hasOwnProperty('children') && item.children.length > 0) {
allSelect(item.children);
}
})
layui.tree.reload('tree', { data: database });
}
//全不选
function allUnSelect(database) {
$.each(database, function (index, item) {
$.each(database, function (index, item) {
item.checked = false;
if (item.hasOwnProperty('children') && item.children.length > 0) {
allUnSelect(item.children);
}
});
});
layui.tree.reload('tree', { data: database });
}
//反选
function invertSelect(database, allCheckedItem) {
$.each(database, function (index, item) {
if (allCheckedItem.find(a => a.id === item.id)) {
item.checked = false;
}else {
item.checked = item.checked === true ? false : true;
}
if (item.hasOwnProperty('children') && item.children.length > 0) {
invertSelect(item.children, allCheckedItem);
}
});
layui.tree.reload('tree', { data: database });
}
//折叠全部
function foldAll(database) {
$.each(database, function (index, item) {
$.each(database, function (index, item) {
item.spread = false;
if (item.hasOwnProperty('children') && item.children.length > 0) {
foldAll(item.children);
}
});
});
layui.tree.reload('tree', { data: database });
}
//展开全部
function expandAll(database){
$.each(database, function (index, item) {
$.each(database, function (index, item) {
item.spread = true;
if (item.hasOwnProperty('children') && item.children.length > 0) {
expandAll(item.children);
}
});
});
layui.tree.reload('tree', { data: database });
}
6.Jquery(Layui)实现图片放大与缩小
点击查看代码
//添加图片滚轮放大与缩小图片
$(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg", function (e) {
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
var imagep = $(".layui-layer-phimg").parent().parent();
var image = $(".layui-layer-phimg").parent();
var h = image.height();
var w = image.width();
if (delta > 0) {
if (h < (window.innerHeight)) {
h = h * 1.1;
w = w * 1.1;
}
} else if (delta < 0) {
if (h > 100) {
h = h * 0.9;
w = w * 0.9;
}
}
imagep.css("top", (window.innerHeight - h) / 2);
imagep.css("left", (window.innerWidth - w) / 2);
image.height(h);
image.width(w);
imagep.height(h);
imagep.width(w);
});
浙公网安备 33010602011771号