Jquery 复选框点击生成标签 源代码
html
服务资源管理
刷新表格
共计 99+人
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(
'');
}
}
// 获取后台返回的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('');
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('');
}
} 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 = $('');
var nameSpan = $('' + item.name + '');
// 监听多选框的点击事件
// 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('');
// }
// }
// // 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('');
}
}
// 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('');
}
}
});
// 创建数据项容器，并将多选框和名称展示添加进去
var itemContainer = $('');
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('');
$("#typeName").append('');
}
} 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 += ''
}
return html
}
}];
if (authorityContent.indexOf(GRADEB) != -1) {
colsList.push({
field: 'wealth', title: '操作', align: 'center', fixed: 'right',
templet: function (item) {
return '编辑' +
'删除';
}
})
}
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);
// 赋予编辑id
editProjectId = e.data.id
addBtn(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('');
// }
// 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.tags
for (var i = 0; i < data.tags.length; i++) {
$("#labelButton").append('' + data.tags[i].name + '');
}
}
} 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();
// 清空编辑id
editProjectId = ''
// 关闭标签弹窗
$('#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;
});
})
}