1.添加部门的弹出层
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 5px" id="addOrUpdateDiv">
<form action="" method="post" class="layui-form " id="dataFrm" lay-filter="dataFrm">
<div class="layui-form-item">
<label class="layui-form-label">父级部门</label>
<div class="layui-input-block">
<ul id="deptTree" class="dtree" data-id="0"></ul>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门名称</label>
<div class="layui-input-block">
<input type="hidden" name="id">
<input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入部门名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门地址</label>
<div class="layui-input-block">
<input type="text" name="address" lay-verify="required" autocomplete="off" placeholder="请输入部门地址" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门备注</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="remark" id="content"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">是否展开</label>
<div class="layui-input-inline">
<input type="radio" name="open" value="1" title="展开" checked="">
<input type="radio" name="open" value="0" title="不展开">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否可用</label>
<div class="layui-input-inline">
<input type="radio" name="available" value="1" title="可用" checked="">
<input type="radio" name="available" value="0" title="不可用">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">排序码</label>
<div class="layui-input-inline">
<input type="text" name="ordernum" id="ordernum" lay-verify="required/number" autocomplete="off" placeholder="请输入排序码[>0]" class="layui-input" >
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="text-align: center;">
<button type="button" class="layui-btn" lay-submit="" id="doSubmit" ><span class="layui-icon layui-icon-release"></span>提交</button>
<button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
</div>
</div>
</form>
</div>
<!-- 添加和修改的弹出层结束 -->
2.dtree的样式引入
<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css" media="all" /> <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css" media="all" />
3.dtree拓展
layui.extend({ dtree: ‘/resources/layui_ext/dtree/dtree‘ // {/}的意思即代表采用自有路径,即不跟随 base 路径 }).use([‘jquery‘,‘form‘,‘table‘,‘layer‘,‘dtree‘],function(){ var $=layui.jquery; var form=layui.form; var table=layui.table; var layer=layui.layer; var dtree=layui.dtree;
4.初始化下拉树
//初始化下拉树
var selectTree=dtree.renderSelect({
elem: "#deptTree",
width: "100%", // 指定树的宽度
dataStyle:"layuiStyle", //使用layui 数据风格的格式
dataFormat: "list", //配置data风格为list
response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
url: "/dept/loadDeptManageLeftTreeJson" // 使用url加载(可与data加载同时存在)
});
原文:https://www.cnblogs.com/zhsv/p/12526146.html