<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
#add_main .layui-block,
#modify_main .layui-block {
margin: 15px 30px 0 0
}
</style>
<body>
<div class="layui-panel" style="margin: 10px; padding: 10px;">
<div class="layui-form" lay-filter="search_form">
<div class="layui-form-item" width="">
<div class="layui-inline">
<label class="layui-form-label">服务器</label>
<div class="layui-input-block">
<select name="servers" lay-verify="required">
<option value="请选择"></option>
<option value="AP">AP</option>
<option value="SERVER">SERVER</option>
<option value="DB/SERVER">DB/SRTVER</option>
<option value="OTHER">OTHER</option>
<option value="DB">DB</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">设备:</label>
<div class="layui-input-block">
<input type="text" name="device" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">IP:</label>
<div class="layui-input-block">
<input type="text" name="ip" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-left: 60px;">
<button type="button" class="layui-btn layui-btn-sm" id="search_btn" lay-filter='search_btn'>
<i class="layui-icon layui-icon-search"> 查询</i>
</button>
<button type="button" class="layui-btn layui-btn-sm" id="add_btn" layui-filter="add_btn">
<i class="layui-icon layui-icon-add-circle"> 添加</i>
</button>
</div>
</div>
</div>
<!-- 表格 -->
<div class="layui-panel" style="margin: 10px; padding: 10px;">
<table class="layui-hide" id="info_table" lay-filter="info_table"></table>
<script type="text/html" id="barDemo">
<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>
</div>
<!-- 添加弹出层模板 -->
<div id="add_main" style="display: none;">
<form class="layui-form" lay-filter="add_form">
<div class="layui-form-item">
<div class="layui-block">
<label class="layui-form-label">服务器</label>
<div class="layui-input-block">
<select name="servers" lay-verify="required">
<option value="请选择"></option>
<option value="AP">AP</option>
<option value="SERVER">SERVER</option>
<option value="DB/SERVER">DB/SRTVER</option>
<option value="OTHER">OTHER</option>
<option value="DB">DB</option>
</select>
</div>
</div>
<div class="layui-block">
<label class="layui-form-label">设备:</label>
<div class="layui-input-block">
<input type="text" name="device" placeholder="" autocomplete="off" class="layui-input" required
lay-verify="required">
</div>
</div>
<div class="layui-block">
<label class="layui-form-label">IP:</label>
<div class="layui-input-block">
<input type="text" name="ip" autocomplete="off" class="layui-input" required
lay-verify="required">
</div>
</div>
<div class="layui-block">
<label class="layui-form-label">说明</label>
<div class="layui-input-block">
<input type="text" name="explain" autocomplete="off" class="layui-input" required
lay-verify="required">
</div>
</div>
<div class="layui-block">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<input type="text" name="description" autocomplete="off" class="layui-input" required
lay-verify="required">
</div>
</div>
<div class="layui-form-item" style="margin-top:40px">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="submit_add">添加</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
</div>
<!-- 修改弹出层模板 -->
<div id="modify_main" style="display: none;">
<form class="layui-form" lay-filter="modify_form">
<div class="layui-form-item">
<div class="layui-block">
<label class="layui-form-label">服务器</label>
<div class="layui-input-block">
<select name="servers" lay-verify="required">
<option value="请选择"></option>
<option value="AP">AP</option>
<option value="SERVER">SERVER</option>
<option value="DB/SERVER">DB/SRTVER</option>
<option value="OTHER">OTHER</option>
<option value="DB">DB</option>
</select>
</div>
</div>
<div class="layui-block">
<label class="layui-form-label">设备:</label>
<div class="layui-input-block">
<input type="text" id="device" name="device" placeholder="" autocomplete="off"
class="layui-input" required lay-verify="required">
</div>
</div>
<div class="layui-block">
<label class="layui-form-label">IP:</label>
<div class="layui-input-block">
<input type="text" id="ip" name="ip" autocomplete="off" class="layui-input" required
lay-verify="required">
</div>
</div>
<div class="layui-block">
<label class="layui-form-label">说明</label>
<div class="layui-input-block">
<input type="text" id="explain" name="explain" autocomplete="off" class="layui-input" required
lay-verify="required">
</div>
</div>
<div class="layui-block">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<input type="text" id="description" name="description" autocomplete="off" class="layui-input"
required lay-verify="required">
</div>
</div>
<div class="layui-form-item" style="margin-top:40px">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="submit_modify">修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
</div>
<script src="./layui/layui.js"></script>
<script>
// 表单相关操作
layui.use(['form', 'layer'], function () {
var form = layui.form,
$ = layui.jquery,
layer = layui.layer
$('#add_btn').click(function () {
layer.open({
type: 1
, title: "添加资料"
//, area: ['50%','50%']
, shade: 0.8
, content: $('#add_main')
, success: function (layero, index) {
}
});
// 添加资料
form.on('submit(submit_add)', function (data) {
// 这里发送添加请求
alert(data)
})
})
});
// 表格相关操作
layui.use(['table', 'form'], function () {
var table = layui.table,
form = layui.form
table.render({
elem: '#info_table'
, url: './table.json'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度
, toolbar: '0'
, defaultToolbar: ['filter', 'exports', 'print']
, page: true
, cols: [[
{ type: 'numbers' }
, { field: 'servers', title: '服务器', sort: true }
, { field: 'device', title: '设备' }
, { field: 'ip', title: 'IP', sort: true }
, { field: 'explain', title: '说明' }
, { field: 'description', title: '描述', minWidth: 100 }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
});
//监听行工具事件
table.on('tool(info_table)', function (obj) {
var data = obj.data;
console.log(obj)
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
// 把当前行的值赋给表单
$("#device").val(data.device);
$("#ip").val(data.ip);
$("#explain").val(data.explain);
$("#description").val(data.description);
layer.open({
type: 1
, title: "修改资料"
, shade: 0.8
, id: 'modify_formPop'
, content: $('#modify_main')
, success: function (layero, index) {
}
})
form.on('submit(submit_modify)', function (data) {
alert(data);
// 这里发送修改请求
})
}
});
});
/**
* 获取表单数据
* @param {*} filter lay-filter属性值
* @param {*} itemForm dom对象
*/
function getFormData(filter, itemForm) {
itemForm = itemForm || $('.layui-form[lay-filter="' + filter + '"]').eq(0)
var nameIndex = {} //数组 name 索引
, field = {}
, fieldElem = itemForm.find('input,select,textarea') //获取所有表单域
layui.each(fieldElem, function (_, item) {
item.name = (item.name || '').replace(/^\s*|\s*&/, '')
if (!item.name) return
//用于支持数组 name
if (/^.*\[\]$/.test(item.name)) {
var key = item.name.match(/^(.*)\[\]$/g)[0]
nameIndex[key] = nameIndex[key] | 0
item.name = item.name.replace(/^(.*)\[\]$/, '$1[' + (nameIndex[key]++) + ']')
}
if (/^checkbox|radio$/.test(item.type) && !item.checked) return
field[item.name] = item.value
})
return field
};
</script>
</body>
</html>
|