Layui+dtree实现左边分类列表，右边数据列表
效果如下
代码实现
<!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="${request.contextPath}/static/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="${request.contextPath}/static/css/public.css" media="all">
<link rel="stylesheet" href="${request.contextPath}/static/lib/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="${request.contextPath}/static/lib/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<!-- 左树 -->
<div class="layui-col-sm12 layui-col-md4 layui-col-lg2">
<div class="layui-card">
<div class="layui-card-body mini-bar" id="ltTree">
</div>
</div>
</div>
<!-- 右表 -->
<div class="layui-col-sm12 layui-col-md8 layui-col-lg10">
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<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">姓名</label>
<div class="layui-input-inline">
<input type="text" name="keyword" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<select name="gender" lay-filter="aihao">
<option value="" selected=""></option>
<option value="0">男</option>
<option value="1">女</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否驱虫</label>
<div class="layui-input-inline">
<select name="expellingParasite" lay-filter="aihao">
<option value="" selected=""></option>
<option value="0">是</option>
<option value="1">否</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否绝育</label>
<div class="layui-input-inline">
<select name="sterilization" lay-filter="aihao">
<option value="" selected=""></option>
<option value="0">是</option>
<option value="1">否</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否接种疫苗</label>
<div class="layui-input-inline">
<select name="vaccination" lay-filter="aihao">
<option value="" selected=""></option>
<option value="0">是</option>
<option value="1">否</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">数据来源</label>
<div class="layui-input-inline">
<select name="source" lay-filter="aihao">
<option value="" selected=""></option>
<option value="0">系统录入</option>
<option value="1">用户发布</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">审核状态</label>
<div class="layui-input-inline">
<select name="status" lay-filter="aihao">
<option value="" selected=""></option>
<option value="0">未审核</option>
<option value="1">已审核</option>
</select>
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
</div>
</div>
</form>
</div>
</fieldset>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
</div>
</div>
</div>
</div>
</div>
<script src="${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 = checkStatus.data;
layer.alert(JSON.stringify(data));
}
});
table.on('tool(currentTableFilter)', function (obj) {
var data = 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>
Layui+dtree实现左边分类列表，右边数据列表的更多相关文章
- 页面设计-数据列表 DataGrid
传统软件项目开发时,针对每个业务单据页面需要每控件一个一个的来设计,同时需要在页面功能中对每个控件的属性进行判定处理,尤其是页面风格布局样式需要花去一大半的时间,并且后续要想修改是非常麻烦繁琐,这样就 ...
- SQL server 存储过程 C#调用Windows CMD命令并返回输出结果 Mysql删除重复数据保留最小的id C# 取字符串中间文本 取字符串左边 取字符串右边 C# JSON格式数据高级用法
create proc insertLog@Title nvarchar(50),@Contents nvarchar(max),@UserId int,@CreateTime datetimeasi ...
- 基于Ajax+div的“左边菜单、右边内容”页面效果实现
效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...
- JavaScript 下拉框 左边添加至右边
关于如何实现右边下拉框中选项的排序一时没有好的解决方法,等想到了回来补充 <!DOCTYPE html> <html> <head> <meta charse ...
- thinkphp5 列表页数据分页查询3-带搜索条件
先加载模板然后在前端HTML页面请求数据 /** * 加载列表页模板 * @author 冯广福 */ public function index() { LogWriteService::write ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- MJRefresh实现请求数据列表不满一页,或者请求数据为空时,不显示footer文字
最近自己负责的项目测试要求: 列表的数据不满一页的话就自动隐藏下面的“上拉加载更多”或是“到底了,没有更多数据”. 百度了一下,看了一篇博客的介绍实现: http://blog.csdn.net/gx ...
- UWP开发必备：常用数据列表控件汇总比较
今天是想通过实例将UWP开发常用的数据列表做汇总比较,作为以后项目开发参考.UWP开发必备知识点总结请参照[UWP开发必备以及常用知识点总结]. 本次主要讨论以下控件: GridView:用于显示数据 ...
- 【WPF】闲着没事，写了个支持数据列表分页的帮助类
支持分页的MVVM组件大家可以网上找,老周这个类只是没事写来娱乐一下的,主要是功能简单,轻量级,至少它满足了我的需求,也许还有未知的 bug . 这个类支持对数据列表进行分页处理,原理是利用 Skip ...
- .NET各大平台数据列表控件绑定原理及比较（WebForm、Winform、WPF）
说说WebForm: 数据列表控件: WebForm 下的列表绑定控件基本就是GridView.DataList.Repeater:当然还有其它DropDownList.ListBox等. 它们的共同 ...
随机推荐
- 狂神说SpringBoot笔记之编写一个http接口
编写一个http接口 1.1.在主程序的同级目录下,新建一个controller包,一定要在同级目录下,否则识别不到 2.代码 1 package com.example.app01.demo.api ...
- mac git远程仓库错误解决方法
mac更新后不知道怎么回事,git时出现了 Permission denied (publickey). 经查询后得出原因 1.首先给git进行config的配置 git config --globa ...
- mysql索引类型详解
转载网址: http://c.biancheng.net/view/7897.html
- 【QCustomPlot】简介
说明 使用 QCustomPlot 绘图库辅助开发时整理的学习笔记. 目录 说明 1. 库简介 2. 库的官网链接 3. 库的帮助文档 4. 库的下载地址 5. 库的版本号说明 6. 库的 Git 地 ...
- 利用Intent在两个页面之间进行传值操作的具体实现
不知道为什么,我本来使用的呼声最高的Bundle发送,但是我使用它会显示不出来,由于时间问题,我今天就先不找了,先放一下,先以完成任务为己任哈! 我们都清楚,我们基本上都是用的Intent实现的页面之 ...
- 声网 Agora 音频互动 MoS 分方法：为音频互动体验进行实时打分
在业界,实时音视频的 QoE(Quality of Experience) 方法一直都是个重要的话题,每年 RTE 实时互联网大会都会有议题涉及.之所以这么重要,其实是因为目前 RTE 行业中还没有一 ...
- POI Excel单元格样式超过最大数（4000或64000）的解决方案
aliases: [] tags : " #QA #Java " summary: [POI生成Excel超出的单元格样式的最大数量] author : [yaenli] note ...
- Facebook 的 Thrift
更多内容,前往个人博客 Thrift 源于 Facebook,在 2007 年 Facebook 将 Thrift 作为一个开源项目提交给了 Apache 基金会.对于当时的 Facebook 来说, ...
- 记录hive一次数据倾斜问题的解决以及思考总结
解决数据倾斜是大数据开发中比较重要的能力,这个现象指的是分布式集群中,由于数据分发的不当,导致某个节点要处理的错误过多,导致整个计算机任务迟迟结束不了,甚至可能节点出现OOM使得任务失败 处理数据倾斜 ...
- 【LeetCode动态规划#05】背包问题的理论分析（基于代码随想录的个人理解，多图）
背包问题 问题描述 背包问题是一系列问题的统称,具体包括:01背包.完全背包.多重背包.分组背包等(仅需掌握前两种,后面的为竞赛级题目) 下面来研究01背包 实际上即使是最经典的01背包,也不会直接出 ...