最近 django + layui 写网站时候想实现在表格里加入开关和按钮功能，遇到往后台传值问题，参考几个文章都没成功解决，经研究 layui 的功能语法，找到了解决办法。
1. 想实现表格中加入按钮和开关
有一个需求，想在动态数据表格中加入表单元素，如开关和单选按钮
要求：点击按钮，获取前端数据，将结果发送给后台进行值的修改，刷新页面显示修改后的结果：
先说答案，参考这个来写：
2. 官方示例 代码分析
官方文档中提到
https://www.layui.com/demo/table/form.html
//页面代码
<script type="text/html" id="checkboxTpl">
<!-- 这里的 checked 的状态只是演示 -->
<input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>
特别关注：上面的 lay-filter=“lockDemo”
//{{d.id}} 是为了让表格数据按行显示在页面上（是那个开关的值，true or false）
//{{d.id}}，d是一行数据，id是表格列名，在 table.render定义， ,{field:‘id’, title:‘ID’, width:100, unresize: true, sort: true}
//django 中 的{{ }}符合有特殊含义，需要特殊代码屏蔽，否则页面不识别行数据
//表格
table.render({
elem: '#test'
,url:'/demo/table/user/'
,cellMinWidth: 80
,cols: [[
{type:'numbers'}
,{type: 'checkbox'}
,{field:'id', title:'ID', width:100, unresize: true, sort: true}
,{field:'username', title:'用户名', templet: '#usernameTpl'}
,{field:'city', title:'城市'}
,{field:'wealth', title: '财富', minWidth:120, sort: true}
,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
]]
,page: true
});
//监听锁定操作
form.on('checkbox(lockDemo)', function(obj){
layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
});
特别关注：上面的 lockDemo , 这个蚕参数是 lay-filter的值，在layui 中想调用 lay-filter的值，写法为
form.on('checkbox(lockDemo)'{
//do somesthing
}
3. 效果分析
以上特别关注提到的 代码
form.on('checkbox(lockDemo)'{
//do somesthing
}
可以有效在表格中显示开关效果，形如：
但是这种是无法将开关修改之后的结果发送回服务器的，因为很难用 layui 本身的功能来取值整行数据。
如果想修改这个开关的值，必定要获取ID 值和这个开关的值，并将ID 值和这个开关的值发送给后台，才能实现修改。
4. 解决方案
为了实现获取ID 值和这个开关的值，并将ID 值和这个开关的值发送给后台，计划采用 监听工具条 （行编辑和删除按钮）的写法：
（1）分析该代码如何实现
如果想获取行数据，只能通过 table.on 来获取，二通过form.on 是无法获取行数据的！
https://www.layui.com/doc/modules/table.html#ontool 提到：
toolbar - 绑定工具条模板：
通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。
table.render({
cols: [[
{field:'id', title:'ID', width:100}
,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
]]
});
以上的toolbar: '#barDemo'选项是实现的关键，值#barDemo 为下面的id="barDemo"
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
以上的 lay-event="detail" 是下面 table.on 判断的关键，值detail 用于判断点击按钮的事件类型，如下面的 if(layEvent=== 'detail'){ //查看：
//监听工具条
table.on('tool(table-layer-Filter)', function(obj){ //注：tool 是工具条事件名，table-layer-Filter是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if(layEvent=== 'detail'){ //查看 }
else if(layEvent === 'del'){ //删除 }
else if(layEvent === 'edit'){ //编辑 }
# 想获取行数据，只能通过 table.on 下的 obj.data
# 注意这句话: var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
总结一下的流程：
点击查看按钮时：
- 定位是在表格里，定位table.rander ；
- 定位 table.rander 工具条模板ID：
toolbar: '#barDemo'； - <script>中定位到了 查看按钮对应的事件ID：
lay-event="detail"； - 在 table.on 中 判断事件ID 即可。
特别注意：form.on 识别 表单（按钮）的 lay-filter
table.on 识别 表格 的 lay-filter
obj.event 识别 lay-event
（2）参考以上流程实现自己的代码
我创建的代码中
特别注意 要使用{% verbatim %}和{% endverbatim %}将按钮包含，否则将不解析{{ }}。
前端 html 写三目运算符，必须使用{{ }}进行包含，问号前面的是判断真假（ true 或者 false），后端的返回值如果是布尔值就可以直接写，不是布尔值，可以用if 判断。
后端返回的是 on 或者 off，所以 AAAA的 值是 on 或者 off。三目运算符可以用 if d.AAAA ==="on" 来生成 true 或者 false。
{% verbatim %}
<script type="text/html" id="switchCCCC">
<input type="checkbox" name="switchAAAA" id="switchAAAAId" value="{{d.AAAA}}" title="打开" lay-event="switchAAAAEvent" lay-filter="switchAAAAFilter" {{ d.AAAA== "on" ? 'checked' : '' }}>
</script>
<script type="text/html" id="switchDDDD">
<input type="checkbox" name="switchBBBB" id="switchBBId" value="{{d.BBBB}}" lay-skin="switch" lay-text="开启|锁定过" lay-event="switchBBBBEvent" lay-filter="switchBBBBFilter" {{ d.BBBB== "on" ? 'checked' : '' }}>
</script>
{% endverbatim %}
table.render({
cols: [[
{field:'AAAA', title:'AAAA', width:120, templet: '#switchCCCC', event:'switchAAAAEvent'}
,{field:'BBBB', title:'BBBB', width:120, templet: '#switchDDDD', event:'switchBBBBEvent'}
]]
});
注意我上面写了templet: '#switchDDDD' 和 event:'switchBBBBEvent'两个选项，理论上在上面的代码中设置 lay-event="switchBBBBEvent"就可以实现，但是我这没实现成功，事件关系也么仔细研究，遂参考官方文档写了这个参数，确定可用。文档如下：
https://www.layui.com/doc/modules/table.html
定义了 event 之后，下面就开始取值和传参了：
if(obj.event === "switchAAAAEvent" ){
$.post('/url/path/',{
ID: obj.data.ID
,AAAA: obj.data.AAAA
},function(data){
//根据后台返回的参数，来进行判断
if(data == "success"){
layer.closeAll() //关闭所有弹出层
window.parent.location.reload(); //刷新父页面
}
});
if(obj.event === "switchBBBBEvent" ){
$.post('/url/path/',{
ID: obj.data.ID
,BBBB: obj.data.BBBB
},function(data){
//根据后台返回的参数，来进行判断
if(data == "success"){
layer.closeAll() //关闭所有弹出层
window.parent.location.reload(); //刷新父页面
}
});
另外，如果此时同时定义了 form.on：
特别注意：form.on 识别 按钮的 lay-filter，table.on 识别 表格 的 lay-filter，obj.event 识别 lay-event
form.on('checkbox(switchAAAAFilter)', function (data) {
console.log("form.on")
if (data.elem.checked) {
layer.tips('测试按钮开关-开', data.othis, {
tips: 2
}
} else {
layer.tips('测试按钮开关-关', data.othis, {
tips: 2
}
}
});
如果table.on 的 obj.event 定义了取值和 ajax 传值，同时 form.on 也定义了按钮开关自身的提醒，则会有个先后顺序：
系统默认先运行 table.on 的 obj.event ，再运行 form.on。
我在测试是尝试使用 form.on 创建了一个临时变量，想取值之后再将结果传给 table.on 进行ajax数据发送，结果 table.on 先运行，发送结果为空，遂放弃。
（3）不可以出现两个自定义工具模板
如果系统内存在 查看删除行工具栏，现在又加上 开关工具栏，需要将判断结果写在一起
不可以分开为两个table.on('tool(table-layer-Filter)'监听事件。
# 以下都为自定义，不可并存
table.on('tool(table-layer-Filter)', function(obj){
if(layEvent=== 'detail'){ //查看 }
else if(layEvent === 'del'){ //删除 }
else if(layEvent === 'edit'){ //编辑 }
}
table.on('tool(table-layer-Filter)', function(obj){
if(layEvent=== 'switchAAAAEvent'){ //锁定}
else if(layEvent === 'switchBBBBEvent'){ //男女}
else if(layEvent === 'switchCCCCEvent'){ //是否}
}
系统默认会使用最后一个同名的将上面的覆盖，但这仅限自定义的模板行攻击栏，
系统中的头工具栏有自己单独的模板，不受影响，可并列存在，如：
# 以下可并存
//头工具栏事件
table.on('toolbar(table-layer-Filter)', function(obj){
switch(obj.event){
case 'getCheckData':
layer.msg('输出一行);
break;
case 'getCheckLength':
layer.msg('选中数量为：2行);
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
}
//监听行工具事件
table.on('tool(table-layer-Filter)', function(obj){
if(layEvent=== 'detail'){ //查看 }
else if(layEvent === 'del'){ //删除 }
else if(layEvent === 'edit'){ //编辑 }
}
4. 预览结果
5. 又发现一种写法，仅供参考，这部分单独存在。
特别注意 要使用{% verbatim %}和{% endverbatim %}将按钮包含，否则将不解析{{ }}。
前端 html 写三目运算符，必须使用{{ }}进行包含，问号前面的是判断真假，后端的返回值如果是布尔值就可以直接写，不是布尔值，可以用if 判断。
后端返回的是 true 或者 false，所以 asset_isInQingteng的 值是 true 或者 false。三目运算符可以直接写。
{% verbatim %}
<script type="text/html" id="optionToolbar">
<i class="layui-icon layui-icon-circle-dot" {{ d.asset_isInQingteng ? 'style="font-size: 5px; color: green;"' : 'style="font-size: 5px; color: green; display: none"' }}></i>
<i class="layui-icon layui-icon-circle-dot" {{ d.asset_isInQingteng ? 'style="font-size: 5px; color: red; display: none"' : 'style="font-size: 5px; color: red"' }}></i>
<a class="layui-btn layui-btn-xs" lay-event="detailEvent">查看</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editEvent">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delEvent">删除</a>
</script>
{% endverbatim %}
表格里的写这个{fixed:'right', field: 'asset_isInQingteng', title:'操作', width:180, align:'center', toolbar: '#optionToolbar',totalRow: true}：
table.render({
elem: '#currentTableId',
url: '/ctyun/ctyunassetlist/',
toolbar: '#hostlistTableToolbarId',
cols: [[
{type: "checkbox", width: 50},
{type: 'numbers', title: '序号', align:"center", sort: true, width:60, totalRowText: 'text'},
{fixed:'right', field: 'asset_isInQingteng', title:'操作', width:180, align:'center', toolbar: '#optionToolbar',totalRow: true}
]],
limits: [50, 100, 500, 1000, 3000, 5000, 10000, 20000, 50000],
limit: 20,
page: true,
});
使用 optionToolbar 进行关联，将图标和查看、编辑、删除合在一起，此处也可以是其他的，比如前面的选择按钮等。
示例：
6. 完整代码
<div class="layuimini-container" xmlns="http://www.w3.org/1999/html">
<div class="layuimini-main">
<fieldset class="layui-elem-field layuimini-search">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label" style="width: 70px">编号</label>
<div class="layui-input-inline" style="width: 120px">
<input type="text" name="searchVulnNoticeFileId" id="searchVulnNoticeFileIdId" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 70px">系统</label>
<div class="layui-input-inline" style="width: 120px">
<input type="text" name="searchVulnSystemName" id="searchVulnSystemNameId" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 70px">类型</label>
<div class="layui-input-inline" style="width: 120px">
<input type="text" name="searchVulnType" id="searchVulnTypeId" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 70px">级别</label>
<div class="layui-input-inline" style=" width: 120px">
<input type="text" name="vulnLevel" id="vulnLevelId" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 70px">类型</label>
<div class="layui-input-inline" style="width: 120px">
<input type="text" name="searchVulnType" id="searchVulnTypeId" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 70px">域名</label>
<div class="layui-input-inline" style="width: 120px">
<input type="text" name="searchVulnDomain" id="searchVulnDomainId" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 70px">测试 </label>
<div class="layui-input-inline" style="width: 120px">
<input type="text" name="searchVulnTestName" id="searchVulnTestNameId" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
</div>
</div>
</form>
</div>
</fieldset>
{#--------------------添加按钮弹窗-------------------#}
{#<div class="site-text" style="width:98%; height:600px; margin: 20px auto auto auto; overflow:auto; display: none" id="viewVulnOpenFormId" target="test123">#}
<div class="site-text" style="width:98%; height:600px; margin: 30px 20px 30px 20px; overflow:auto; display: none" id="viewVulnOpenFormId" target="test123">
<form class="layui-form" lay-filter="myFormFilter" onsubmit="return false;" action="#" method="get" id="addVulnFormOpenFormId">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">通知单编号</label>
<div class="layui-input-block" style="width: 200px">
<input type="text" name="vulnNoticeFileIdOpenForm" id="vulnNoticeFileIdOpenFormId" lay-verify="required" autocomplete="off" placeholder="001" readonly="readonly" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">漏洞域名</label>
<div class="layui-input-inline" style="width: 200px">
<input type="text" name="vulnDomainOpenForm" id="vulnDomainOpenFormId" lay-verify="required" autocomplete="off" placeholder="漏洞域名" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">漏洞类型</label>
<div class="layui-input-inline" style="width: 200px">
<input type="text" name="vulnTypeOpenForm" id="vulnTypeOpenFormId" autocomplete="off" placeholder="漏洞类型" class="layui-input">
</div>
</div>
{# <div class="layui-inline">#}
{# <label class="layui-form-label">漏洞级别</label>#}
{# <div class="layui-input-inline" style="width: 200px">#}
{# <select name="vulnLevelOpenForm" id="vulnLevelOpenFormId" lay-search="">#}
{# <option value="">请选择漏洞级别</option>#}
{# <option value="高危">高危</option>#}
{# <option value="中危">中危</option>#}
{# <option value="低危">低危</option>#}
{# <option value="风险">风险</option>#}
{# </select>#}
{# </div>#}
{# </div>#}
<div class="layui-inline">
<label class="layui-form-label ">漏洞级别*</label>
<div class="layui-input-inline" style=" width: 200px">
<input type="text" name="vulnLevelOpenForm" id="vulnLevelOpenFormId" lay-verify="required" autocomplete="off" placeholder="1个中危，一个低危" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">测试人员</label>
<div class="layui-input-block" style="width: 200px">
<input type="text" name="vulnTestNameOpenForm" id="vulnTestNameOpenFormId" lay-verify="required" autocomplete="off" placeholder="001" readonly="readonly" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">漏洞个数</label>
<div class="layui-input-inline" style="width: 200px">
<input type="text" name="vulnCountOpenForm" id="vulnCountOpenFormId" lay-verify="required" autocomplete="off" placeholder="漏洞个数" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">系统名称</label>
<div class="layui-input-block" style="width: 200px">
<input type="text" name="vulnSystemNameOpenForm" id="vulnSystemNameOpenFormId" lay-verify="required" autocomplete="off" placeholder="系统名称" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">开发单位</label>
<div class="layui-input-block" style="width: 200px">
<input type="text" name="vulnDevelopCompanyOpenForm" id="vulnDevelopCompanyOpenFormId" autocomplete="off" placeholder="开发单位" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">通知单名称</label>
<div class="layui-input-block" style="width: 520px">
<input type="text" name="vulnNoticeFileNameOpenForm" id="vulnNoticeFileNameOpenFormId" lay-verify="title" autocomplete="off" placeholder="通知单名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">是否通知</label>
<div class="layui-input-block">
<input type="checkbox" name="vulnIsNoticeOpenForm" id="vulnIsNoticeOpenFormId" lay-skin="switch" lay-filter="vulnIsNoticeFilter" lay-text="已通知|未通知">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-block"></div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否反馈</label>
<div class="layui-input-block">
<input type="checkbox" name="vulnIsFeedbackOpenForm" id="vulnIsFeedbackOpenFormId" lay-skin="switch" lay-filter="vulnIsFeedbackIdFilter" lay-text="已反馈|未反馈">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">是否复测</label>
<div class="layui-input-block">
<input type="checkbox" name="vulnIsRetestOpenForm" id="vulnIsRetestOpenFormId" lay-skin="switch" lay-filter="vulnIsRetestIdFilter" lay-text="已复测|未复测">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-block"></div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否修复</label>
<div class="layui-input-block">
<input type="checkbox" name="vulnIsEepairOpenForm" id="vulnIsEepairOpenFormId" lay-skin="switch" lay-filter="vulnIsEepairIdFilter" lay-text="已修复|未修复">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">资料上传</label>
<div class=" layui-upload" style="display:inline">
<button type="button" class="layui-btn layui-btn-sm" style="width:100px" name="selectWordVulnNoticeFileOpenForm" id="selectWordVulnNoticeFileOpenFormId">选择word通知单</button>
<button type="button" class="layui-btn layui-btn-sm" name="startUploadWordVulnNoticeFileOpenForm" id="startUploadWordVulnNoticeFileOpenFormId">开始上传</button>
</div>
<div class=" layui-upload layui-input-block" style="display:inline">
<button type="button" class="layui-btn layui-btn-sm" style="width:100px" name="selectVulnNoticeFileOpenForm" id="selectPdfVulnNoticeFileOpenFormId">选择pdf通知单</button>
<button type="button" class="layui-btn layui-btn-sm" name="startUploadVulnNoticeFileOpenForm" id="startUploadPdfVulnNoticeFileOpenFormId">开始上传</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">资料上传</label>
<div class=" layui-upload" style="display:inline">
<button type="button" class="layui-btn layui-btn-sm" style="width:100px" name="selectVulnFeedbackFileOpenForm" id="selectVulnFeedbackFileOpenFormId">选择整改反馈单</button>
<button type="button" class="layui-btn layui-btn-sm" name="startUploadVulnFeedbackFileOpenForm" id="startUploadVulnFeedbackFileOpenFormId">开始上传</button>
</div>
<div class=" layui-upload layui-input-block" style="display:inline">
<button type="button" class="layui-btn layui-btn-sm" style="width:100px" name="selectVulnRetestFileOpenForm" id="selectVulnRetestFileOpenFormId">选择复测报告</button>
<button type="button" class="layui-btn layui-btn-sm" name="startUploadVulnRetestFileOpenForm" id="startUploadVulnRetestFileOpenFormId">开始上传</button>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">漏洞描述</label>
<div class="layui-input-block" style="width: 535px; max-height: 30px; height: 30px">
<textarea placeholder="请输入内容" name="vulnDetailOpenForm" id="vulnDetailOpenFormId" placeholder="漏洞描述" class="layui-textarea"style="width: 535px; max-height: 30px; height: 30px"></textarea>
</div>
</div>
<div class="layui-form-item " style="text-align:center; margin-top: 80px">
<div class="layui-input-block ">
<button class="layui-btn" name="editVulnSubmitOpenForm" id="editVulnSubmitOpenFormId" type="button" style="margin-right: 10px" lay-submit lay-filter="editVulnSubmitOpenFormFilter">立即提交</button>
<button type="reset" class="layui-btn layui-btn-normal" style="margin-right: 10px"> 重置 </button>
<button class="layui-btn layui-btn-warm" name="addcancle" id="addcancleId" type="button" style="margin-leftr: 10px; margin-right: 80px;" lay-submit lay-filter="addcancleFilter"> 取消 </button>
{# <button type="reset" class="layui-btn layui-btn-normal" style="margin-right: 150px"> 重置 </button>#}
</div>
</div>
</form>
</div>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
</div>
</div>
<script type="text/html" id="optionToolbar">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="selectToolbar">
<div class="layui-btn-container">
{# <button class="layui-btn layui-btn-sm" lay-event="addVulnData" href="javascript:;" data-content-href="VulnManage/addvuln.html" data-title="基本资料" data-icon="fa fa-gears">新增数据</button>#}
<button class="layui-btn layui-btn-sm" href="javascript:;" data-content-href="VulnManage/addvulndata/" data-title="基本资料" data-icon="fa fa-gears">新增数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
<button type="button" class="layui-btn layui-btn-sm data-download-btn layui-btn-normal" id="downloadTroubleTemplateFileId" name="downloadTroubleTemplateFile">
{# <a href="/Assets/downloadDomainTemplateFile/" style="color: blue; font-size: 14px">#}
<a href="/VulnManage/downloadTroubleTemplateFile/" style="color: white; font-size: 12px">
<i class="layui-icon"></i>
下载模板
</a>
</button>
<button type="button" class="layui-btn layui-btn-sm" id="selectFileId" name="selectFile">选择文件（Vuln.xls）</button>
<button type="button" class="layui-btn layui-btn-sm" id="startUploadId" name="startUpload">
<i class="layui-icon"></i>
开始上传
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" href="javascript:;" data-title="初始化" data-icon="fa fa-gears" lay-event="initAll">
<i class="layui-icon"></i>
初始化
</button>
<button class="layui-btn layui-btn-sm data-delete-btn layui-btn-danger" lay-event="deleteAll">
<i class="layui-icon"></i>
全部删除
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="downloadAll">
<a href="/VulnManage/downloadTroubleAllToFile/" style="color: white; font-size: 12px">
<i class="layui-icon"></i>
批量下载
</button>
</div>
</script>
{## {{ d.vulnIsNotice == "on" ? 'checked' : '' }} 将表格的数据给按钮#}
{% verbatim %}
<script type="text/html" id="switchVulnIsNoticePdfToolbar">
<input type="checkbox" name="switchVlnIsNoticeOpenform" id="switchVlnIsNoticeOpenformId" value="{{d.vulnIsNotice}}" title="已通知" lay-event="switchVlnIsNoticeOpenformEvent" lay-filter="switchVlnIsNoticeOpenformFilter" {{ d.vulnIsNotice == "on" ? 'checked' : '' }}>
</script>
<script type="text/html" id="switchVulnIsFeedbackToolbar">
<input type="checkbox" name="switchVlnIsFeedbackOpenform" id="switchVlnIsFeedbackOpenformId" value="{{d.vulnIsFeedback}}" title="已反馈" lay-event="switchVlnIsFeedbackOpenformEvent" lay-filter="switchVlnIsFeedbackOpenformFilter" {{ d.vulnIsFeedback == "on" ? 'checked' : '' }}>
</script>
<script type="text/html" id="switchVulnIsRetestToolbar">
<input type="checkbox" name="switchVlnIsRetestOpenform" id="switchVlnIsRetestOpenformId" value="{{d.vulnIsNotice}}" title="已复测" lay-event="switchVlnIsRetestOpenformEvent" lay-filter="switchVlnIsRetestOpenformFilter" {{ d.vulnIsRetest == "on" ? 'checked' : '' }}>
</script>
<script type="text/html" id="switchVulnIsHandleToolbar">
<input type="checkbox" name="switchVlnIsRepireOpenform" id="switchVlnIsRepireOpenformId" value="{{d.vulnIsEepair}}" lay-skin="switch" lay-text="已通过|未通过" lay-event="switchVlnIsRepireOpenformEvent" lay-filter="switchVlnIsRepireOpenformFilter" {{ d.vulnIsEepair == "on" ? 'checked' : '' }}>
</script>
{% endverbatim %}
{##}
{##}
{#<script type="text/html" id="switchVulnIsNoticePdfToolbar">#}
{# <input type="checkbox" name="switchVlnIsNotice" id="switchVlnIsNoticeId" value="{{d.vulnIsNotice}}" title="已下发" lay-filter="switchVlnIsNoticeFilter" {{ d.vulnIsNotice == "on" ? 'checked' : '' }}>#}
{# #}
{# <a class="layui-btn layui-btn-warm layui-btn-xs" id="selectWordVulnNoticeFileId">上传</a>#}
{# <a class="layui-btn layui-btn-warm layui-btn-xs" id="downloadWordVulnNoticeFileId">下载</a>#}
{#</script>#}
{#<script type="text/html" id="switchVulnIsFeedbackToolbar">#}
{# <input type="checkbox" name="switchVlnIsFeedback" id="switchVlnIsFeedbackId" value="{{d.vulnIsFeedback}}" title="已反馈" lay-filter="switchVlnIsFeedbackFilter" {{ d.vulnIsFeedback == "on" ? 'checked' : '' }}>#}
{# #}
{# <a class="layui-btn layui-btn-warm layui-btn-xs" id="selectPdfVulnNoticeFileId">上传</a>#}
{# <a class="layui-btn layui-btn-warm layui-btn-xs" id="downloadPdfVulnNoticeFileId">下载</a>#}
{#</script>#}
{#<script type="text/html" id="switchVulnIsRetestToolbar">#}
{# <input type="checkbox" name="switchVlnIsRetest" id="switchVlnIsRetestId" value="{{d.vulnIsNotice}}" title="已复测" lay-filter="switchVlnIsRetestFilter" {{ d.vulnIsRetest == "on" ? 'checked' : '' }}>#}
{# #}
{# <a class="layui-btn layui-btn-warm layui-btn-xs" id="selectVulnFeedbackFileId">上传</a>#}
{# <a class="layui-btn layui-btn-warm layui-btn-xs" id="downloadVulnFeedbackFileId">下载</a>#}
{#</script>#}
{#<script type="text/html" id="switchVulnIsHandleToolbar">#}
{# <input type="checkbox" name="switchVlnIsRepire" id="switchVlnIsRepireId" value="{{d.vulnIsEepair}}" lay-skin="switch" lay-text="已通过|未通过" lay-filter="switchVlnIsRepireFilter" {{ d.vulnIsEepair == "on" ? 'checked' : '' }}>#}
{# #}
{# <a class="layui-btn layui-btn-warm layui-btn-xs" id="selectVulnRetestFileId">上传</a>#}
{# <a class="layui-btn layui-btn-warm layui-btn-xs" id="downloadVulnRetestFileId">下载</a>#}
{#</script>#}
<script>
layui.use(['form', 'layer', 'table', 'upload', 'layedit', 'laydate'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
upload = layui.upload,
layedit = layui.layedit,
laydate = layui.laydate,
layer = layui.layer;
// 表格
table.render({
elem: '#currentTableId'
,url: 'VulnManage/getvulndetail/'
,toolbar: '#selectToolbar'//开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{type: 'numbers', title: '序号', width:60, align:"center", sort: true,fixed: 'left'}
,{field:'vulnNoticeFileId', title:'编号', width:90, align:'center', sort: true,fixed: 'left', totalRowText: 'text'}
{#,{field:'vulnNoticeFileName', title:'通知单名称', width:200, align:'left', sort: true, totalRowText: 'text'}#}
{#,{field:'vulnSystemName', title:'系统名称', width:150, align:'center', sort: true, totalRowText: 'text'}#}
{#,{field:'vulnLevel', title:'级别', width:85, align:'center', sort: true, totalRowText: 'text'}#}
{#,{field:'vulnDomain', title:'漏洞域名', width:200, align:'left', sort: true, totalRowText: 'text'}#}
,{field:'vulnIsNotice', title:'是否通知', width:125, templet: '#switchVulnIsNoticePdfToolbar', align:'left', sort: true, totalRowText: 'text', event:'switchVlnIsNoticeOpenformEvent'}
,{field:'vulnIsFeedback', title:'是否反馈', width:125, templet: '#switchVulnIsFeedbackToolbar', align:'left', sort: true, totalRowText: 'text', event:'switchVlnIsFeedbackOpenformEvent'}
,{field:'vulnIsRetest', title:'是否复测', width:125, templet: '#switchVulnIsRetestToolbar', align:'left', sort: true, totalRowText: 'text', event:'switchVlnIsRetestOpenformEvent'}
,{field:'vulnCount', title:'个数', width:85, align:'center', sort: true, totalRowText: 'text'}
{#,{field:'vulnType', title:'漏洞类型', width:200, align:'center', sort: true, totalRowText: 'text'}#}
{#,{field:'vulnTestName', title:'测试人员', width:120, align:'center', sort: true, totalRowText: 'text'}#}
{#,{field:'businessPeople', title:'项目经理', width:120, align:'center', sort: true, totalRowText: 'text'}#}
{#,{field:'DevelopPeople', title:'研发负责人', width:120, align:'center', sort: true, totalRowText: 'text'}#}
{#,{field:'vulnNoticeWordPath', title:'整改通知单WORD', width:200, align:'left', sort: true, totalRowText: 'text', event: 'getVulnNoticeWordPathEvent'}#}
{#,{field:'vulnNoticePdfPath', title:'整改通知单PDF', width:200, align:'left', sort: true, totalRowText: 'text', event: 'getVulnNoticePdfPathEvent'}#}
{#,{field:'vulnFeedbackPath', title:'整改反馈单', width:200, align:'left', sort: true, totalRowText: 'text', event: 'getVulnFeedbackPathEvent'}#}
{#,{field:'vulnRetestPath', title:'复测报告', width:200, align:'left', sort: true, totalRowText: 'text', event: 'getVulnRetestPathEvent'}#}
{#,{field:'vulnDevelopCompany', title:'开发单位', width:120, align:'center', sort: true, totalRowText: 'text'}#}
{#,{field:'vulnDetail', title:'漏洞描述', width:300, align:'left', sort: true, totalRowText: 'text'}#}
{#,{field:'vulncreatePeople', title:'创建人员', width:120, align:'center', sort: true, totalRowText: 'text'}#}
,{field:'vulncreateTime', title:'创建时间', width:220, align:'left', sort: true, totalRowText: 'text'}
{#,{field:'vulnupdatePeople', title:'更新人员', width:120, align:'center', sort: true, totalRowText: 'text'}#}
,{field:'vulnupdateTime', title:'更新时间', width:220, align:'left', sort: true, totalRowText: 'text'}
,{fixed:'right', field:'vulnIsEepair', title:'是否修复', width:120, templet: '#switchVulnIsHandleToolbar', align:'center', sort: true, totalRowText: 'text', event:'switchVlnIsRepireOpenformEvent'}
,{fixed:'right', title:'操作', width:170, align:'center', toolbar: '#optionToolbar',totalRow: true}
]]
{#需要在后台一起处理#}
,limit: 13
,limits: [10, 15, 20, 25, 50, 100]
,page: true
,title: '用户数据表'
,id:"tableRenameId" //table.reload()会使用此ID
,done:function(){
tableData = table.cache.tableIns;
}
});
// 监听添加漏洞提交
form.on('submit(editVulnSubmitOpenFormFilter)', function (data) {
$.ajax({
url: '/VulnManage/editvulnsubmit/',
type: 'post'
,dataType: 'json' //预期返回类型
,data: data.field,
success:function(data){
if(data == "success"){
layer.alert("修改成功",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
}else{
layer.alert(data,{ icon:2,title:'提示'},function(index){ layer.close(index);});
}
},
});
return false;
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var vulnNoticeFileId = $('#searchVulnNoticeFileIdId').val();
var vulnSystemName = $('#searchVulnSystemNameId').val();
var vulnType = $('#searchVulnTypeId').val();
var vulnLevel = $('#searchVulnLevelId').val();
var vulnDomain = $('#searchVulnDomainId').val();
var vulnTestName = $('#searchVulnTestNameId').val();
{#alert(vulnTestName);#}
{#table.rander({#}
{# ,title: '用户数据表'#}
{# ,id:"tableRenameId" }) //table.reload()会使用此ID#}
table.reload('tableRenameId', {
url: 'VulnManage/searchvulnsubmit/'
{#,methods:"post"#}
,request: {
pageName: 'page' //页码的参数名称，默认：page
, limit: 'limit' //每页数据量的参数名，默认：limit
}
,where: {
vulnNoticeFileId : vulnNoticeFileId
,vulnSystemName : vulnSystemName
,vulnLevel : vulnLevel
,vulnType : vulnType
,vulnDomain : vulnDomain
,vulnTestName : vulnTestName
}
,page: {
curr: 1
}
});
{#return false;#}
});
//选完文件后不自动上传
upload.render({
elem: '#selectFileId'
,url: 'VulnManage/uploadTroubleFileAll/'
,auto: false //是否选完文件后自动上传
//,multiple: true //是否允许多文件上传
,bindAction: '#startUploadId'
,accept: 'file' //允许上传的文件类型
,acceptMime: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
,exts: 'xls|xlsx' //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
{#,acceptMime: 'text/plain'#}
{#,ext: 'log|txt'#}
{#,acceptMime: 'text/*'#}
{#,size: 50 //最大允许上传的文件大小#}
{#,before:function(obj){#}
{# obj.preview(function(index, file, result){#}
{# alert(file.name);#}
{# });#}
,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
layer.load(); //上传loading
}
,done: function(res, index, upload){
if (res.code == 0){
layer.closeAll('loading'); //关闭loading
layer.alert("上传成功",{
icon:1
,title:'提示'
});
}
}
});
//上传 word 的漏洞整改通知单,选完文件后不自动上传
upload.render({
elem: '#selectWordVulnNoticeFileOpenFormId'
,dragDrop: true // 是否可以拖动上传文件
{#,url: 'VulnManage/uploadWordVulnNoticeFile/'#}
,auto: false //是否选完文件后自动上传
//,multiple: true //是否允许多文件上传
{#,bindAction: '#startUploadWordVulnNoticeFileOpenFormId'#}
,accept: 'file' //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
,acceptMime: ".docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
,exts: 'doc|docx' //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
layer.load(); //上传loading
}
,done: function(data, index, upload){
layer.closeAll('loading'); //关闭loading
layer.close(index);
}
});
$("#startUploadWordVulnNoticeFileOpenFormId").on("click",function () {
var addVulnFormId = document.getElementById("addVulnFormOpenFormId"); //获取所要提交form的id
var joinFormData = new FormData(addVulnFormId); //用所要提交form做参数建立一个formdata对象
$.ajax({
url: 'VulnManage/uploadWordVulnNoticeFile/'
,type: "POST"
,data: joinFormData
,async : false
,contentType: false //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
,processData: false //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
,error : function(request) {
parent.layer.alert("网络超时");
}
,success: function (data) {
if (data.code == "0"){
layer.alert(data.msg,{
icon:1
,title:'提示'
});
}else(
layer.alert(data.msg,{
icon:2
,title:'提示'
})
);
}
});
return false;
});
//上传 PDF 的漏洞整改通知单,选完文件后不自动上传
upload.render({
elem: '#selectPdfVulnNoticeFileOpenFormId'
{#,url: 'VulnManage/uploadWordVulnNoticeFile/'#}
,auto: false //是否选完文件后自动上传
//,multiple: true //是否允许多文件上传
{#,bindAction: '#startUploadPdfVulnNoticeFileOpenFormId'#}
,accept: 'file' //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
{#,acceptMime: ".docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"#}
,acceptMime:"application/pdf"
,exts: 'pdf' //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
layer.load(); //上传loading
}
,done: function(data, index, upload){
layer.closeAll('loading'); //关闭loading
layer.close(index);
}
});
$("#startUploadPdfVulnNoticeFileOpenFormId").on("click",function () {
var addVulnFormId = document.getElementById("addVulnFormOpenFormId"); //获取所要提交form的id
var joinFormData = new FormData(addVulnFormId); //用所要提交form做参数建立一个formdata对象
$.ajax({
url: 'VulnManage/uploadPdfVulnNoticeFile/'
,type: "POST"
,data: joinFormData
,async : false
,contentType: false //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
,processData: false //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
,error : function(request) {
parent.layer.alert("网络超时");
}
,success: function (data) {
if (data.code == "0"){
layer.alert(data.msg,{
icon:1
,title:'提示'
});
}else(
layer.alert(data.msg,{
icon:2
,title:'提示'
})
);
}
});
return false;
});
//上传 word | PDF 的反馈单,选完文件后不自动上传
upload.render({
elem: '#selectVulnFeedbackFileOpenFormId'
{#,url: 'VulnManage/uploadVulnFeedbackFile/'#}
,auto: false //是否选完文件后自动上传
//,multiple: true //是否允许多文件上传
{#,bindAction: '#startUploadVulnFeedbackFileOpenFormId'#}
,accept: 'file' //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
,acceptMime: ".docx,.pdf,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
,exts: 'doc|docx|pdf' //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
layer.load(); //上传loading
}
,done: function(data, index, upload){
layer.closeAll('loading'); //关闭loading
layer.close(index);
}
});
$("#startUploadVulnFeedbackFileOpenFormId").on("click",function () {
var addVulnFormId = document.getElementById("addVulnFormOpenFormId"); //获取所要提交form的id
var joinFormData = new FormData(addVulnFormId); //用所要提交form做参数建立一个formdata对象
$.ajax({
url: 'VulnManage/uploadVulnFeedbackFile/'
,type: "POST"
,data: joinFormData
,async : false
,contentType: false //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
,processData: false //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
,error : function(request) {
parent.layer.alert("网络超时");
}
,success: function (data) {
if (data.code == "0"){
layer.alert(data.msg,{
icon:1
,title:'提示'
});
}else(
layer.alert(data.msg,{
icon:2
,title:'提示'
})
);
}
});
return false;
});
//上传 word 的复测报告,选完文件后不自动上传
upload.render({
elem: '#selectVulnRetestFileOpenFormId'
{#,url: 'VulnManage/uploadVulnRetestFile/'#}
,auto: false //是否选完文件后自动上传
{##}
{#//,multiple: true //是否允许多文件上传#}
{#,bindAction: '#startUploadVulnRetestFilOpenFormeId'#}
,accept: 'file' //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
,acceptMime: ".docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
,exts: 'doc|docx' //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
layer.load(); //上传loading
}
,done: function(data, index, upload){
layer.closeAll('loading'); //关闭loading
layer.close(index);
}
});
$("#startUploadVulnRetestFileOpenFormId").on("click",function () {
var addVulnFormId = document.getElementById("addVulnFormOpenFormId"); //获取所要提交form的id
var joinFormData = new FormData(addVulnFormId); //用所要提交form做参数建立一个formdata对象
$.ajax({
url: 'VulnManage/uploadVulnRetestFile/'
,type: "POST"
,data: joinFormData
,async : false
,contentType: false //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
,processData: false //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
,error : function(request) {
parent.layer.alert("网络超时");
}
,success: function (data) {
if (data.code == "0"){
layer.alert(data.msg,{
icon:1
,title:'提示'
});
}else(
layer.alert(data.msg,{
icon:2
,title:'提示'
})
);
}
});
return false;
});
//头工具栏事件
table.on('toolbar(currentTableFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
{#case 'addVulnData':#}
{# var data = checkStatus.data;#}
{# layer.alert("addVulnData");#}
{# break;#}
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
// 监听头工具删除操作 请确认是否全部删除
case 'deleteAll':
layer.alert("请确认是否全部删除",{
icon: 7
,title: '提示'
,btn: ['全部删除', '取消']
,shadeClose: true
,shade: 0 //遮罩透明度
,yes:function(index, layero){
$.post('/VulnManage/deleteTroubleall/',{
deleteAll: "yes"
},function(data){
//根据后台返回的参数，来进行判断
if(data == "success"){
layer.alert('全部删除成功',{
icon:1
,title:'提示'
,yes:function (data) {
window.parent.location.reload(); //刷新父页面
}
},function(i){
layer.close(i);
layer.close(index);//关闭弹出层
{#$("#book")[0].reset()//重置form#}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
});
}
});
}
,btn2: function(index, layero){
layer.close(index);//关闭弹出层
}
});
break;
// 监听头工具初始化操作 请确认是否初始化
case 'initAll':
layer.alert("请确认是否初始化",{
icon: 3
,title: '提示'
,btn: ['初始化', '取消']
,shadeClose: true
,shade: 0 //遮罩透明度
,yes:function(index, layero){
$.post('/VulnManage/initTroubleAll/',{
init: "yes"
},function(data){
//根据后台返回的参数，来进行判断
if(data == "success"){
layer.alert('初始化成功',{
icon:1
,title:'提示'
,yes:function (data) {
window.parent.location.reload(); //刷新父页面
}
},function(i){
layer.close(i);
layer.close(index);//关闭弹出层
{#$("#book")[0].reset()//重置form#}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
});
}else{
layer.alert(data,{
icon:2
,title:'提示'
,yes:function (data) {
window.parent.location.reload(); //刷新父页面
}
},function(i){
layer.close(i);
layer.close(index);//关闭弹出层
{#$("#book")[0].reset()//重置form#}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
});
}
});
}
,btn2: function(index, layero){
layer.close(index);//关闭弹出层
}
});
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
}
});
//监听行工具事件 查看资产信息
table.on('tool(currentTableFilter)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据（json格式的键值对）
//监听行工具事件 删除
if(obj.event === 'del'){
{#layer.msg('domainName：'+ data.domainName + ' 的删除操作');#}
obj.del();
{#layer.close(index);#}
layer.confirm('您确定要删除该漏洞吗?',{btn: ['确定', '取消'],icon:7,title:"提示"}, function(){
$.post('/VulnManage/deletevulnforline/',{
delete: "yes"
,vulnDomain: data.vulnDomain
,vulnNoticeFileId: data.vulnNoticeFileId
,vulnNoticeFileName: data.vulnNoticeFileName
},function(data){
//根据后台返回的参数，来进行判断
if(data == "success"){
layer.alert('删除成功',{
icon:1
,title:'提示'
},function(i){
layer.close(i);
layer.close(index);//关闭弹出层
{#$("#currentTableId")[0].reset()//重置form#}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
});
window.parent.location.reload(); //刷新父页面
}
});
});
}
//监听行工具事件 编辑
else if(obj.event === 'edit' || obj.event === 'detail'){
{#$("[name='a']").val("456");#}
{#layer.msg('domainName：'+ obj.data.domainName + ' 的编辑操作');#}
layer.open({
{#,btn: ['立即修改', '取消']#}
type: 1 //Page层类型
,skin: 'layui-layer-molv'
,scrollbar: true
, area: ['auto']
,maxHeight: "400px"
{#,area: ['300', '300']#}
,closeBtn: 1 //显示关闭按钮
,title: ['修改漏洞信息','font-size:16px']
,shadeClose: true
,shade: 0 //遮罩透明度
{#,fixed:true#}
{#,top:300#}
,offset:"70px"
,maxmin: true //允许全屏最小化
,content:$("#viewVulnOpenFormId") //弹窗路径
,success:function(layero){
var btn = layero.find('.layui-layer-btn');
btn.css('text-align', 'center');
{#var btn = layero.find('.layui-layer-btn');#}
{#btn.css('text-align', 'center');#}
{#$('#vulnNoticeFileIdOpenFormId').val(data.vulnNoticeFileId);#}
$('#vulnNoticeFileIdOpenFormId').val(data.vulnNoticeFileId.match(/\d+/g)[0]);
$('#vulnDomainOpenFormId').val(data.vulnDomain);
$('#vulnTypeOpenFormId').val(data.vulnType);
$('#vulnLevelOpenFormId').val(data.vulnLevel);
$('#vulnTestNameOpenFormId').val(data.vulnTestName);
$('#vulnCountOpenFormId').val(data.vulnCount);
$('#vulnSystemNameOpenFormId').val(data.vulnSystemName);
$('#vulnNoticeFileNameOpenFormId').val(data.vulnNoticeFileName);
$('#vulnDetailOpenFormId').val(data.vulnDetail);
{#$('#systemStatusOpenId').val(data.systemStatus);#}
{#$('#extranetAccessOpenId').val(data.extranetAccess);#}
{#$('#systemStatusOpenId').removeAttr("checked");#}
{#$('#systemStatusOpenId').prop('checked', false);#}
{#layer.alert(data.extranetAccess);#}
if (data.vulnIsNotice == "on") {
$("#vulnIsNoticeOpenFormId").attr("checked", true);
} else if (data.vulnIsNotice == "已下线") {
$("#vulnIsNoticeOpenFormId").attr("checked", false);
};
if (data.vulnIsFeedback == "on") {
$("#vulnIsFeedbackOpenFormId").attr("checked", true);
} else if (data.vulnIsFeedback == "本地访问") {
$("#vulnIsFeedbackOpenFormId").attr("checked", false);
};
if (data.vulnIsRetest == "on") {
$("#vulnIsRetestOpenFormId").attr("checked", true);
} else if (data.vulnIsRetest == "本地访问") {
$("#vulnIsRetestOpenFormId").attr("checked", false);
};
if (data.vulnIsEepair == "on") {
$("#vulnIsEepairOpenFormId").attr("checked", true);
{#$("[name=vulnIsEepairOpenForm]:checkbox").attr("checked",true);#}
} else if (data.vulnIsEepair == "本地访问") {
$("#vulnIsEepairOpenFormId").attr("checked", false);
}
{#$('#vulnTypeOpenFormId').val(data.vulnType);#}
{#data.vulnType = "用户名遍历漏洞,任意文件上传漏洞,支付逻辑漏洞";#}
{#if(data.vulnType != ""){#}
{# data.vulnType.forEach(function(e){#}
{# $("[name=" + e + "]:checkbox").attr("checked", true);}#}
{# );}#}
{#$.each(data.vulnType.split(","), function (index, obj) {#}
{# $("[name=" + obj + "]:checkbox").attr("checked", true);});#}
form.render();
{#$("#systemStatusOpenId").attr("checked",false);#}
{#$("#extranetAccessOpenId").attr("checked",false);#}
{#$("#extranetAccessOpenId").attr("checked",false);#}
{#$("[name=systemStatusOpen]:checkbox").attr("checked",false);#}
{#$("[name=systemStatusOpen]:checkbox").prop("checked",false);#}
{#$('input[name=cnvdServerity]').attr('value', data.cnvdServerity);#}
{#document.getElementById('cnvdServerity').value=data.cnvdServerity;#}
{#$('#cveUrlId') = data.cveUrl;#}
{## 刷新页面, 否则不显示#}
{#form.val('myFormFilter', {#}
{# "developmentCompany": $('#developmentCompanyOpenId').val() })#}
},yes:function(i){
layer.close(i);
layer.close(index);//关闭弹出层
{#$("#book")[0].reset()//重置form#}
table.reload('currentTableId', {//重载表格
page: {
curr: 1
}
})
}
})
}else
//下发通知单开关
if(obj.event === "switchVlnIsNoticeOpenformEvent" ){
layer.alert("是否修改通知单下发情况",{
icon:3
,btn: ["修改", "取消"]
,title:'提示'
,yes: function (index) {
$.post('/VulnManage/editvulnisnotice/',{
vulnNoticeFileId: obj.data.vulnNoticeFileId
,vulnIsNotice: obj.data.vulnIsNotice
},function(data){
//根据后台返回的参数，来进行判断
if(data.status == "on"){
layer.alert("修改为: 已下发通知单",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
layer.closeAll()
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
})
}else if(data.status == "off"){
layer.alert("修改为: 未下发通知单",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
layer.closeAll()
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
})
} else{
layer.alert('修改失败',{
icon:2
,title:'提示'
});
}
});
}
,btn2: function (index) {
window.parent.location.reload(); //刷新父页面
}
})
}else
//收到反馈开关
if(obj.event === "switchVlnIsFeedbackOpenformEvent" ){
layer.alert("是否修改反馈情况",{
icon:3
,btn: ["修改", "取消"]
,title:'提示'
,yes: function (index) {
$.post('/VulnManage/editvulnisfeeedback/',{
vulnNoticeFileId: obj.data.vulnNoticeFileId
,vulnIsFeedback: obj.data.vulnIsFeedback
},function(data){
//根据后台返回的参数，来进行判断
if(data.status == "on"){
layer.alert("修改为: 已收到反馈单",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
layer.closeAll()
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
})
}else if(data.status == "off"){
layer.alert("修改为: 未收到反馈单",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
layer.closeAll()
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
})
} else{
layer.alert('修改失败',{
icon:2
,title:'提示'
});
}
});
}
,btn2: function (index) {
window.parent.location.reload(); //刷新父页面
}
})
}else
//完成复测报告
if(obj.event === "switchVlnIsRetestOpenformEvent" ){
layer.alert("是否修改复测情况",{
icon:3
,btn: ["修改", "取消"]
,title:'提示'
,yes: function (index) {
$.post('/VulnManage/editvulnisretest/',{
vulnNoticeFileId: obj.data.vulnNoticeFileId
,vulnIsRetest: obj.data.vulnIsRetest
},function(data){
//根据后台返回的参数，来进行判断
if(data.status == "on"){
layer.alert("修改为: 已完成复测",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
layer.closeAll()
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
})
}else if(data.status == "off"){
layer.alert("修改为: 未完成复测",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
layer.closeAll()
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
})
} else{
layer.alert('修改失败',{
icon:2
,title:'提示'
});
}
});
}
,btn2: function (index) {
window.parent.location.reload(); //刷新父页面
}
})
}
else
//漏洞修复开关
if(obj.event === "switchVlnIsRepireOpenformEvent" ){
layer.alert("是否修漏洞修复情况",{
icon:3
,btn: ["修改", "取消"]
,title:'提示'
,yes: function (index) {
$.post('/VulnManage/editvulnisrepire/',{
vulnNoticeFileId: obj.data.vulnNoticeFileId
,vulnIsEepair: obj.data.vulnIsEepair
},function(data){
//根据后台返回的参数，来进行判断
if(data.status == "on"){
layer.alert("修改为: 已完成修复",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
layer.closeAll();
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
})
}else if(data.status == "off"){
layer.alert("修改为: 未完成修复",{
icon:1
,title:'提示'
,yes: function(index, layero){
layer.close(index);
layer.closeAll()
window.parent.location.reload(); //刷新父页面
{#window.location = ("/#/VulnManage/vulnlist/");#}
}
});
table.reload('currentTableId',{//重载表格
page:{
curr:1
}
})
} else{
layer.alert('修改失败',{
icon:2
,title:'提示'
});
}
});
}
,btn2: function (index) {
window.parent.location.reload(); //刷新父页面
}
})
}
else
//下载通知单WORD
if(obj.event === "getVulnNoticeWordPathEvent" ){
{#layer.alert("123456");#}
{#alert(data.reportPath);#}
var vulnNoticeWordPath = data.vulnNoticeWordPath;
if(vulnNoticeWordPath !== null){
downloadReportPathFileByForm(vulnNoticeWordPath);
}
function downloadReportPathFileByForm(data) {
//此处data是需要传递的数据
var url = "/VulnManage/downloadVulnNoticeWordPath/"; //提交数据和下载地址
var form = $("<form></form>").attr("action", url).attr("method", "post");
//将数据赋值给Input进行form表单提交数据
form.append($("<input></input>").attr("type", "hidden").attr("name", "vulnNoticeWordPath").attr("value", data));
form.appendTo('body').submit().remove(); //模拟提交
}
}
else
//下载通知单PDF
if(obj.event === "getVulnNoticePdfPathEvent" ){
{#layer.alert("123456");#}
{#alert(data.reportPath);#}
var vulnNoticePdfPath = data.vulnNoticePdfPath;
if(vulnNoticePdfPath !== null){
downloadReportPathFileByForm(vulnNoticePdfPath);
}
function downloadReportPathFileByForm(data) {
//此处data是需要传递的数据
var url = "/VulnManage/downloadVulnNoticePdfPath/"; //提交数据和下载地址
var form = $("<form></form>").attr("action", url).attr("method", "post");
//将数据赋值给Input进行form表单提交数据
form.append($("<input></input>").attr("type", "hidden").attr("name", "vulnNoticePdfPath").attr("value", data));
form.appendTo('body').submit().remove(); //模拟提交
}
}
else
//下载反馈单
if(obj.event === "getVulnFeedbackPathEvent" ){
{#layer.alert("123456");#}
{#alert(data.reportPath);#}
var vulnFeedbackPath = data.vulnFeedbackPath;
if(vulnFeedbackPath !== null){
downloadReportPathFileByForm(vulnFeedbackPath);
}
function downloadReportPathFileByForm(data) {
//此处data是需要传递的数据
var url = "/VulnManage/downloadVulnFeedbackPath/"; //提交数据和下载地址
var form = $("<form></form>").attr("action", url).attr("method", "post");
//将数据赋值给Input进行form表单提交数据
form.append($("<input></input>").attr("type", "hidden").attr("name", "vulnFeedbackPath").attr("value", data));
form.appendTo('body').submit().remove(); //模拟提交
}
}
else
//下载复测报告
if(obj.event === "getVulnRetestPathEvent" ){
{#layer.alert("123456");#}
{#alert(data.reportPath);#}
var vulnRetestPath = data.vulnRetestPath;
if(vulnRetestPath !== null){
downloadReportPathFileByForm(vulnRetestPath);
}
function downloadReportPathFileByForm(data) {
//此处data是需要传递的数据
var url = "/VulnManage/downloadVulnRetestPath/"; //提交数据和下载地址
var form = $("<form></form>").attr("action", url).attr("method", "post");
//将数据赋值给Input进行form表单提交数据
form.append($("<input></input>").attr("type", "hidden").attr("name", "vulnRetestPath").attr("value", data));
form.appendTo('body').submit().remove(); //模拟提交
}
}
});
// 监听添加漏洞取消
form.on('submit(addcancleFilter)', function (data) {
{#//获取checkbox[name='like1']的值#}
{#var arr = new Array();#}
{#$("input:checkbox[name='vulnName']:checked").each(function(i){#}
{# arr[i] = $(this).val(); });#}
{#data.field.like = arr.join(",");//将数组合并成字符串#}
layer.closeAll();
window.parent.location.reload(); //刷新父页面
return false;
});
});
</script>
扫一扫
757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
