前端记录：树形插件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 ...
随机推荐
- day14-JdbcTemplate-01
JdbcTemplate-01 看一个实际需求: 如果希望使用spring框架做项目,Spring框架如何处理对数据库的操作呢? 方案一:使用之前的JdbcUtils类 方案二:spring提供了一个 ...
- 自定义接口-lambda使用前提
自定义接口 lambda使用前提 可推导即可省略 Lambda强调的是"做什么"而不是"怎么做",所以凡是可以根据上下文推导得知的信息,都可以省略.例如上例还可 ...
- 《自定义工作流配置，springboot集成activiti，前端vue，完整版审批单据》
前言 activiti工作流引擎项目,企业erp.oa.hr.crm等企事业办公系统轻松落地,一套完整并且实际运用在多套项目中的案例,满足日常业务流程审批需求. 一.项目形式 springboot+v ...
- Html5 canvas创意特效合集
Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状,甚至是制作动画.本文就是收集了很多非常富有创意的一些canvas动画特效例子,这些例子都非常适合大家学习.更多源码可在在这里 ...
- jquery（二：jquery的DOM操作）
jquery的Dom操作 查找元素(选择器已实现):创建节点对象:访问和设置节点对象的值,以及属性:添加节点:删除节点:删除.添加.修改.设置节点的css样式等. 操作元素的属性: 方法 说明 举例 ...
- JZOJ 2020.02.16【NOIP提高组】模拟A 组
2020.02.16[NOIP提高组]模拟A 组 呼呼呼呼呼呼呼呼 今天暴力分可真多啊 第一次 \(A\) 组进前 \(5\) ! 呼呼呼呼呼呼呼呼 总有人虐场,总有人在场中被虐······ 总结 3 ...
- 2020-6-2 map？
问题描述 试题编号: 202006-2 试题名称: 稀疏向量 时间限制: 2.0s 内存限制: 512.0MB 问题描述: #include<stdio.h>//数据量很大,所 ...
- vue路由中pdfjs插件使用及找不到 viewer.html解决
官方下载: https://mozilla.github.io/pdf.js/getting_started/#download 同目录下pdfjs-2.12.313-dist.zip为官方下载包 此 ...
- Laravel 框架根据经纬度计算在一定距离内的数据
$model = DB::table('table_name'); public static function scope_distance($model, $from_latitude, $fro ...
- ROS librviz库
1.可视化管理类:rviz::VisualizationManager The VisualizationManager class is the central manager class of r ...