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等. 它们的共同 ...
随机推荐
- 记一次FusionCompute安装springboot应用过程
客户给了一个地址,登录后发现是FusionCompute 的一个虚拟机,第一次使用,于是过了一下在线帮助文档 ,大概明白了. 因为客户已经创建完了裸机虚拟机,前面的过程我也不会太多关注. 在概要里,可 ...
- 如何通过C++ 将数据写入 Excel 工作表
直观的界面.出色的计算功能和图表工具,使Excel成为最流行的个人计算机数据处理软件.在独立的数据包含的信息量太少,而过多的数据又难以理清头绪时,制作成表格是数据管理的最有效手段之一.这样不仅可以方便 ...
- 痞子衡嵌入式：我为2021 TencentOS Tiny AIoT应用创新大赛做了场直播培训
TencentOS Tiny AIoT 应用创新大赛是腾讯 TencentOS 团队联合恩智浦半导体.安谋科技(Arm China)发起的线上开发者活动,主要面向中小企业嵌入式工程师.广大嵌入式开发者 ...
- 干货 | BitSail Connector 开发详解系列一：Source
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 BitSail 是字节跳动自研的数据集成产品,支持多种异构数据源间的数据同步,并提供离线.实时.全量.增量场景下全 ...
- Salesforce CPQ之后续慢慢看系列
salesforce核心两朵云,sales & service. 针对sales的quote / quote line item的报价功能,还是相对薄弱.针对sales,报价的准确性影响着成单 ...
- Spring IOC——源码分析
Spring 容器的 refresh() 创建容器 1 //下面每一个方法都会单独提出来进行分析 2 @Override 3 public void refresh() throws BeansExc ...
- LinkedBlockingQueue出入队实现原理
类图概述 由类图可以看出,L是单向链表实现的,有两个ReentrantLock实例用来控制元素入队和出队的原子性,takeLock用来控制只有一个线程可以从队头获取元素,putLock控制只有一个线程 ...
- mapState, mapActions
<template> <div class="box"> <header class="header">分类头部</h ...
- freeswitch媒体协商的优先级方案
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 不同的媒体格式各有优缺点,实际环境中的应用要根据线路和客户的实际需求确定. 本文中介绍一种较为通用的媒体配置方案,可以适配大部分场景 ...
- python中的强制等待、隐性等待、显性等待
运行结果过程中出现Unable to locate element时,1.先确定元素是否定位有误.2.再确定运行过程中是否等待不到位,可以截图,查看查找时页面的状态. 1.使用强制等待 --辅助 2. ...