前端记录：树形插件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 ...
随机推荐
- angular组件共用服务打印日志父子组件传值2创建服务注入
- 假如你想在VUE的main.js里根据条件按需引入注册组件以及样式，那就这样子写，附赠自己写的vue一个框架配置多系统按需加载系统路由以及组件办法
假如你想在VUE的main.js里根据条件按需引入注册组件以及样式,那就这样子写 举例来说我想要引入大屏的一些组件,但是原来框架已经集成了多个项目,路由也是按需加载的,想要实现组件按需加载 先在mai ...
- elasticsearch中使用runtime fields
1.背景 在我们使用es的开发过程中可能会遇到这么一种情况,比如我们的线路名称字段lineName字段在设置mapping的时候使用的是text类型,但是后期发现需要使用这个字段来进行聚合操作,那么我 ...
- 【一句话】Java8后abstract class和interface的区别
首先一句话: Java8后(1)interface支持default和static方法有实现,abstract class依然是抽象方法和非抽象方法,(2)可同时实现多个interface,(3)但成 ...
- drf-jwt源码分析以及自定义token签发认证、alc和rbac
1.drf-jwt源码执行流程 1.1 签发(登录) 1.代码: urls.py: from rest_framework_jwt.views import obtain_jwt_token urlp ...
- echarts入门到应用学习笔记
背景: 做疫情数据管理可视化,需要用到热点图在web端进行数据可视化,而地图就是必不可少的一个,看完文档,可以解决大部分小白的问题,保姆级攻略,即使你的js,这些学得不咋样(我就是小菜鸟) 步骤 环境 ...
- maven项目构建报错：Could not find artifact com.xxx.cloud:xxx-cloud:pom:1.0-SNAPSHOT and 'parent.relativePath' points at wrong local POM
maven多模块项目打包的时候报错如下: [ERROR] [ERROR] Some problems were encountered while processing the POMs: [FATA ...
- C# 高德地图WebApi对接示例
1.登录或注册高德地图开放平台然后申请应用key(需要认证个人或企业开发者) 高德开放平台 | 高德地图API (amap.com)https://developer.amap.com/?ref=ht ...
- Docker部署Nacos自动停止运行
1.现象 使用docker部署的Nacos在运行一段时间后,就自动停止运行了. 查看docker运行容器,nacos停止了 2.解决 因为是学生购买的轻量级服务器,所以配置很低,出现这种问题我默认是内 ...
- 编译报错，提示：This dependency was not found:* vue-editor-bridge
前端代码引入了: 1 import func from 'vue-editor-bridge'; 工具自动填充,导致引入上述JS去掉重新编译,问题解决