首页 > 其他 > 详细

下拉树

时间:2020-03-19 18:26:16      阅读:71      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!