效果如下
代碼實作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>帖子類別</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="https://www.cnblogs.com/fxsen/p/${request.contextPath}/static/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="https://www.cnblogs.com/fxsen/p/${request.contextPath}/static/css/public.css" media="all">
<link rel="stylesheet" href="https://www.cnblogs.com/fxsen/p/${request.contextPath}/static/lib/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="https://www.cnblogs.com/fxsen/p/${request.contextPath}/static/lib/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<div >
<div >
<!-- 左樹 -->
<div >
<div >
<div id="ltTree">
</div>
</div>
</div>
<!-- 右表 -->
<div >
<div >
<div >
<fieldset >
<legend>搜索資訊</legend>
<div style="margin: 10px 10px 10px 10px">
<form action="">
<div >
<div >
<label >姓名</label>
<div >
<input type="text" name="keyword" autocomplete="off" >
</div>
</div>
<div >
<label >性別</label>
<div >
<select name="gender" lay-filter="aihao">
<option value="" selected=""></option>
<option value="https://www.cnblogs.com/fxsen/p/0">男</option>
<option value="https://www.cnblogs.com/fxsen/p/1">女</option>
</select>
</div>
</div>
<div >
<label >是否驅蟲</label>
<div >
<select name="expellingParasite" lay-filter="aihao">
<option value="" selected=""></option>
<option value="https://www.cnblogs.com/fxsen/p/0">是</option>
<option value="https://www.cnblogs.com/fxsen/p/1">否</option>
</select>
</div>
</div>
<div >
<label >是否絕育</label>
<div >
<select name="sterilization" lay-filter="aihao">
<option value="" selected=""></option>
<option value="https://www.cnblogs.com/fxsen/p/0">是</option>
<option value="https://www.cnblogs.com/fxsen/p/1">否</option>
</select>
</div>
</div>
<div >
<label >是否接種疫苗</label>
<div >
<select name="vaccination" lay-filter="aihao">
<option value="" selected=""></option>
<option value="https://www.cnblogs.com/fxsen/p/0">是</option>
<option value="https://www.cnblogs.com/fxsen/p/1">否</option>
</select>
</div>
</div>
<div >
<label >資料來源</label>
<div >
<select name="source" lay-filter="aihao">
<option value="" selected=""></option>
<option value="https://www.cnblogs.com/fxsen/p/0">系統錄入</option>
<option value="https://www.cnblogs.com/fxsen/p/1">用戶發布</option>
</select>
</div>
</div>
<div >
<label >審核狀態</label>
<div >
<select name="status" lay-filter="aihao">
<option value="" selected=""></option>
<option value="https://www.cnblogs.com/fxsen/p/0">未審核</option>
<option value="https://www.cnblogs.com/fxsen/p/1">已審核</option>
</select>
</div>
</div>
<div >
<button type="submit" lay-submit lay-filter="data-search-btn"><i ></i> 搜 索</button>
</div>
</div>
</form>
</div>
</fieldset>
<script type="text/html" id="toolbarDemo">
<div >
<button lay-event="add"> 添加 </button>
</div>
</script>
<table id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a lay-event="edit">編輯</a>
<a lay-event="delete">洗掉</a>
</script>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.cnblogs.com/fxsen/p/${request.contextPath}/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
layui.extend({
dtree: '${request.contextPath}/static/lib/layui_ext/dtree/dtree' // {/}的意思即代表采用自有路徑，即不跟隨 base 路徑
}).use(['layer', 'form', 'table', 'util', 'dtree'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var util = layui.util;
var dtree = layui.dtree;
var s_categoryId;
function tableRender(categoryId){
s_categoryId = categoryId;
table.render({
elem: '#currentTableId',
url: '${request.contextPath}/petInfo/listData',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{field: 'categoryName', width: 126, title: '寵物分類'},
{field: 'breed', width: 126, title: '寵物品種'},
{field: 'name', width: 126, title: '寵物姓名'},
{field: 'gender', width: 126, title: '寵物性別',templet: function (d){
if (d.gender === 0){
return "<span>男</span>";
}else {
return "<span>女</span>";
}
}},
{field: 'age', width: 126, title: '寵物年齡'},
{field: 'weight', width: 126, title: '寵物體重'},
{field: 'furColor', width: 126, title: '寵物毛色'},
{field: 'expellingParasite', width: 126, title: '是否驅蟲',templet: function (d){
if (d.expellingParasite === 0){
return "<span>是</span>";
}else {
return "<span>否</span>";
}
}},
{field: 'sterilization', width: 126, title: '是否絕育',templet: function (d){
if (d.sterilization === 0){
return "<span>是</span>";
}else {
return "<span>否</span>";
}
}},
{field: 'vaccination', width: 126, title: '是否接種疫苗',templet: function (d){
if (d.vaccination === 0){
return "<span>是</span>";
}else {
return "<span>否</span>";
}
}},
{field: 'source', width: 126, title: '資料來源',templet: function (d){
if (d.expellingParasite === 0){
return "<span>系統錄入</span>";
}else {
return "<span>用戶發布</span>";
}
}},
{title: '操作', width: 126, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'row,line',
where: {categoryId:categoryId}
});
}
// 監聽搜索操作
form.on('submit(data-search-btn)', function (data) {
//執行搜索多載
table.reload('currentTableId', {
page: {
curr: 1
}
, where: {
keyword: data.field.keyword,
categoryId:s_categoryId,
gender:data.field.gender,
expellingParasite:data.field.expellingParasite,
sterilization:data.field.sterilization,
vaccination:data.field.vaccination,
source:data.field.source,
status:data.field.status
}
}, 'data');
return false;
});
/**
* toolbar監聽事件
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 監聽添加操作
var index = layer.open({
title: '添加寵物',
type: 2,
shade: 0.2,
maxmin:false,
shadeClose: true,
area: ['800px', '100%'],
content: '${request.contextPath}/petInfo/add',
//通過end回呼
end: function(){
table.reload('currentTableId');
}
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 監聽洗掉操作
var checkStatus = table.checkStatus('currentTableId')
, data = https://www.cnblogs.com/fxsen/p/checkStatus.data;
layer.alert(JSON.stringify(data));
}
});
table.on('tool(currentTableFilter)', function (obj) {
var data = https://www.cnblogs.com/fxsen/p/obj.data;
if (obj.event ==='edit') {
var index = layer.open({
title: '編輯寵物',
type: 2,
shade: 0.2,
maxmin:false,
shadeClose: true,
area: ['800px', '100%'],
content: '${request.contextPath}/petInfo/edit?id='+data.id,
//通過end回呼
end: function(){
table.reload('currentTableId');
}
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'delete') {
layer.confirm('真的洗掉么', function (index) {
layer.close(index);
$.ajax({
type : "get",
url : "${request.contextPath}/petInfo/delete?id="+data.id,
async : false,
success : function(result){
if (result.success){
var d_index = layer.alert("洗掉成功", {
title: '提示'
}, function () {
// 關閉彈出層
layer.close(d_index);
table.reload('currentTableId');
});
}else{
layer.alert(result.msg,{icon: 2});
}
}
});
});
}
});
// 初始化樹
var DemoTree = dtree.render({
elem: "#ltTree",
method: 'GET',
url: "${request.contextPath}/petCategory/listAll", // 使用url加載（可與data加載同時存在）
toolbar: true, //更多工具列用法詳見工具列
toolbarWay:"fixed",
toolbarShow: []
, done: function (data, url, first) {
//默認選中第一個
var dTreeid = $("cite").attr("data-id");
dtree.click(DemoTree, dTreeid);
tableRender(dTreeid);
},
toolbarFun:{
loadToolbarBefore: function(buttons, param, $div){
console.log(buttons);
console.log(param);
console.log($div);
buttons.addToolbar = ""; // 取消新增功能
buttons.editToolbar = ""; //取消編輯功能
buttons.delToolbar = "";
return buttons; // 將按鈕物件回傳
}
},
toolbarExt:[
{
toolbarId: "del",
icon: "dtree-icon-roundclose",
title: "洗掉",
handler: function (node, $div) {
layer.confirm('真的洗掉么', function (index) {
layer.close(index);
layer.msg(JSON.stringify(node));
});
}
}
]
});
// 系結節點點擊
dtree.on("node('ltTree')" ,function(obj){
table.reload("currentTableId", {
//點擊加載右邊表格
where: {categoryId:obj.param.nodeId}
})
});
});
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552246.html
標籤：Html/Css
上一篇：手機號一鍵授權登錄頁面
下一篇：返回列表