Jquery 复选框点击生成标签 源代码

html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>服务资源管理</title><link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" /><link rel="stylesheet" type="text/css" href="../css/participation/serviceManage.css" /><script type="text/javascript" src="../lib/lib-jquery/jquery.min.js"></script><script type="text/javascript" src="../lib/lib-jquery/jquery.cookie.js"></script><script type="text/javascript" src="../lib/layer/layer.js"></script><script type="text/javascript" src="../lib/layui/layui.js"></script><script type="text/javascript" src="../lib/lib-jquery/jquery.cookie.js"></script><script type="text/javascript" src="../lib/moment/moment.js"></script><script type="text/javascript" src="../lib/layui/xm-select.js"></script>
</head><body><!-- 服务资源管理123123 --><div class="warning-container"><div id="indexWarningPage"><div class="search-content"><div class="search-content-top"><label for="searchKey"><input type="text" placeholder="请输入姓名" autocomplete="off" id="searchKey" class="search-input"lay-affix="clear" /></label><label for="searchStatus"><select id="searchStatus" class="search-input"><option value="">请选择资源类型</option></select></label><div style="cursor: pointer; color: #498fe5;display: inline-block;"><i class="layui-icon layui-icon-refresh" id="example-anim-element"></i><span id="example-anim-usage">刷新表格</span></div><span style="margin-left: 100px;">共计 <span id="peopleNumber"style="color: #498fe5;font-size: 26px;">99+</span><spanstyle="font-size: 22px;margin-left: 5px;">人</span></span><div class="layui-form-item" id="searchTopBtns"><!-- <button type="button" class="layui-btn btnn" onclick="resetSearch()">重置</button> --><buttonstyle="margin: 0px 10px;border-radius: 5px;height: 35px;line-height: 30px;font-size: 14px;padding: 0px 15px; background: #48AB6C;"type="button" class="layui-btn layui-btn-sm" onclick="searchBtn()">搜索</button></div></div></div><!-- 表格 --><div class="progress-table" id="progress-bg"><div class="layui-table-box"><div class="layui-table-body layui-table-main"><table class="layui-table" lay-skin="line" lay-filter="checkTable" id="checkTable"><!-- 表格内容 --></table></div></div><div class="layui-inline" id="searchs"><button type="button" class="layui-btn btnnn" onclick="downloadProjectData()"style="border-radius: 4px;width: 100px;height: 30px;line-height: 30px;margin-left: 10px; background: #48AB6C;">下载数据</button></div></div></div><!-- 新增页面 --><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 " id="nameWrite1" style="width:calc(100% - 55px)"><label class="layui-form-label"><span class="star">*</span>姓名:</label><div class="layui-input-block"><input type="text" id="name" name="name" autocomplete="off" placeholder="请输入姓名"class="layui-input nameIput" /></div></div><div class="layui-form-item"><label class="layui-form-label"><span class="star">*</span>性别</label><div style="margin-left: 130px;"><div class="layui-form" style="display: flex;"><div class="radio-item"><input type="radio" checked name="gender" value="0" title="男"class="necessary-radio" /></div><div class="radio-item"><input type="radio" name="gender" value="1" title="女" class="necessary-radio" /></div></div></div></div><!-- <div class="layui-form-item "><label class="layui-form-label">出生年月:<span class="star">*</span>:</label><div class="layui-input-block"><input type="text" autocomplete="off" id="birthday" name="birthday" class="layui-input" /></div></div> --><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label">出生年月:</label><div class="layui-input-block"><input type="text" id="birthday" style="width: 230px;" name="birthday" autocomplete="off"placeholder="请输入出生年月" class="layui-input nameIput" /><i class="layui-icon layui-icon-date"style="font-size: 20px;position: absolute;top: 0px;right: 180px;"></i></div></div><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label"><span class="star">*</span>手机号码:</label><div class="layui-input-block"><input type="text" id="phone" name="phone" autocomplete="off" placeholder="请输入手机号码"class="layui-input nameIput" /></div></div><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label"><span class="star">*</span>身份证号:</label><div class="layui-input-block"><input type="text" id="identityCard" name="identityCard" autocomplete="off"placeholder="请输入身份证号" class="layui-input nameIput" /></div></div><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label">家庭住址:</label><div class="layui-input-block"><input type="text" id="address" name="address" autocomplete="off"placeholder="xx路xx弄xx小区xx号xx楼xxx室" class="layui-input nameIput" /></div></div><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label" for="searchStatus"><span class="star">*</span>政治面貌:</label><div class="layui-input-block"><select id="politics" name="politics" class="search-input" style="width: 250px;"lay-filter="politics"><option value="">请选择政治面貌</option></select></div></div><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label">工作单位:</label><div class="layui-input-block"><input type="text" id="unit" name="unit" autocomplete="off" placeholder="请输入工作单位"class="layui-input nameIput" /></div></div><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label" for="searchStatus"><span class="star">*</span>所属居(村)委:</label><div class="layui-input-block"><select id="community" name="community" class="search-input" lay-filter="community"><option value="">请选择居(村)委</option></select></div></div><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label" for="searchStatus">资源类型:</label><div class="layui-input-block"><select id="typeName" name="typeName" class="search-input"><option value="">请选择资源类型</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">是否有补助:</label><div style="margin-left: 130px;"><div class="layui-form" style="display: flex;"><div class="radio-item"><input type="radio" checked name="hasSubsidy" value="true" title="是"class="necessary-radio" /></div><div class="radio-item"><input type="radio" name="hasSubsidy" value="false" title="否"class="necessary-radio" /></div></div></div></div><div class="layui-form-item " style="width:calc(100% - 55px)"><label class="layui-form-label">补助金额:</label><div class="layui-input-block"><input type="number" id="subsidy" name="subsidy" autocomplete="off" placeholder="请输入补助金额"class="layui-input nameIput" /></div></div><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"style="background: #48AB6C;">确认</button></div></form><!-- 标签弹窗 --><div id="dialogContent" style="display: none;"><div id="typeShowList"></div></div></div></div>
</body>
<script type="text/html" id="zizeng">{{d.LAY_TABLE_INDEX+1}}</script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/participation/serviceManage.js"></script></html>

 css

/* 最外部大盒子 */
.warning-container {padding: 0 10px;background-color: #fff;width: 96%;height: 95vh;margin-left: 1.5%;border-radius: 5px 5px;margin-top: 1.5%;overflow: auto;
}/* 动画旋转 */
.layui-anim-rotate {animation: example-anim-rotate 1s linear infinite;
}/* 隐藏单元格内的下拉框 */
.layui-table-grid-down {display: none !important;
}
@keyframes example-anim-rotate {0% {transform: rotate(0);}100% {transform: rotate(360deg);}
}#addProjectLayer .layui-form-select {width: 230px !important;
}/* 搜索 */
.search-content {width: 100%;height: 50px;padding-top: 5px;margin-bottom: 20px;
}.search-content-top {/* float: left; */margin: 15px 0px 0px 0px;
}/* 弹框 */
.edit-project-layer {display: none;
}.search-input {width: 240px;display: inline-block;height: 35px;border-radius: 5px;border: 1px solid #ccc;padding-left: 10px;margin-right: 10px;
}/* 新增编辑弹窗页面 */
.add-project-layer {padding-top: 10px;width: 100%;height: 97%;display: none;
}.edit-project-layer .layui-input {width: 200px;
}/* 驳回页面 */
.back-project-layer {width: 100%;height: 97%;display: none;
}/* 新增编辑表单样式 */
.container {padding: 0 10px;background-color: #fff;width: 96%;height: 95vh;margin-left: 1.5%;border-radius: 5px 5px;margin-top: 1.5%;overflow: auto;
}.layui-table-page {border-bottom: 1px solid #e6e5e5;
}/* 分页旁边按钮*/
#progress-bg {position: relative;
}#searchs {position: absolute;bottom: 7px;right: 15px;
}/* 新增标签列表样式 */
.optionType {height: 34px !important;line-height: 34px;cursor: pointer;
}.typeCheck {margin: 0px 10px;width: 16px;height: 16px;position: relative;top: 3.5px;
}.optionType:hover {background-color: #eee;
}/* 表格换行 */
.layui-table-cell {height: auto;white-space: normal;word-wrap: break-word;text-align: center !important;
}#dialogContent .layui-layer-content {position: relative;
}.typeStyle {padding: 1px !important;height: 25px !important;width: 70px !important;
}#dialogContent {position: absolute;width: 200px;background-color: #ffffff;top: 425px;left: 155px;border: 1px solid #e2e2e2;height: 202px;overflow: hidden;overflow-y: scroll;box-shadow: 0 0 25px 10px #E7E7E7;
}#addProjectLayer .layui-layer-content {position: relative;
}/* .layui-form-select-layer {background-color: #f0f0f0 !important;height: 50px !important;border-radius: 10px !important;border: 1px solid #ccc !important;
} *//* 自定义选项样式 */
.layui-form-select-layer .custom-option {background-color: #f0f0f0 !important;color: #333333 !important;font-size: 14px !important;border: 1px solid #cccccc !important;
}/* 鼠标悬停时的样式 */
.layui-form-select-layer .custom-option:hover {background-color: #cccccc !important;color: #ffffff !important;
}.progress-materials,
.progress-materials-file {width: 100%;height: calc(100% - 50px);overflow: auto;
}/* ----------------------------------- */
::-webkit-scrollbar {width: 5px;height: 10px;
}::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #CBB486;
}::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 10px;background: #EDEDED;
}.overview-main {padding: 0 10px;background-color: #fff;width: 96%;height: 95vh;margin-left: 1.5%;border-radius: 5px 5px;margin-top: 1.5%;overflow: auto;
}.overview-top {color: #7F838A;font-weight: bold;
}.overview-box {width: 100%;height: 97%;padding-top: 10px;
}.overview-box2 {width: 80%;height: 97%;margin-left: 10%;
}.box-top {width: 100%;height: 48%;display: flex;justify-content: space-between;align-items: center;
}.box-bottom {width: 100%;height: 48%;display: flex;justify-content: space-between;align-items: center;margin-top: 2%;
}.layui-table,
.layui-table-view {margin: 0 !important;
}.card {width: 100%;height: 100%;
}.top-title {width: 80%;height: 5%;border-bottom: 2px #CBB486 solid;margin-left: 10%;text-align: center;line-height: 40px;
}.layui-input {background: #FFFFFF;border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 4px;height: 35px;padding-left: 4px;font-size: 14px;
}.layui-form-label {font-weight: bold;margin-left: 30px;text-align: left !important;width: 90px !important;
}#searchTopBtns {display: inline;float: right;
}.operation-item {height: 30px;line-height: 40px;cursor: pointer;
}.authority-btns {width: 100%;background-color: white;position: sticky;bottom: 0px;padding: 15px 0px;text-align: center;
}.edit-content>.title {font-size: 16px;height: 40px;line-height: 40px;border-bottom: 1px solid #DCDFE6;margin-bottom: 15px;
}.edit-content .layui-form-item {width: 45%;display: inline-block;margin-left: 25px;vertical-align: bottom;
}.edit-content .layui-form-item>label {color: #6E798C;text-align: left !important;/* width: 135px !important; */padding: 9px 0px;
}.edit-content .layui-input-block {margin-left: 130px !important;line-height: 38px !important;width: 400px;
}.edit-content .layui-form-item .layui-input {border-radius: 5px;
}.star {color: red;
}.no-change {border: 0px;pointer-events: none;background-color: #EDEDED;
}.no-change-echo {border-bottom: 1px solid #474647;border-top: 0px;border-left: 0px;border-right: 0px;border-radius: 0px;pointer-events: none;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {background-color: #48AB6C !important;
}
.layui-table-grid-down {display: none !important;
}

js

// 服务资源管理
$(function () {verifyToken();authorityEvent();initCheckTable()getTypeList()// 获取社区 居委标签getCommunityAndNeighborhood()// 获取政治面貌getPoliticsList()
})// 权限
var authorityContent = "";
function authorityEvent() {authorityContent = getUserRole();if (authorityContent.indexOf(GRADEB) != -1) {$("#searchTopBtns").append('<button style="margin: 0px 10px;border-radius: 5px;height: 35px;line-height: 30px;font-size: 14px;padding: 0px 15px;background: #48AB6C;"' +'type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="addBtn()" >添加资源</button>');}
}// 获取后台返回的ID与对应文字的映射关系,保存在一个对象中
var projectTypeMap = {};
// // 获取 居委标签
function getCommunityAndNeighborhood() {$.ajax({type: "get",url: getCommunityList,async: false,headers: {'dm-authorize-token': $.cookie("token"),},data: {},success: function (res) {if (res.code == 200) {// console.log(res);for (var i = 0; i < res.data.length; i++) {$("#community").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');let id = res.data[i].id;let text = res.data[i].name;projectTypeMap[id] = text;}} else {layer.msg(res.msg);}},error: function (res) {layer.msg(res.msg);}});
}
// 获取政治面貌列表
function getPoliticsList() {$.ajax({type: "get",url: getPolitics,async: false,headers: {'dm-authorize-token': $.cookie("token"),},data: {},success: function (res) {if (res.code == 200) {// console.log(res);for (var i = 0; i < res.data.length; i++) {$("#politics").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');}} else {layer.msg(res.msg);}},error: function (res) {layer.msg(res.msg);}});
}// 获取人员标签
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++) {//             $("#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);// });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>');}}});// 创建数据项容器,并将多选框和名称展示添加进去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);}});
}// 获取服务资源类型列表 
function getTypeList() {$.ajax({type: "get",url: getserviceResourcesTypeList,async: false,headers: {'dm-authorize-token': $.cookie("token"),},data: {// id: data.id,},success: function (res) {if (res.code == 200) {for (var i = 0; i < res.data.length; i++) {$("#searchStatus").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');$("#typeName").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');}} else {layer.msg(res.msg);}},error: function (res) {layer.msg(res.msg);}});
}
function initCheckTable() {layui.use(['table', 'form'], function () {var table = layui.table;form = layui.form;var token = $.cookie("token");var name = $("#searchKey").val();var status = $("#searchStatus").val();var colsList = [{ field: 'zizeng', width: 58, title: '序号', templet: "#zizeng", },{ field: 'name', title: '姓名' },{field: 'gender', width: 58, title: '姓别',templet: function (d) {return d.gender == '0' ? d.gender = '男' : d.gender = '女';}},{ field: 'phone', title: '电话' },{ field: 'identityCard', title: '身份号' },{ field: 'address', title: '家庭住址' },// { field: 'communityName', title: '所属社区' },{field: 'community', title: '所属居委', templet: function (d) {var typeId = d.community;return projectTypeMap[typeId] || ''; // 如果找不到对应的文字内容,返回空字符串}},{ field: 'typeName', title: '服务资源类型' },{field: 'tags', title: '标签', templet: function (d) {var html = '';for (var i = 0; i < d.tags.length; i++) {html += '<button type="button" style="background-color:' + d.tags[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius tableLabel">' + d.tags[i].name + '</button>'}return html}}];if (authorityContent.indexOf(GRADEB) != -1) {colsList.push({field: 'wealth', title: '操作', align: 'center', fixed: 'right',templet: function (item) {return '<span style="margin:0px 5px; color:#498fe5;cursor: pointer;" lay-event="updata" >编辑</span>' +'<a style="margin:0px 5px; color:#498fe5;cursor: pointer;" lay-event="delete">删除</a>';}})}table.render({url: serviceResources,headers: {"dm-authorize-token": token,},where: {name: name,type: status,},elem: '#checkTable',page: true,cols: [colsList],height: 'full-150',limit: 10,even: true,page: true,response: {statusCode: 200},request: {pageName: "pageNum",limitName: "pageSize"},parseData: function (res) {// console.log(res);$('#peopleNumber').html(res.data.count)return {"code": res.code,"msg": res.msg,"count": res.data.count,"data": res.data.data,};},done: function (res, curr, count) {},});// 监听按钮点击事件let ONOFF = true;$('#btnOpenDialog').click(function () {event.preventDefault(); // 阻止默认行为if (ONOFF) {$('#dialogContent').show()ONOFF = false;} else {$('#dialogContent').hide()ONOFF = true;}getShowList()});// 绑定点击事件table.on('tool(checkTable)', function (obj) {var data = obj.data;//获得当前行数据var layEvent = obj.event; 获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)if (obj.event === 'updata') {$.ajax({type: "get",url: serviceDetail + '/' + data.id,async: false,headers: {'dm-authorize-token': $.cookie("token"),},data: {id: data.id,},success: function (e) {if (e.code == 200) {// console.log('编辑数据', e);// 赋予编辑ideditProjectId = e.data.idaddBtn(true, e.data)} else {layer.msg(e.msg);}},error: function (e) {layer.msg(e.msg);}});} else if (obj.event === 'delete') {layer.confirm('您确认删除数据吗?删除后无法恢复',{ icon: 3, title: '删除信息提示' },function (index) {layer.close(index);// 删除执行的操作$.ajax({type: "post",url: deleteServiceResources + '/' + data.id,async: false,headers: {'dm-authorize-token': $.cookie("token"),},data: {id: data.id,},success: function (e) {if (e.code == 200) {layer.msg("操作成功");initCheckTable();} else {layer.msg(e.msg);}},error: function (e) {layer.msg(e.msg);}});});}});// 监听下拉框事件// 监听 select 事件// form.on('select(community)', function (data) {//     var fatherID = data.value; // 获取选中的值//     var text = data.elem[data.elem.selectedIndex].text; // 获取选中的文本//     console.log(fatherID, text);//     if (fatherID != '' && fatherID) {//         $.ajax({//             type: "get",//             url: getNeighborhood,//             async: false,//             headers: {//                 'dm-authorize-token': $.cookie("token"),//             },//             data: {//                 id: fatherID//             },//             success: function (res) {//                 // 获取后面子项下拉框的选择器//                 var $villageCommittee = $('#villageCommittee');//                 // 清空后面子项下拉框的选项//                 $villageCommittee.empty();//                 if (res.code == 200) {//                     for (var i = 0; i < res.data.length; i++) {//                         $("#villageCommittee").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');//                     }//                     form.render('select');//                 } else {//                     layer.msg(res.msg);//                 }//             },//             error: function (res) {//                 layer.msg(res.msg);//             }//         });//     }// });});
}
// 新增编辑
function addBtn(type, data) {layer.closeAll("tips");// 标题var title = "新增资源";editProjectId = ''if (type) {title = "编辑资源";editProjectId = data.id}layer.open({type: 1,area: ["680px", "640px"],title: title,content: $("#addProjectLayer"),resize: false,cancel: function () {cancelProjectLayer()},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,"birthday": data.birthday,"politics": data.politics,"unit": data.unit,})// 输出选中的数据if (data.tags != [] && data.tags) {selectedData = data.tagsfor (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");initTimeEvent()}},});
}// 搜索
function searchBtn() {initCheckTable()
}
// 刷新表格动画
$('#example-anim-usage').on('click', function () { // 获取当前图标元素 var icon = $('#example-anim-element'); // 添加旋转类 icon.addClass('layui-anim layui-anim-rotate layui-anim-loop'); // 模拟请求延迟cancelProjectLayer()layer.msg('刷新成功');setTimeout(function () { // 移除旋转类icon.removeClass('layui-anim layui-anim-rotate layui-anim-loop');}, 1000);
});
// 上传
layui.use(function () {var upload = layui.upload;var $ = layui.$;// 渲染upload.render({elem: '#ID-upload-demo-drag',url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。done: function (res) {layer.msg('上传成功');$('#ID-upload-demo-preview').removeClass('layui-hide').find('img').attr('src', res.files.file);}});
});// 日期
function initTimeEvent() {layui.use(['laydate'], function () {var laydate = layui.laydate;// var nowTime = new moment().format("yyyy-MM-DD");laydate.render({elem: '#birthday',trigger: 'click',value: '',format: 'yyyy-MM-dd', //设置日期格式// min: 'string', //设置最小值done: function (value, date) {}});});
}
// 取消
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();// 清空编辑ideditProjectId = ''// 关闭标签弹窗$('#dialogContent').hide()// 清空标题数组$('#labelButton').empty();selectedData = []layer.closeAll()$("#searchKey").val('');$("#searchStatus").val('');initCheckTable()
}
// 确认退回
function quRenProjectBtn() {var backProjectContent = $("#backProjectContent").val()if (backProjectContent == "" || backProjectContent == null) {return layer.msg("退回理由不能为空");}cancelProjectLayer()
}// 保存
function saveProjectBtn() {var name = $("#name").val();var gender = $('input[name="gender"]:checked').val()//获取选中的值;var phone = $("#phone").val();var identityCard = $("#identityCard").val();var address = $("#address").val();var community = $("#community").val();var typeName = $("#typeName").val();var hasSubsidy = $('input[name="hasSubsidy"]:checked').val();var subsidy = $("#subsidy").val();var birthday = $("#birthday").val();var politics = $("#politics").val();var unit = $("#unit").val();if (name == "" || name == null) {return layer.msg("姓名不能为空");}if (gender == "" || gender == null) {return layer.msg("性别不能为空");}if (community == "" || community == null) {return layer.msg("所属居(村)委不能为空");}if (phone == "" || phone == null) {return layer.msg("手机号不能为空");}if (identityCard == "" || identityCard == null) {return layer.msg("身份证号不能为空");}if (politics == "" || politics == null) {return layer.msg("政治面貌不能为空");}var url = addServiceResources;var msg = ('添加成功');var serviceResource = {name: name,gender: gender,phone: phone,identityCard: identityCard,address: address,birthday: birthday,politics: politics,unit: unit,community: community,type: typeName,hasSubsidy: hasSubsidy,subsidy: subsidy,tags: selectedData,};if (editProjectId != "" && editProjectId != null) {url = editServiceResources;msg = ('修改成功');serviceResource = {name: name,gender: gender,phone: phone,identityCard: identityCard,address: address,community: community,birthday: birthday,politics: politics,unit: unit,type: typeName,hasSubsidy: hasSubsidy,subsidy: subsidy,tags: selectedData,id: editProjectId};}// console.log(serviceResource);$.ajax({type: "post",url: url,async: false,headers: {'Content-Type': 'application/json','dm-authorize-token': $.cookie("token"),},data: JSON.stringify(serviceResource),success: function (e) {if (e.code == 200) {cancelProjectLayer();setTimeout(function () {layer.msg(msg);}, 300)} else {layer.msg(e.msg);}},error: function (e) {layer.msg(e.msg);}});
}//导出数据
function downloadProjectData(data) {var name = $("#searchKey").val();var type = $("#searchStatus").val();var requestOptions = {method: 'get',headers: {'dm-authorize-token': $.cookie("token"),},};layer.confirm('您确定导出现在表中的数据吗?',{ icon: 3, title: '导出提示' },function (index) {layer.close(index);fetch(exportServiceResources + "?name=" + name + "&type=" + type,requestOptions).then((response) => {return response.blob();}).then((res) => {const link = document.createElement('a');let blob = new Blob([res], {type:".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'",});link.href = URL.createObjectURL(blob);link.download = `服务资源数据.xlsx`;link.click();}).catch((error) => console.log('error', error)).finally(() => {this.submitLoading = true;});})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37430.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【BASH】回顾与知识点梳理(二十一)

【BASH】回顾与知识点梳理 二十一 二十一. Linux 的文件权限与目录配置21.1 使用者与群组属主(文件拥有者)属组(群组概念)其他人的概念root(万能的天神)Linux 用户身份与群组记录的文件 21.2 Linux 文件权限概念Linux 文件属性Linux 文件权限的重要性 21.3 如何改变文件属性与权…

组合模式(C++)

定义 将对象组合成树形结构以表示部分-整体’的层次结构。Composite使得用户对单个对象和组合对象的使用具有一致性(稳定)。 应用场景 在软件在某些情况下&#xff0c;客户代码过多地依赖于对象容器复杂的内部实现结构&#xff0c;对象容器内部实现结构(而非抽象接口)的变化…

Redis数据结构——链表list

链表是一种常用的数据结构&#xff0c;提供了顺序访问的方式&#xff0c;而且高效地增删操作。 Redis中广泛使用了链表&#xff0c;例如&#xff1a;列表的底层实现之一就是链表。 在Redis中&#xff0c;链表分为两部分&#xff1a;链表信息 链表节点。 链表节点用来表示链表…

PyTorch深度学习实践---笔记

PyTorch深度学习实践---笔记 2.线性模型&#xff08;Linear Model&#xff09;2.exercise 3. 梯度下降算法&#xff08;Gradient Descent&#xff09;3.1梯度下降&#xff08;Gradient Descent&#xff09;3.2 随机梯度下降&#xff08;Stochastic Gradient Descent&#xff09…

亚马逊测评工作室怎么做?

亚马逊是全球最大的电商平台之一&#xff0c;任何一个卖家想要提升自己店铺的知名度和销量&#xff0c;都需要关注自己Listing的Review数量和星级评价&#xff0c;而测评对于卖家账号的评定和产品曝光量有着重要影响&#xff0c;可以用于店铺提升销量&#xff0c;留评等 在进行…

c51单片机串口通信(中断方式接收数据)(单片机--单片机通信)示例代码 附proteus图

单片机一般采用中断方式接受数据&#xff0c;这样便于及时处理 #include "reg51.h" #include "myheader.h" #define uchar unsigned char int szc[10]{0xc0,0xf9,0xa4,0xb0,0x99,0x92,0x82,0xf8,0x80,0x90}; int bufferc[6]{0}; int sza[6]{0x01,0x02,0x0…

TEXTure环境配置,跑通inference的demo

TEXTure 环境配置安装kaolin这个包,这里可能会遇到各种问题配置huggingface的访问令牌 运行Text Conditioned Texture Generation指令报错1报错2成功运行 查看结果查看贴图后的三维网格模型 环境配置 # 创建一个名为texture的环境 conda create -n texture python3.9 -y# 激活…

人工智能任务1-【NLP系列】句子嵌入的应用与多模型实现方式

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能任务1-【NLP系列】句子嵌入的应用与多模型实现方式。句子嵌入是将句子映射到一个固定维度的向量表示形式&#xff0c;它在自然语言处理&#xff08;NLP&#xff09;中有着广泛的应用。通过将句子转化为向量…

ASP.NET Core - 缓存之分布式缓存

分布式缓存是由多个应用服务器共享的缓存&#xff0c;通常作为访问它的应用服务器的外部服务进行维护。 分布式缓存可以提高 ASP.NET Core 应用的性能和可伸缩性&#xff0c;尤其是当应用由云服务或服务器场托管时。 与其他将缓存数据存储在单个应用服务器上的缓存方案相比&am…

沁恒ch32V208处理器开发(三)GPIO控制

目录 GPIO功能概述 CH32V2x 微控制器的GPIO 口可以配置成多种输入或输出模式&#xff0c;内置可关闭的上拉或下拉电阻&#xff0c;可以配置成推挽或开漏功能。GPIO 口还可以复用成其他功能。端口的每个引脚都可以配置成以下的多种模式之一&#xff1a; 1 浮空输入 2 上拉输入…

AMEYA360:DNB1101大唐恩智浦工规级电池管理芯片

大唐恩智浦作为全球领先的半导体供应商&#xff0c;一直致力于为全球客户提供高质量的解决方案。在电池管理芯片领域&#xff0c;大唐恩智浦推出的DNB1101可谓是一款工规级的电池管理芯片&#xff0c;其卓越的性能和可靠性成为市场上备受全球领先的半导体供应商&#xff0c;一直…

Java接口压力测试—如何应对并优化Java接口的压力测试

导言 在如今的互联网时代&#xff0c;Java接口压力测试是评估系统性能和可靠性的关键一环。一旦接口不能承受高并发量&#xff0c;用户体验将受到严重影响&#xff0c;甚至可能导致系统崩溃。因此&#xff0c;了解如何进行有效的Java接口压力测试以及如何优化接口性能至关重要…

SpringBoot复习:(48)RedisAutoConfiguration自动配置类

RedisAutoConfiguration类代码如下&#xff1a; 可以看到在这个类中配置了2个bean: redisTemplate和stringRedisTemplate. 而它通过EnableConfigurationProperties(RedisProperties.class)注解&#xff0c;把配置文件中配置的Redis相关的信息引入进来了&#xff0c;RedisPrope…

安装Linux操作系统CentOS 6详细图文步骤

为满足业务对Linux操作系统部署的要求&#xff0c;本文档主要提供CentOS 6操作系统的最小化安装和基本配置, 安装本系统建议最少1GB内存和2GB磁盘空间。 1、 使用光盘或者挂载ISO镜像&#xff0c;在出现如下图形界面时选择【Install or upgrade an existing system】并按Ent…

P8642 [蓝桥杯 2016 国 AC] 路径之谜

[蓝桥杯 2016 国 AC] 路径之谜 题目描述 小明冒充 X X X 星球的骑士&#xff0c;进入了一个奇怪的城堡。 城堡里边什么都没有&#xff0c;只有方形石头铺成的地面。 假设城堡地面是 n n n\times n nn 个方格。如图所示。 按习俗&#xff0c;骑士要从西北角走到东南角。 …

音视频 vs2017配置FFmpeg

vs2017 ffmpeg4.2.1 一、首先我把FFmpeg整理了一下&#xff0c;放在C盘 二、新建空项目 三、添加main.cpp&#xff0c;将bin文件夹下dll文件拷贝到cpp目录下 #include<stdio.h> #include<iostream>extern "C" { #include "libavcodec/avcodec.h&…

【数据结构与算法——TypeScript】图结构(Graph)

【数据结构与算法——TypeScript】 图结构(Graph) 认识图结构以及特性 什么是图? 在计算机程序设计中&#xff0c;图结构 也是一种非常常见的数据结构。 但是&#xff0c;图论其实是一个非常大的话题 认识一下关于图的一些内容 图的抽象数据类型一些算法实现。 什么是图?…

jmeter获取mysql数据

JDBC Connection Configuration Database URL: jdbc:mysql:// 数据库地址 /库名 JDBC Driver class&#xff1a;com.mysql.jdbc.Driver Username&#xff1a;账号 Password&#xff1a;密码 JDBC Request 字段含义 字段含义 Variable Name Bound to Pool 数据库连接池配置…

使用vue3 + ts + vite + v-md-editor 在前端页面预览markdown文件

1.效果预览 2. 依赖包安装 yarn add kangc/v-md-editornext v-md-editor中文官网&#xff1a;https://code-farmer-i.github.io/vue-markdown-editor/zh/ v-md-editor分为4种组件&#xff1a; 轻量版编辑器进阶版编辑器预览组件html预览组件 对UI组件库页面&#xff0c;我只需…

问道管理:缩量小幅上涨说明什么?

股市里面&#xff0c;股票价格上涨或跌落都是常见现象。可是关于那些在商场上寻求收益的出资者来说&#xff0c;他们需要对每一个股市中的价格动摇有深化的了解&#xff0c;以便做出更正确的出资决策。最近&#xff0c;出资者们发现商场缩量小幅上涨的现象时有发生&#xff0c;…