先放一下e签宝合同归档页面：
这里只编写了其主体部分，模仿编写的效果如下：
该页面使用bootstrap实现布局，界面的样式以及相关的图标按钮使用layui实现。各个按钮都实现了相应的功能，包括新建分类、归档、批量归档等，以及左侧的菜单按钮。
主页面archive_manager2.html代码(包含了交互逻辑的代码，可能有点长)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>归档管理</title>
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="archive_manager2.css">
<link rel="stylesheet" href="../frameworkPackage/layui/css/layui.css">
<link rel="stylesheet" href="../frameworkPackage/bootstrap-4.4.1-dist/css/bootstrap.css">
<script src="../frameworkPackage/jquery-1.11.0.min.js"></script>
<script src="../frameworkPackage/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script src="../frameworkPackage/layui/layui.js"></script>
</head>
<body>
<!--用于新建分类弹窗的dom元素-->
<form id="layerForm" class="layui-form" action="" style="white-space:nowrap!important; display: none">
<div class="layui-form-item">
<label class="layui-form-label">分类名称</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="最多16个字"
class="layui-input">
</div>
</div>
</form>
<script>
var contractData = [];//所有合同数据
var classifyData = [];//当前选择分类下的合同数据
var classifyNames = [];//所有分类名，0号元素为未归档合同
classifyNames.push('待归档合同');
var currentIndex = 0;//页面当前所在分类项
var str = '[{"group_index":4,"user_acc":"123","contract_group_id":"BJoeB5NmJRvN","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"论电子合同的法律效力及问题_于晓松","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;","classify_name":"重要合同类"},{"group_index":5,"user_acc":"123","contract_group_id":"B5v6ZyZdFPwH","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"pdf顺序签","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;"},{"group_index":6,"user_acc":"123","contract_group_id":"Mt2ZNVkxNTDK","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"测试","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;","classify_name":"重要合同类"},{"group_index":7,"user_acc":"123","contract_group_id":"gEFT6shYSY96","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"论电子合同的法律效力及问题_于晓松","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;"},{"group_index":8,"user_acc":"123","contract_group_id":"Hag2AiMifdhm","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"甲方乙方合同","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;"},{"group_index":9,"user_acc":"123","contract_group_id":"DfuRSmKbcFVw","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"撤销合同","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;"},{"group_index":10,"user_acc":"123","contract_group_id":"vBN8IadW6iY3","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"测试2","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;"},{"group_index":11,"user_acc":"123","contract_group_id":"xJs8aKL52PaT","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"住房合同","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;"},{"group_index":12,"user_acc":"123","contract_group_id":"Dwun0qXZ0TkG","contract_receiver":"111","contract_sign_status":"已完成","contract_title":"测试3","receiver_name":"张三","master_name":"王五","contract_born_time":"2020-1-15","contract_urls":"2c6c729a-3c77-4994-8b40-90571ea709de.png;313testcontract.png;"}]'
contractData = JSON.parse(str);
layui.use('table', function () {
var table = layui.table;
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData'://新建分类的处理事件
var data = checkStatus.data;
// layer.alert(JSON.stringify(data));
layer.prompt({
formType: 0,
value: '',
title: '请输入分类名称',
area: ['800px', '350px'], //自定义文本域宽高
}, function (value, index, elem) {
//添加子分类
classifyNames.push(value);
freshClassify(classifyNames);
//为生成的
layer.close(index);
});
break;
case 'getCheckLength'://批量归档的处理事件
var data1 = checkStatus.data;
//将合同数据暂存
sessionStorage.setItem('currentIndex',currentIndex);
sessionStorage.setItem("classifyNames", JSON.stringify(classifyNames));
// debugger
//存储选中的合同的group_index
var selectData = [];
for (var i = 0; i < data1.length; i++) {
//避免选中问题
for (var j = 0; j < contractData.length; j++) {
if (data1[i].group_index === contractData[j].group_index) {
contractData[j] = data1[i];
break;
}
}
//存储选中的合同的group_index
selectData.push(data1[i].group_index);
}
sessionStorage.setItem("contractData", JSON.stringify(contractData));
sessionStorage.setItem("selectData", JSON.stringify(selectData));
layer.open({
type: 2,
content: 'select_classification.html',
title: "归档",
closeBtn: 0,
area: ["400px", "220px"],
end: function () { // layui 关闭弹框时的回调函数
//更新合同数据
contractData = JSON.parse(sessionStorage.getItem("contractData"));
// debugger
dataToUnclassified();
}
});
break;
case 'moveMulti'://批量移动的点击事件
var data2 = checkStatus.data;
//将合同数据暂存
sessionStorage.setItem("classifyNames", JSON.stringify(classifyNames));
sessionStorage.setItem('currentIndex',currentIndex);
//存储选中的合同的group_index
var selectData2 = [];
for (var i = 0; i < data2.length; i++) {
//避免选中问题
for (var j = 0; j < contractData.length; j++) {
if (data2[i].group_index === contractData[j].group_index) {
contractData[j] = data2[i];
break;
}
}
//存储选中的合同的group_index
selectData2.push(data2[i].group_index);
}
sessionStorage.setItem("contractData", JSON.stringify(contractData));
sessionStorage.setItem("selectData", JSON.stringify(selectData2));
layer.open({
type: 2,
content: 'select_classification.html',
title: "移动到",
closeBtn: 0,
area: ["400px", "220px"],
end: function () { // layui 关闭弹框时的回调函数
//更新合同数据
contractData = JSON.parse(sessionStorage.getItem("contractData"));
// debugger
dataToClassify(currentIndex);
} ,
cancel: function(){
//右上角关闭回调
console.info('cancel');
return false; //开启该代码可禁止点击该按钮关闭
}
});
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
}
;
});
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
//console.log(obj)
if (obj.event === 'del') {
window.location.href = "contract_detail2.html";
} else if (obj.event === 'edit') {
//将合同数据暂存
for (var j = 0; j < contractData.length; j++) {
if (obj.data.group_index === contractData[j].group_index) {
contractData[j] = obj.data;
break;
}
}
sessionStorage.setItem("contractData", JSON.stringify(contractData));
sessionStorage.setItem("classifyNames", JSON.stringify(classifyNames));
sessionStorage.setItem('currentIndex', currentIndex);
//存储选中的合同的group_index
var selectData = [];
selectData.push(obj.data.group_index);
sessionStorage.setItem("selectData", JSON.stringify(selectData));
layer.open({
type: 2,
content: 'select_classification.html',
title: "归档",
closeBtn: 0,
area: ["400px", "220px"],
end: function () { // layui 关闭弹框时的回调函数
//更新合同数据
contractData = JSON.parse(sessionStorage.getItem("contractData"));
// debugger
// dataToClassify(undefined);
dataToUnclassified();
// layer.msg('归档成功', { icon: 1 });
if(sessionStorage.getItem('btnValue')==='affirm'){
layer.msg('归档成功',{icon:1,time:1000});
}
},
success: function (layero, index) {
var body = layer.getChildFrame('body', index);
var slt = body.find("[name='interest']");
}
});
} else if (obj.event === 'move') {
//将合同数据暂存
for (var j = 0; j < contractData.length; j++) {
if (obj.data.group_index === contractData[j].group_index) {
contractData[j] = obj.data;
break;
}
}
sessionStorage.setItem("contractData", JSON.stringify(contractData));
sessionStorage.setItem("classifyNames", JSON.stringify(classifyNames));
sessionStorage.setItem('currentIndex', currentIndex);
// debugger
//存储选中的合同的group_index
var selectData1 = [];
selectData1.push(obj.data.group_index);
sessionStorage.setItem("selectData", JSON.stringify(selectData1));
layer.open({
type: 2,
content: 'select_classification.html',
title: '移动到',
closeBtn: 0,
area: ["400px", "220px"],
end: function () { // layui 关闭弹框时的回调函数
//更新合同数据
contractData = JSON.parse(sessionStorage.getItem("contractData"));
// debugger
dataToClassify(classifyNames[currentIndex]);
if(sessionStorage.getItem('btnValue')==='affirm'){
layer.msg('移出成功',{icon:1});
}
// layer.msg('移动成功', { icon: 1 });
},
success: function (layero, index) {
var body = layer.getChildFrame('body', index);
var slt = body.find("[name='interest']");
}
});
}
});
$(function () {
console.info(contractData);
//更新合同数据，将各个分类下的合同信息存储起来
dataToUnclassified();
//将待归档按钮颜色加深，为默认选中项
$('.mainDIvMainInfoDivSubInfoDiv').css({ "background": "rgba(0, 0, 0, 0.1)"});
// })
// });
//设置各个分类项的点击效果
//假设原含有属性普通合同分类和重要合同类
classifyNames.push("重要合同类");
classifyNames.push("普通合同类");
//初始化分类列表
// console.info(classifyNames);
freshClassify(classifyNames);
//待归档按钮的点击事件
$(".mainDIvMainInfoDivSubInfoDiv").click(function () {
// dataToClassify(undefined);
currentIndex = 0;
dataToUnclassified();
//使左侧分类按钮失去背景色
$('.subDiv').css({ "background": "rgba(255, 255, 255, 0.05)"});
//修改背景色,点击加深颜色效果
$(this).css({ "background": "rgba(0, 0, 0, 0.1)"});
//修改标题栏文字
$('#titleTextDiv').text(classifyNames[currentIndex]);
});
//搜索按钮的点击事件
$('#searchBtn').click(function () {
var searchValue=$('#searchInput').val().trim();
var searchData=[];
console.info(searchValue);
for (var i = 0; i < classifyData.length; i++) {
var str=classifyData[i].contract_title;
//判断是否包含该字符串
if(str.search(searchValue)!== -1){
searchData.push(classifyData[i]);
}
}
//如果当前分类为‘待归档合同’，
if(currentIndex===0){
//重新渲染表格
table.render({
elem: '#test'
, data: searchData
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
, layEvent: 'LAYTABLE_TIPS'
, icon: 'layui-icon-tips'
}]
, title: '用户数据表'
, cols: [[
{type: 'checkbox', fixed: 'left'}
// ,{ type: 'numbers', title: '序号', width: 60, fixed: 'left' }//序号列
, {field: 'contract_title', title: '合同主题', width: 210, fixed: 'left', unresize: true, sort: true}
, {field: 'contract_sign_status', title: '合同状态', width: 90,}
, {field: 'master_name', title: '发起人', width: 80,}
, {field: 'receiver_name', title: '参与人', width: 120,}
, {field: 'contract_born_time', title: '发起时间', width: 120, sort: true}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120}
]]
, page: true
, id: 'idTest'
, limits: [10, 25, 50] //一页选择显示3,5或10条数据
, limit: 10 //一页显示10条数据
});
}
else {
table.render({
elem: '#test'
, data: searchData
, toolbar: '#classifyToolbar' //开启头部工具栏，并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
, layEvent: 'LAYTABLE_TIPS'
, icon: 'layui-icon-tips'
}]
, title: '用户数据表'
, cols: [[
{type: 'checkbox', fixed: 'left'}
// ,{ type: 'numbers', title: '序号', width: 60, fixed: 'left' }//序号列
, {field: 'contract_title', title: '合同主题', width: 210, fixed: 'left', unresize: true, sort: true}
, {field: 'contract_sign_status', title: '合同状态', width: 90, }
, {field: 'master_name', title: '发起人', width: 80,}
, {field: 'receiver_name', title: '参与人', width: 120,}
, {field: 'contract_born_time', title: '发起时间', width: 120, sort: true}
, {fixed: 'right', title: '操作', toolbar: '#classifyBar', width: 130}
]]
, page: true
, id: 'idTest'
, limits: [10, 25, 50] //一页选择显示3,5或10条数据
, limit: 10 //一页显示10条数据
});
}
});
});
//传入分类名数组，更新左侧导航栏,并设置每个导航栏项的id，即为classifyNames的索引,从1开始
function freshClassify(classifyNames) {
$(".subDivContainer").html('');
for (var i = 1; i < classifyNames.length; i++) {
var str = " <div class='subDiv' id='" + i + "'>\n" +
classifyNames[i] +
" </div>"
$(".subDivContainer").append(str);
}
//新生成了分类项，每次都需要重新绑定点击事件
$(".subDiv").click(function () {
var index = $(this).attr('id');
currentIndex = index;//保存当前点击的分类项索引
dataToClassify(classifyNames[index]);
//使其他按钮失去加深颜色效果
$('.subDiv').css({ "background": "rgba(255, 255, 255, 0.05)"});
$(".mainDIvMainInfoDivSubInfoDiv").css({ "background": "rgba(255, 255, 255, 0.05)"});
//点击加深颜色效果
$(this).css({ "background": "rgba(0, 0, 0, 0.1)"})
//修改头部标题栏文字为当前分类
$('#titleTextDiv').text(classifyNames[currentIndex]);
});
}
//根据点击的分类名，查找相应分类名的合同项，修改当前分类合同数据与表格数据
function dataToClassify(value) {
classifyData = [];//清空当前合同数据
for (var i = 0; i < contractData.length; i++) {
//遍历合同数据的classify_name字段,更新当前分类的合同数据
if (contractData[i].classify_name === value) {
classifyData.push(contractData[i]);
// debugger
}
}
table.render({
elem: '#test'
, data: classifyData
, toolbar: '#classifyToolbar' //开启头部工具栏，并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
, layEvent: 'LAYTABLE_TIPS'
, icon: 'layui-icon-tips'
}]
, title: '用户数据表'
, cols: [[
{type: 'checkbox', fixed: 'left'}
// ,{ type: 'numbers', title: '序号', width: 60, fixed: 'left' }//序号列
, {field: 'contract_title', title: '合同主题', width: 210, fixed: 'left', unresize: true, sort: true}
, {field: 'contract_sign_status', title: '合同状态', width: 90, }
, {field: 'master_name', title: '发起人', width: 80,}
, {field: 'receiver_name', title: '参与人', width: 120,}
, {field: 'contract_born_time', title: '发起时间', width: 120, sort: true}
, {fixed: 'right', title: '操作', toolbar: '#classifyBar', width: 130}
]]
, page: true
, id: 'idTest'
, limits: [10, 25, 50] //一页选择显示3,5或10条数据
, limit: 10 //一页显示10条数据
});
}
function dataToUnclassified() {
classifyData = [];//清空当前合同数据
for (var i = 0; i < contractData.length; i++) {
//遍历合同数据的classify_name字段,更新当前分类的合同数据
if (contractData[i].classify_name === undefined || contractData[i].classify_name === '待归档合同') {
classifyData.push(contractData[i]);
// debugger
}
}
table.render({
elem: '#test'
, data: classifyData
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
, layEvent: 'LAYTABLE_TIPS'
, icon: 'layui-icon-tips'
}]
, title: '用户数据表'
, cols: [[
{type: 'checkbox', fixed: 'left'}
// ,{ type: 'numbers', title: '序号', width: 60, fixed: 'left' }//序号列
, {field: 'contract_title', title: '合同主题', width: 210, fixed: 'left', unresize: true, sort: true}
, {field: 'contract_sign_status', title: '合同状态', width: 90,}
, {field: 'master_name', title: '发起人', width: 80,}
, {field: 'receiver_name', title: '参与人', width: 120,}
, {field: 'contract_born_time', title: '发起时间', width: 120, sort: true}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120}
]]
, page: true
, id: 'idTest'
, limits: [10, 25, 50] //一页选择显示3,5或10条数据
, limit: 10 //一页显示10条数据
});
}
});
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="getCheckData">新建分类</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="getCheckLength">批量归档</button>
<!-- <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
</div>
</script>
<script type="text/html" id="classifyToolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="getCheckData">新建分类</button>
<button class="layui-btn layui-btn-sm " lay-event="moveMulti">批量移动</button>
<!-- <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs layui-btn-normal" style="color: white" lay-event="edit">归档</a>
<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="del">查看</a>
</script>
<script type="text/html" id='classifyBar'>
<a class="layui-btn layui-btn-xs " style="color: white" lay-event="move">移动到</a>
<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="show">查看</a>
</script>
<div class="wrapper">
<div class="main-panel">
<div class="content">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-9">
<div class="row">
<div class="col-md-2" style="padding-right: 0px">
<div class="mainInfoSubDiv">
<div class="mainDIvMainInfoDivSubInfoDiv">
<i class="layui-icon layui-icon-file"
style="font-size: 12px; color: #4d4d4d;margin-right: 8px;">
</i>
待归档合同
</div>
<div class="archivedDiv">
<i class="layui-icon layui-icon-template-1"
style="font-size: 12px; color: #4d4d4d;margin-right: 8px;">
</i>
已归档合同
</div>
<div class="subDivContainer">
<div class="subDiv">
测试1
</div>
</div>
</div>
</div>
<div class="col-md-9" style="padding-left: 10px">
<div class="row" >
<div class="col-md-12" style="padding-bottom: 5px;padding-left: 4px">
<div class="titleDiv">
<div class="row">
<div id="titleTextDiv" class="col-md-4" style="padding-left: 21px">
待归档合同
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<input id="searchInput" class="layui-input" style="width: 200px;height: 32px; font-size:12px;margin-top:10px"
name="id" placeholder="搜索合同主题" autocomplete="off">
</div>
<div class="col-md-2">
<button id="searchBtn" class="layui-btn layui-btn-sm layui-btn-normal" data-type="reload">搜索</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="padding-top: 5px">
<div class="tableDiv" style="min-height: 1000px">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
archive_manager2.css的代码：
.mainInfoSubDiv{
padding-top: 11px;
position: relative;
width: 100%;
height: 100%;
background: white;
overflow-y: hidden;
overflow-x: hidden;
border: 1px solid #e4e4e4;
}
.tableDiv{
position: relative;
width: 100%;
height: 50px;
background: white;
overflow-y: hidden;
overflow-x: hidden;
border: 1px solid #e4e4e4;
}
.titleDiv{
position: relative;
width: 100%;
height: 50px;
background: white;
overflow-y: hidden;
overflow-x: hidden;
border: 1px solid #e4e4e4;
font-size: 16px;
font-weight: 500;
color: #1a1a1a;
line-height: 50px;
padding-left: 21px;
}
.mainDIvMainInfoDivSubInfoDiv {
position: relative;
width: 100%;
/*height: 13%;*/
background: white;
/*border: 1px solid #eaeaea;*/
cursor: pointer;
padding-left: 16px;
height: 43px;
line-height: 43px;
font-size: 12px;
font-weight: 400;
color: #1a1a1a;
}
.mainDIvMainInfoDivSubInfoDiv:hover {
background: rgba(0, 0, 0,0.05) !important;
}
.archivedDiv{
position: relative;
width: 100%;
/*height: 13%;*/
background: white;
/*border: 1px solid #eaeaea;*/
padding-left: 16px;
height: 43px;
line-height: 43px;
font-size: 12px;
font-weight: 400;
color: #999;
}
.subDivContainer{
position: relative;
width: 100%;
height: 100%;
background: white;
/*overflow-y: auto;*/
/*overflow-x: hidden;*/
color: #4d4d4d;
}
.subDiv{
position: relative;
width: 100%;
/*height: 13%;*/
/*background: white;*/
/*border: 1px solid #eaeaea;*/
cursor: pointer;
text-align: center;
/*padding-left: 25px;*/
height: 32px;
/*line-height: 43px;*/
/*font-size: 13px;*/
/*font-weight: 400;*/
/*color: #1a1a1a;*/
font-size: 12px;
font-weight: 400;
color: #333;
line-height: 32px;
/*width: 188px;*/
}
.subDiv:hover {
background: rgba(0, 0, 0, 0.05) !important;
}
归档弹窗页面(select_classification.html)的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<link rel="stylesheet" href="../frameworkPackage/layui/css/layui.css">
<script src="../frameworkPackage/jquery-1.11.0.min.js"></script>
<script src="../frameworkPackage/layui/layui.js"></script>
<style>
.layerDiv{
position: absolute;
left: 0%;
top: 5%;
}
.btnDiv{
position: absolute;
left: 30%;
top: 60%;
}
</style>
</head>
<body>
<div class="layerDiv">
<form class="layui-form" >
<div class="layui-form-item">
<label class="layui-form-label">合同分类</label>
<div class="layui-input-inline" style="width: 190px !important;">
<select id="slt" name="interest" style="z-index: 3" lay-filter="aihao">
<option value=""></option>
</select>
</div>
</div>
</form>
</div>
<div class="btnDiv">
<button id="affirmBtn" class="layui-btn" data-type="reload">确定</button>
<button id="cancelBtn" class="layui-btn layui-btn-danger" data-type="reload">取消</button>
</div>
<script>
layui.use('form', function(){
//将分类名批量添加到select标签中
var slt=$("[name='interest']");
var classifyNames=JSON.parse(sessionStorage.getItem('classifyNames'));
var currentIndex=parseInt(sessionStorage.getItem('currentIndex'));
console.info('select'+currentIndex);
for (var i = 0; i < classifyNames.length; i++) {
if(i===currentIndex){continue;}
var str="<option value='"+i+"'>"+classifyNames[i]+"</option>";
slt.append(str);
}
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
//……
//但是，如果你的HTML是动态生成的，自动渲染就会失效
//因此你需要在相应的地方，执行下述方法来进行渲染
form.render();
$(function () {
$("#affirmBtn").click(function () {
var contractData=JSON.parse(sessionStorage.getItem("contractData"));
var selectData=JSON.parse(sessionStorage.getItem("selectData"));
var index=$("#slt").val();//获取分类索引值
if(index===''){
layer.msg('请选择分类！',{icon:8,time:1000});
return;
}
//遍历所有合同数据，搜索到选中的数据，那么添加该合同的分类
for (var i = 0; i < contractData.length; i++) {
for (var j = 0; j < selectData.length; j++) {
if(contractData[i].group_index===selectData[j]){
contractData[i].classify_name=classifyNames[index];
break;
}
}
}
//将数据存回sessionStorage
sessionStorage.setItem("contractData",JSON.stringify(contractData));
sessionStorage.setItem('btnValue','affirm');
parent.layer.closeAll();
});
$("#cancelBtn").click(function () {
sessionStorage.setItem('btnValue','cancel');
parent.layer.closeAll();
})
})
});
</script>
</body>
</html>
