layui的treetable树形表格使用
前言
layui的树状结构结合表格使用。
主要是调用了第三方treeTable.js文件
百度网盘连接
链接: https://pan.baidu.com/s/1-SZbyhP6aWe5shz5GyJJmA 提取码: uip6
提示:本文章借鉴该网址的博主写出来的,也可参考https://www.cnblogs.com/Chen-Ru/p/14176723.html,以下是本篇文章正文内容,下面案例仅供参考
一、正文
1.粗略展示,有待开发
二、使用步骤
1.前台body里面的html
代码如下(示例):
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body ">
<input class="layui-input Modules/find" id="edtSearch" value="" placeholder="输入关键字"
style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;" />
<div class="layui-btn-container" style="display: inline-block;">
<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary Modules/find">
<i class="layui-icon"></i>搜索
</button>
<button id="btnClearSearch"
class="layui-btn layui-btn-sm layui-btn-primary Modules/find">
<i class="layui-icon">ဆ</i>清除搜索
</button>
<div class="layui-inline layui-show-xs-block Modules/add">
<button id="addOneModel" style="display: ;"
class="layui-btn layui-btn-sm layui-btn-primary Modules/add">
<i class="layui-icon"></i>添加一级模块
</button>
</div>
</div>
<div class="page-wrapper Modules/find">
<table id="demoTreeTable1"></table>
</div>
</div>
</div>
</div>
</div>
</div>
<!--新增节点/修改节点 -->
<div class="layui-card-body" style="display: none;" id="addEditModulesNone">
<div class="layui-row" id="ModulesX">
<form class="layui-form layui-col-space5" onsubmit="return false" id="ModulesFrom"
lay-filter="ModulesFrom" name="ModulesFrom">
<div class="layui-form-item" style="display: none">
<label for="watchCatId" class="layui-form-label">模块编号</label>
<div class="layui-inline layui-show-xs-block">
<input size="28" type="text" value="0" id="id" name="id" placeholder="模块编号"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="watchCatId" class="layui-form-label">父模块</label>
<div class="layui-inline layui-show-xs-block">
<input size="28" style="display: none;" readonly=