<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>SearchIP</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<!--<link rel="stylesheet" href="./layui/css/layui.css" media="all">-->
|
<link rel="stylesheet" href="/layui/css/layui.css">
|
<script src="/layui/layui.js"></script>
|
</head>
|
<body>
|
<div style="text-align: center;">
|
</div>
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
<legend style="font-size: 28px;">搜索IP</legend>
|
</fieldset>
|
<form class="layui-form" action="" style="margin:0px auto;">
|
<div class="layui-form-item" style="">
|
<label class="layui-form-label"></label>
|
<div class="layui-input-inline"><input id="search" type="text" name="ip" required lay-verify="required"
|
placeholder="请输入IP" autocomplete="off" class="layui-input"
|
style="width: 188px;"></div>
|
<button class="layui-btn" lay-submit lay-filter="formSearch">搜索</button>
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
</div>
|
</form>
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
</fieldset>
|
<table class="layui-hide" id="searchIP" lay-filter="table"></table>
|
<!--<script src="./layui/layui.js" charset="utf-8"></script>-->
|
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
|
<script>
|
layui.use(['form', 'layer', 'table', 'laytpl',], function () {
|
var form = layui.form,
|
layer = parent.layer === undefined ? layui.layer : parent.layer,
|
table = layui.table
|
var tableIns;//表格实例
|
/**
|
* 定义表格
|
* */
|
function defineTable() {
|
tableIns = table.render({
|
elem: '#searchIP'
|
, height: 'full-200'
|
, url: 'http://127.0.0.1:8088/api/selectInfo' //数据接口
|
, method: 'Get'
|
, contentType: "application/x-www-form-urlencoded"
|
// ,xhrFields: {withCredentials: false}
|
// , page: true //开启分页
|
, cols: [
|
[ //表头
|
{checkbox: true, fixed: true}
|
, {field: 'authorizeType', title: '权限分类', width: 400, templet: '#permissionNaming'}
|
, {field: 'groupName', title: '组名称', width: 400}
|
, {field: 'userName', title: '负责人', width: 400}
|
, {field: 'userList', title: '同行人员', width: 666, templet: '#permissionLevel'}
|
]
|
]
|
, done: function (res, curr) {//请求完毕后的回调
|
//如果是异步请求数据方式，res即为你接口返回的信息.curr：当前页码
|
}
|
});
|
}
|
|
defineTable();
|
|
form.on('submit(formDemo)', function (data) {
|
layer.msg(JSON.stringify(data.field));
|
return false;
|
});
|
|
//查询
|
form.on("submit(formSearch)", function (data) {
|
var ip = data.field.ip;
|
//表格重新加载
|
tableIns.reload({
|
where: {
|
ip: ip,
|
}
|
});
|
return false;
|
});
|
})
|
</script>
|
<script type="text/html" id="permissionNaming">
|
{{# if(d.authorizeType == '0'){d.authorizeType = '组授权'}}
|
<span style="color: #2f2f2f;">{{d.authorizeType}}</span>
|
{{# } else {d.authorizeType = '临时授权'}}
|
{{d.authorizeType}}
|
{{# } }}
|
</script>
|
<!--<script type="text/html" id="permissionLevel">-->
|
<!-- {{# if(d.level == '0'){d.level = '同行人员'}}-->
|
<!-- <span style="color: #2f2f2f;">{{d.level}}</span>-->
|
<!-- {{# } else {d.level = '负责人'}}-->
|
<!-- {{d.level}}-->
|
<!-- {{# } }}-->
|
<!--</script>-->
|
</body>
|
</html>
|
