前端记录：树形插件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 ...
随机推荐
- Kubernetes(k8s)密码管理：Secret
目录 一.系统环境 二.前言 三.Secret概览 四.Secret 的类型 五.各种类型的secret使用实例 5.1 创建kubernetes.io/service-account-token类型 ...
- Hive删除分区名称中含有特殊字符
先说方案:通过show partitions和hdfs url看到的都不是真正的分区名称,都是经过URI重新编码的,访问这些分区应该使用分区名称的原始字符串. 场景描述 当我们在SQL语句中使用变量时 ...
- Django框架之drf：8、断点调试，权限、认证、频率组件源码分析，基于APIView编写分页，异常处理
Django框架之drf 一.断点调式使用 指,在我们编写代码的时候,程序运行出现报错是无可避免的,当程序 出现报错时,我们需要找到出现报错的代码进行修改,如果时简短的代码很容易就可以找到报错位置 ...
- linux 基础（7）账号和群组的管理
了解账号和群组的基本信息 账号使用 如何查看 linux 计算机上有哪些账号呢?账号的信息储存在/etc/passwd中,打开就可以看到: less /etc/passwd root:x:0:0:ro ...
- Vue21 组件
1 模块及组件简介 组件(component)是vue.js最强大的功能之一.组件的作用就是封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能够调用这个功能体. 每个组件都是Vue的实例 ...
- spring security登录认证流程解析
转 https://blog.csdn.net/qq_37142346/article/details/80032336 1.说明 用户认证流程 认证结果如何在多个请求之间共享 获取认证用户信息.用户 ...
- Zstack使用经验系列2-安装的存储配置
从上图读者应该能看出当初分配主存储和镜像存储时空间分配的是多么不合理,镜像空间不需要那么多.不过这时系统已经运行了近1年,很多云主机以及系统服务都搭好了,如果再重新分配空间是多么的麻烦! 所以开始为p ...
- 安卓逆向 JNI实先java与C互通
先来一张吊图 jdk_1.6.0_43/include/jni.h 这个头文件的地址 头文件分布 我们需要熟悉的 反射获取java中的类 1.jclass/类型 (JNICALL *FindClas ...
- 【NOIP2013提高组】华容道
分析 一个比较显然的方式是 设 \(f_{i,j,x,y}\) 表示达到空格所处位置为 \((i,j)\) 且特殊格位置为 \(x,y\) 的状态的最少步数 一次可以交换空格和相邻格,代价为 \(1\ ...
- Vulhub 漏洞学习之：Apereo CAS
Vulhub 漏洞学习之:Apereo CAS 目录 Vulhub 漏洞学习之:Apereo CAS 1 Apereo CAS 4.1 反序列化命令执行漏洞 1.1 漏洞利用过程 1 Apereo C ...