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等. 它们的共同 ...
随机推荐
- Leecode 141.环形链表（Java 快慢指针）
想法: 1:遍历链表,每次判断节点是否被访问过.(哈希表) 2:快慢指针(看题解之后) 两个指针pq都在head头指针开始(初始化): 快指针每次走两步,慢指针每次走一步,如果 ...
- python pandas dataframe excel xlwings docx 常用简单函数方法汇总
# -*- coding: UTF-8 -*-import pandas as pdimport numpy as npimport datetimeimport osimport sysimport ...
- You need to run build with JDK or have tools.jar on the classpath.If this occures during eclipse build make sure you run eclipse under JDK as well 错误
我打开项目报错是这样的 pom.xml jdk配置什么的都是好的 但是还是报错 解决错误 : 1.打开你eclipse的根目录,找到eclipse.ini 这个文件夹打开 2.打开是这个样子 ...
- mysql对汉字排序
问题: 编写order by排序时,如果字段是汉字的话,排序会失效. 如: SELECT * FROM user ORDER BY age ASC,username DESC 此时按照username ...
- git提交的时候，报错yarn run v1.21.1 ，SyntaxError: Cannot use import statement outside a module 解决
原因是 lint-staged这个依赖中,需要的node的版本是, 而我使用的node版本是12.13.1 ,切换成14.17.0就可以了
- python 超时装饰器
#************************************************************** 设置超时的装饰器 *************************** ...
- Map遍历增加key报错如何解决
public static void main(String[] args) throws Exception{ Map<String,Object> aa=new HashMap< ...
- 狂神说SpringBoot笔记之编写一个http接口
编写一个http接口 1.1.在主程序的同级目录下,新建一个controller包,一定要在同级目录下,否则识别不到 2.代码 1 package com.example.app01.demo.api ...
- 基于Mindspore2.0的GPT2预训练模型迁移教程
摘要: 这篇文章主要目的是为了让大家能够清楚如何用MindSpore2.0来进行模型的迁移. 本文分享自华为云社区<MindNLP-基于Mindspore2.0的GPT2预训练模型迁移教程> ...
- 【CS231n assignment 2022】 vscode 环境配置
文章目录 前言 一.安装 Python 二.安装 vscode 三. cs231n 作业下载 四.配置 vscode 五.虚拟环境包安装 六.数据集 前言 今年成功考上了本校的研究生,要开始进入研究生 ...