第一张表格的结构
第二章表格的结构
所需要得到的页面展示效果
原本的sql: select asset.name,device_type.name,asset.ip from asset LEFT JOIN device_type on asset.type=device_type where asset.type=device_type.type
由于需要得到两个表相同字段的内容,可以采用前端分析展示
更改后的sql:
SELECT name,type,ip FROM asset
JS部分
var pageCurr;
var form;
$(function () {
layui.use('table', function () {
var table = layui.table;
form = layui.form;
tableIns = table.render({
elem: '#getMonitor',
url: '/home/findMonitor',
method: 'get', //默认:get请求
cellMinWidth: 80,
page: true,
request: {
pageName: 'pageNum', //页码的参数名称,默认:pageNum
limitName: 'pageSize' //每页数据量的参数名,默认:pageSize
},
// parseData:function (res){
// console.log(res);
// return{
// "code":0,
// "msg":"",
// "count":1000,
// "data":res
// }
// },
response:{
statusName: 'code', //数据状态的字段名称,默认:code
statusCode: 200, //成功的状态码,默认:0
countName: 'totals', //数据总数的字段名称,默认:count
dataName: 'list' //数据列表的字段名称,默认:data
},
cols: [[
{field: 'name', title: '设备名称', align: 'center'}
, {field: 'type', title: '设备类型', align: 'center'}
, {field: 'ip', title: '设备IP', align: 'center'}
]],
done: function (res, count) {
$("[data-field='level']").children().each(function () {
if ($(this).text() == '紧急') {
$(this).val('紧急').css("color", '#FF0000')
} else if ($(this).text() == '重要') {
$(this).val('重要').css("color", '#FF4500')
} else if ($(this).text() == '次要') {
$(this).val('次要').css("color", '#FF7F50')
} else if ($(this).text() == '一般') {
$(this).val('一般').css("color", '#FFA07A')
} else if ($(this).text() == '告知') {
$(this).val('告知').css("color", '#FFFF00')
}
});
$("[data-field='type']").children().each(function () {
if ($(this).text() == 'DCD') {
$(this).text('网络安全监测装置')
} else if ($(this).text() == 'DB') {
$(this).text('数据库')
} else if ($(this).text() == 'IDS') {
$(this).text('入侵检测系统')
} else if ($(this).text() == 'AV') {
$(this).text('防病毒系统')
} else if ($(this).text() == 'VEAD') {
$(this).text('纵向加密装置')
} else if ($(this).text() == 'SW') {
$(this).text('交换机')
} else if ($(this).text() == 'SVR') {
$(this).text('服务器')
} else if ($(this).text() == 'BID') {
$(this).text('横向方向隔离装置')
} else if ($(this).text() == 'FID') {
$(this).text('横向正向隔离装置')
} else if ($(this).text() == 'FW') {
$(this).text('防火墙')
}
});
}
});
})
})
function replaceDoc()
{
$(function () {
layui.use('table', function () {
var table = layui.table;
form = layui.form;
tableIns = table.render({
elem: '#getMonitor',
url: '/home/findMonitor',
method: 'get', //默认:get请求
cellMinWidth: 80,
page: true,
request: {
pageName: 'pageNum', //页码的参数名称,默认:pageNum
limitName: 'pageSize' //每页数据量的参数名,默认:pageSize
},
// parseData:function (res){
// console.log(res);
// return{
// "code":0,
// "msg":"",
// "count":1000,
// "data":res
// }
// },
response:{
statusName: 'code', //数据状态的字段名称,默认:code
statusCode: 200, //成功的状态码,默认:0
countName: 'totals', //数据总数的字段名称,默认:count
dataName: 'list' //数据列表的字段名称,默认:data
},
cols: [[
{field: 'name', title: '设备名称', align: 'center'}
, {field: 'type', title: '设备类型', align: 'center'}
, {field: 'ip', title: '设备IP', align: 'center'}
]],
done: function (res, count) {
$("[data-field='level']").children().each(function () {
if ($(this).text() == '紧急') {
$(this).val('紧急').css("color", '#FF0000')
} else if ($(this).text() == '重要') {
$(this).val('重要').css("color", '#FF4500')
} else if ($(this).text() == '次要') {
$(this).val('次要').css("color", '#FF7F50')
} else if ($(this).text() == '一般') {
$(this).val('一般').css("color", '#FFA07A')
} else if ($(this).text() == '告知') {
$(this).val('告知').css("color", '#FFFF00')
}
});
$("[data-field='type']").children().each(function () {
if ($(this).text() == 'DCD') {
$(this).text('网络安全监测装置')
} else if ($(this).text() == 'DB') {
$(this).text('数据库')
} else if ($(this).text() == 'IDS') {
$(this).text('入侵检测系统')
} else if ($(this).text() == 'AV') {
$(this).text('防病毒系统')
} else if ($(this).text() == 'VEAD') {
$(this).text('纵向加密装置')
} else if ($(this).text() == 'SW') {
$(this).text('交换机')
} else if ($(this).text() == 'SVR') {
$(this).text('服务器')
} else if ($(this).text() == 'BID') {
$(this).text('横向方向隔离装置')
} else if ($(this).text() == 'FID') {
$(this).text('横向正向隔离装置')
} else if ($(this).text() == 'FW') {
$(this).text('防火墙')
}
});
}
// done: function(res, curr, count){
// $("[data-field='pname']").children().each(function(){
// if($(this).text()==''){
// $(this).text("根目录");
// }else {
// $(this).text($(this).text());
// }
// });
// pageCurr=curr;
//
// }
});
})
})
}
HTML部分
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="layout :: htmlhead" th:with="title='用户管理'"></head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!--头-->
<div th:replace="fragments/head :: header"></div>
<div class="layui-body" style="margin: 1%">
<form id="userSearch" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
<div class="layui-font-20">选择设备资产
<button type="button" class="layui-btn layui-btn-sm" onclick="replaceDoc()" style="float: right">刷新</button></div>
<table id="getMonitor" lay-filter="userTable" style="height: 20px" ></table>
</form>
<select name="city" lay-verify="">
<option value="">网络连接白名单</option>
<option value="010">服务端口白名单</option>
<option value="021">关键文件/目录清单</option>
<option value="0571">存在光驱设备检测周期</option>
<option value="0571">非法端口检测周期</option>
<option value="0571">危险操作命令清单</option>
</select>
<table id="whitel" lay-filter="userTable" ></table>
</div>
<!--底部-->
<div th:replace="fragments/footer :: footer"></div>
<!-- <script src="/js/dateUtils.js"></script>-->
<script src="/js/getMonitor.js"></script>
<script src="/js/whitelist.js"></script>
</div>
</body>
</html>
版权声明:本文为weixin_60265082原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。