Layui框架标签展示,用复选框动态控制标签增加和删除

CV工程师!!

已于 2023-07-13 10:02:21 修改

阅读量1.6k

点赞数

分类专栏： Layui 文章标签： layui 前端 javascript

于 2023-06-30 15:31:17 首次发布

本文链接：https://blog.csdn.net/m0_65607651/article/details/131476329

版权

Layui 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

比较冷门的功能纪录一下

先看效果图看大家有没有类似的需求可以照搬

1表格展示

2.表单添加

3.复选框控制添加和取消生成标签

讲一下逻辑点击新建标签显示or隐藏标签选择框标签列表是调用后台接口动态生成的上代码!

       <div class="add-project-layer" id="addProjectLayer">
			<form class="layui-form" id="addGoodsForm" lay-filter="form">
	            <div class="edit-content">
//表单标签添加项
                   <div class="layui-form-item " style="width:calc(100% - 55px)">
						<label class="layui-form-label">标签:</label>
						<div class="layui-input-block">
//添加标签按钮
							<button class=" layui-btn layui-btn-primary layui-btn-xs layui-btn-radius"
								id="btnOpenDialog">
								<i class="layui-icon layui-icon-add-circle"></i>
								<span>新建标签</span>
							</button>
//等下选择复选框数据动态生成的区域
							<span id="labelButton">

							</span>
						</div>
					</div>
				</div>
				<div class=" authority-btns">
					<button type="button" class="layui-btn layui-btn-primary" onclick="cancelProjectLayer()">取消</button>
					<button type="button" onclick="saveProjectBtn()" class="layui-btn layui-btn-normal">确认</button>
				</div>
			</form>
//标签选择框先隐藏 点击新建标签显示隐藏切换
			<!-- 标签弹窗 -->
			<div id="dialogContent" style="display: none;">
				<div id="typeShowList">

				</div>
			</div>
		</div>

2.(开局)调用接口获取那个复选框div 里面的标签数据并循环动态生成复选框判断是否有元素回显复选框遍历选中的复选框根据下标拿到数据动态渲染生成html元素

// 获取人员标签
var selectedData = []; //默认空数据
function getShowList() {
    $.ajax({
        type: "get",
        url: getPeopleTagList,
        async: false,
        headers: {
            'dm-authorize-token': $.cookie("token"),
        },
        data: {
            pageSize: 1000000000,
            pageNum: 1
        },
        success: function (res) {
            if (res.code == 200) {
                // console.log('人员标签', res);
                $('#typeShowList').empty();
                // 遍历数据并展示
                for (var i = 0; i < res.data.data.length; i++) {
                    var item = res.data.data[i];
                    var checkboxId = 'checkbox' + i;

                    // 创建多选框和名称展示
                    var checkbox = $('<input type="checkbox" class="typeCheck" id="' + checkboxId + '">');
                    var nameSpan = $('<span>' + item.name + '</span>');

                    // 监听多选框的点击事件
                    checkbox.click(function () {
                        // 在这里可以根据需要处理多选框的状态变化
                        selectedData = [];
                        // 遍历所有选中的复选框
                        $('.typeCheck:checked').each(function () {
                            var checkboxId = $(this).attr('id');
                            var dataIndex = parseInt(checkboxId.replace('checkbox', ''));
//拿到下标后根据数据的下标拿到数据
                            var selectedItem = res.data.data[dataIndex];
                            $('#labelButton').empty();
                            // 将选中的数据项添加到选中数据数组中
                            selectedData.push(selectedItem);
                        });
                        // 输出选中的数据
                        if (selectedData != [] && selectedData) {
                            for (var i = 0; i < selectedData.length; i++) {
//生成html
                                $("#labelButton").append('<button type="button" style="background-color:' + selectedData[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius">' + selectedData[i].name + '</button>');
                            }
                        }
                        // console.log(selectedData);
                    });
                    // 创建数据项容器，并将多选框和名称展示添加进去
                    var itemContainer = $('<div class="optionType"></div>');
                    itemContainer.append(checkbox, nameSpan);
                    // 将数据项容器添加到数据容器中
                    $('#typeShowList').append(itemContainer);
                    // 判断当前项是否为回显数据，并设置选中状态
                    if (selectedData.find(function (selectedItem) {
                        return selectedItem.id === item.id;
                    })) {
                        checkbox.prop('checked', true);
                    }
                }
            } else {
                layer.msg(res.msg);
            }
        },
        error: function (res) {
            layer.msg(res.msg);
        }
    });
}

3.还有就是回显的时候

.........       
success: function (layero, index_0) {
            if (type) {
                $("#name").addClass("no-change");
                $("input[name='gender'][value='" + data.gender + "']").prop("checked", "checked");
                $("input[name='hasSubsidy'][value='" + data.hasSubsidy + "']").prop("checked", "checked");
                // 数据回显  表单中其他元素
                form.val("form", {
                    "name": data.name,
                    "phone": data.phone,
                    "identityCard": data.identityCard,
                    "address": data.address,
                    // 户籍地址
                    "huJiAddress": data.domicileAddress,
                    "community": data.community,
                    // "villageCommittee": data.villageCommittee,
                    "typeName": data.type,
                    "subsidy": data.subsidy,
                })
                // 输出选中的数据 判断数据 赋值给selectedData  然后根据后台数据生成标签回显
                if (data.tags != [] && data.tags) {
                    selectedData = data.tags
                    for (var i = 0; i < data.tags.length; i++) {
                        $("#labelButton").append('<div style="background-color:' + data.tags[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius typeStyle">' + data.tags[i].name + '</div>');
                    }
                }
            } else {
                $('#labelButton').empty();
                $("#name").removeClass("no-change");
                $("input[name='gender'][value='0']").prop("checked", "checked");
                $("input[name='hasSubsidy'][value='true']").prop("checked", "checked");
            }
  },
.......

// 取消
function cancelProjectLayer() {
    $("input[name='gender'][value='0']").prop("checked", "checked");
    $("input[name='hasSubsidy'][value='true']").prop("checked", "checked");
    // 清空表单 （“addGoodsForm”是表单的id）
    $("#addGoodsForm")[0].reset();
    layui.form.render();
    // 清空编辑id
    editProjectId = ''
    // 关闭标签弹窗
    $('#dialogContent').hide()
    // 清空标题数组
    $('#labelButton').empty();
    selectedData = []
    layer.closeAll()
    $("#searchKey").val('');
    $("#searchStatus").val('');
    initCheckTable()
}

解释,正常添加的时候标签框数据是渲染进去的通过监听复选框事件动态生成标签在下面将选择的数组赋值给selectedData 传给后端新建成功刷新表格selectedData清空回显的时候将后端数据循环生成html元素并同样赋值给selectedData 回到上面获取标签框数据的时候运行到有一个判断selectedData 数据并回显复选框方法这样复选框和通过数据动态生成html元素就都实现了

看下回显效果

2023/07/13 更新

发现勾选点击第一个复选框再取消第一个生成的元素并不消失

更新思路: 在多选框的点击事件处理程序中，当取消勾选时，应该将对应的数据从selectedData数组中移除，并更新生成的元素

将上面监听复选框选中的代码更新一下 :

checkbox.click(function () {
    // 在这里可以根据需要处理多选框的状态变化
    selectedData = [];
    // 遍历所有选中的复选框
    $('.typeCheck:checked').each(function () {
        var checkboxId = $(this).attr('id');
        var dataIndex = parseInt(checkboxId.replace('checkbox', ''));
        var selectedItem = res.data.data[dataIndex];
        $('#labelButton').empty();
        // 将选中的数据项添加到选中数据数组中
        selectedData.push(selectedItem);
    });
    // 输出选中的数据
    if (selectedData.length > 0) {
        for (var i = 0; i < selectedData.length; i++) {
            $("#labelButton").append('<button type="button" style="background-color:' + selectedData[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius">' + selectedData[i].name + '</button>');
        }
    }
    // console.log(selectedData);
    if (!$(this).prop('checked')) {
        // 取消勾选时移除对应的数据项
        var checkboxId = $(this).attr('id');
        var dataIndex = parseInt(checkboxId.replace('checkbox', ''));
        var deselectedItem = res.data.data[dataIndex];
        var deselectedIndex = selectedData.findIndex(function (selectedItem) {
            return selectedItem.id === deselectedItem.id;
        });
        if (deselectedIndex !== -1) {
            selectedData.splice(deselectedIndex, 1);
        }
        $('#labelButton').empty();
        for (var i = 0; i < selectedData.length; i++) {
            $("#labelButton").append('<button type="button" style="background-color:' + selectedData[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius">' + selectedData[i].name + '</button>');
        }
    }
});

添加了一个if判断如果不是选中状态就获取到数据并在数组中删除掉它