前端记录：树形插件zTree 和 表格扩展 tableX
项目实例
【地区联动实现_前端】
<title>区域设置</title>
<!--当前位置开始-->
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<script type="text/html" template lay-done="layui.data.updateMainBreadcrumb();">
</script>
</div>
</div>
<style>
/* 左树 */
#areaTreeBar { padding: 10px 15px; border: 1px solid #e6e6e6; background-color: #f2f2f2; }
#areaTree { border: 1px solid #e6e6e6; padding: 10px 5px; overflow: auto; height: -webkit-calc(100vh - 158px); height: -moz-calc(100vh - 158px); height: calc(100vh - 158px); }
.layui-tree-entry .layui-tree-txt { padding: 0 5px; border: 1px transparent solid; text-decoration: none !important; }
.layui-tree-entry.ew-tree-click .layui-tree-txt { background-color: #fff3e0; border: 1px #FFE6B0 solid; }
/* 右表搜索表单 */
#areaTbSearchForm .layui-form-label { box-sizing: border-box !important; width: 90px !important; }
#areaTbSearchForm .layui-input-block { margin-left: 90px !important; }
/* 主管标识 */
td .leader-flag { background: #52c41a; color: #fff; font-size: 12px; line-height: 18px; position: absolute; padding: 0 15px; right: -15px; top: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center; transform-origin: center; }
</style>
<!-- 正文开始 -->
<script type="text/html" template lay-type="Post" lay-url="{{ layui.setter.apiUrl }}Api/CoreCmsArea/GetIndex" lay-done="layui.data.done(d);">
<div class="layui-fluid" style="padding-bottom: 0;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md2">
<div class="layui-card">
<div class="layui-card-body" style="padding: 10px;">
<!-- 左树 -->
<div id="areaTree" class="ztree"></div>
</div>
</div>
</div>
<div class="layui-col-md10">
<div class="layui-card">
<div class="layui-card-body" style="padding: 10px;">
<!-- 数据表格 -->
<table id="areaTable" lay-filter="areaTable"></table>
</div>
</div>
</div>
</div>
</div>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="areaTbBar">
<!--{{# if(d.depth <3 ){ }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加下级</a>
{{# } }}-->
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="LAY-app-CoreCmsArea-toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addData"><i class="layui-icon layui-icon-add-1"></i>添加下级</button>
</div>
</script>
<script>
var indexData;
var debug = layui.setter.debug;
var checkId;
layui.data.done = function (d) {
//开启调试情况下获取接口赋值数据
if (debug) { console.log(d); }
indexData = d.data;
layui.use(['index', 'table', 'laydate', 'util', 'tree', 'dropdown', 'tableX', 'coreHelper', 'zTree'],
function () {
var $ = layui.$
, admin = layui.admin
, table = layui.table
, form = layui.form
, laydate = layui.laydate
, setter = layui.setter
, coreHelper = layui.coreHelper
, util = layui.util
, tableX = layui.tableX
, view = layui.view;
var tree = layui.tree;
var selObj, treeData; // 左树选中数据
/* 渲染树形 */
function renderTree() {
coreHelper.Post('Api/CoreCmsArea/GetAllList', null, function (res) {
if (res.code === 0) {
//初始化数据：格式：$.fn.zTree.init(obj,setting,data);
$.fn.zTree.init($('#areaTree'),{
check: { enable: false },
callback: {
onClick: function (event, treeId, treeNode) {
checkId = treeNode.id;
insTb.reload({
where: { parentId: treeNode.id },
url: layui.setter.apiUrl + 'Api/CoreCmsArea/GetPageList',
method: 'post'
});
},
},
data: {
key: { name: "name" },
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: 0
}
}
},//settings
res.data);
}
else {
return layer.msg(res.msg, { icon: 2 });
}
//$('#areaTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
});
}
renderTree();
/* 渲染表格 */
var insTb = tableX.render({
elem: '#areaTable',
data: [],
toolbar: '#LAY-app-CoreCmsArea-toolbar',
height: 'full-135',
page: true,
limit: 20,
cellMinWidth: 100,
cols: [[
{ type: 'numbers', fixed: 'left' },
{ field: 'id', title: '地区ID', width: 80, sort: false },
{ field: 'parentId', title: '父级ID', sort: false },
{ field: 'depth', title: '地区深度', sort: false },
{ field: 'name', title: '地区名称', sort: false },
{ field: 'postalCode', title: '邮编', sort: false },
{ field: 'sort', title: '地区排序', sort: false },
{
title: '操作', toolbar: '#areaTbBar', unresize: true,
align: 'center', fixed: 'right', width: 100
}
]],
done: function () {
var $flag = $('#areaTable+div .leader-flag');
$flag.parent().parent().append($flag);
}
});
//监听工具条
table.on('tool(areaTable)', function (obj) {
if (obj.event === 'del') {
doDelete(obj);
} else if (obj.event === 'edit') {
doEdit(obj)
}
});
//头工具栏事件
table.on('toolbar(areaTable)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'addData':
doCreate(checkId);
break;
};
});
//执行创建操作
function doCreate(checkId) {
coreHelper.Post("Api/CoreCmsArea/GetCreate", { id: checkId }, function (e) {
if (e.code === 0) {
admin.popup({
shadeClose: false,
title: '创建数据',
area: ['350px', '350px'],
id: 'LAY-popup-CoreCmsArea-create',
success: function (layero, index) {
view(this.id).render('shop/area/create', { data: e.data }).done(function () {
//监听提交
form.on('submit(LAY-app-CoreCmsArea-createForm-submit)',
function (data) {
var field = data.field; //获取提交的字段
if (debug) { console.log(field); } //开启调试返回数据
//提交 Ajax 成功后，关闭当前弹层并重载表格
coreHelper.Post("Api/CoreCmsArea/DoCreate", field, function (e) {
console.log(e)
if (e.code === 0) {
renderTree();
//layui.table.reloadData('areaTable'); //重载表格
layer.close(index); //再执行关闭
layer.msg(e.msg);
} else {
layer.msg(e.msg);
}
});
});
});
}
, btn: ['确定', '取消']
, yes: function (index, layero) {
layero.contents().find("#LAY-app-CoreCmsArea-createForm-submit").click();
}
});
} else {
layer.msg(e.msg);
}
});
}
//执行编辑操作
function doEdit(obj) {
coreHelper.Post("Api/CoreCmsArea/GetEdit", { id: obj.data.id }, function (e) {
if (e.code === 0) {
admin.popup({
shadeClose: false,
title: '编辑数据',
area: ['350px', '350px'],
id: 'LAY-popup-CoreCmsArea-edit',
success: function (layero, index) {
view(this.id).render('shop/area/edit', { data: e.data }).done(function () {
//监听提交
form.on('submit(LAY-app-CoreCmsArea-editForm-submit)',
function (data) {
var field = data.field; //获取提交的字段
if (debug) { console.log(field); } //开启调试返回数据
//提交 Ajax 成功后，关闭当前弹层并重载表格
coreHelper.Post("Api/CoreCmsArea/DoEdit", field, function (e) {
console.log(e)
if (e.code === 0) {
renderTree();
//layui.table.reloadData('areaTable'); //重载表格
layer.close(index); //再执行关闭
layer.msg(e.msg);
} else {
layer.msg(e.msg);
}
});
});
})
}
, btn: ['确定', '取消']
, yes: function (index, layero) {
layero.contents().find("#LAY-app-CoreCmsArea-editForm-submit").click();
}
});
} else {
layer.msg(e.msg);
}
});
}
//执行单个删除
function doDelete(obj) {
layer.confirm('确定删除吗？删除后将无法恢复。', function (index) {
coreHelper.Post("Api/CoreCmsArea/DoDelete", { id: obj.data.id }, function (e) {
if (debug) { console.log(e); } //开启调试返回数据
renderTree();
//table.reloadData('areaTable');
layer.msg(e.msg);
});
});
}
});
};
</script>
效果图
前端记录：树形插件zTree 和 表格扩展 tableX的更多相关文章
- 插件使用一树形插件---zTree
zTree是一款挺好用的树形插件,中文文档齐全,demo丰富. 官方网站是 http://www.treejs.cn/v3/main.php#_zTreeInfo 源码网站 https://githu ...
- 树形插件zTree与组织插件jOrgChart交互
<html> <head> <title>组织架构</title> <meta http-equiv="content-type&quo ...
- 插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
- 一个功能丰富的 jQuery 树形插件 z-tree
链接 如果你的树 很复杂, 需要拖拽功能, 还可以考虑用这个 另外还有一个目前在用 Dynatree 如果一般的树, 还是自己写一个, 也很轻松, 如果有一两个复杂的点, 可以参考ZTree
- 前端框架——树形结构Ztree的使用
地址 官网:http://ztree.me 码云:https://gitee.com/zTree/zTree_v3 可以实现效果 使用方式 下载资源文件,引入到自己的项目中 <head> ...
- 树形插件 --- zTree
地址:http://www.treejs.cn/v3/api.php
- ztree树形插件
在开发项目中需要用到树插件,近期研究了几款树插件,好记性不如烂笔头 ,写下来 以后好查 MzTreeView(梅花雪) 很经典的树形菜单脚本控件 菜单树展示加载速度快 支持1w条以上大数据 缺点-- ...
- 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
- 【treeview】 基于jQuery的简单树形插件
[treeview] 效果图: 前几天想把后台的目录结构通过树形插件的方法反映到前端来,在网上搜了半天只找到了这个treeview,虽然不是很好看,不过还是够用的..用treeview的前提是要有jq ...
- js插件ztree使用
最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...
随机推荐
- Django框架之drf：7、认证组件，权限组件，频率组件，过滤的多种用法，排序，分页，
Django框架之drf 一.认证组件 简介: 登录认证的限制 认证组件是drf框架给我们提供的认证接口,它能够在请求进入视图函数/类前进验证(例如:认证用户是否登录),对不符合认证的请求进行 ...
- LeetCode_1. 两数之和
写在前面 难度:简单 原文链接:https://leetcode-cn.com/problems/two-sum/ 题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和 ...
- 真正“搞”懂HTTP协议13之HTTP2
在前面的章节,我们把HTTP/1.1的大部分核心内容都过了一遍,并且给出了基于Node环境的一部分示例代码,想必大家对HTTP/1.1已经不再陌生,那么HTTP/1.1的学习基本上就结束了.这两篇文章 ...
- .NET WebAPI 跨域问题(has been blocked by CORS policy:No Access-Control-Allow-Ogigin header is present on the requested resource)
一.什么是跨域 1. 跨域解释 跨域指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 同源指的是:域名,协议,端口均相同. 2. 什么情况下会导致跨域 2.1 ...
- (二) MdbCluster分布式内存数据库——分布式架构1
(二) MdbCluster分布式内存数据库--分布式架构1 分布式架构是MdbCluster的核心关键,业界有很多相关的实现,却很少有文章详细的解释每个架构实现背后的细节和这么做的原因.在Mdb ...
- Mat数据结构
1.MAT类: OpenCV从2001年开始发展,在最初使用的是c语言,使用的是IplImage数据结构来存储图像,但是最大的问题需要手动申请释放内从( manual memory managemen ...
- RocketMQ - 生产者启动流程
生产者启动流程 DefaultMQProducer是RocketMQ中默认的生产者实现 核心属性: namesrvAddr: 继承自 ClientConfig,表示 RocketMQ 集群的Names ...
- 【vite】踩坑，首次点击路由跳转页面，发生回退，页面闪回，二次点击才能进入目标页面
[vite]踩坑,首次点击路由跳转页面,发生回退,页面闪回,二次点击才能进入目标页面 最近在做移动端前端项目,使用的vite3+vue3+vant,组件和api挂载,使用的自动导入,unplugin- ...
- 功放世界web新手区
第一题:view_source: 顾名思义就是查看网页源代码,按一下f12就ok 第二题:robots协议 换言之就是,robots协议告诉了我们,什么可以爬,什么不可以爬,要是觉得坐牢没什么,那就可 ...
- JZOJ 5355. 【NOIP2017提高A组模拟9.9】保命
题目 为了加快社会主义现代化,建设新农村,农夫约(Farmer Jo)决定给农庄做一些防火措施,保障自己.猫.奶牛的生命安全. 农夫约的农庄里有N+1 座建筑,排成了一排,编号为0-N.对于0 < ...