B-JUI1.2
/
ztree.html

<script type="text/javascript">
    function changeZtree(t) {
        var $panel = $.CurrentNavtab
        var $t = $('#ztree1'),
            $span = $('#ztree-' + t),
            $log = $('#ztree-log'),
            op = $t.data()

        if (t != 7)
            $.fn.zTree.destroy('ztree1')

        switch (t) {
            case 1:
                var edit = op.showRenameBtn ? false : true,
                    rename = op.showRenameBtn ? false : true,
                    remove = op.showRemoveBtn ? false : true

                $t.data('editEnable', edit).data('showRenameBtn', rename).data('showRemoveBtn', remove)

                $log.val('data-edit-enable="' + edit + '"\r\n' + 'data-show-rename-btn="' + rename + '"\r\n' + 'data-show-remove-btn="' + remove + '"')
                $span.text(($span.text() == '无') ? '显示' : '无')
                break
            case 2:
                var add = op.addHoverDom ? null : 'edit',
                    remove = op.removeHoverDom ? null : 'edit'

                $t.data('addHoverDom', add).data('removeHoverDom', remove)

                $log.val('data-add-hover-dom="' + add + '"\r\n' + 'data-remove-hover-dom="' + remove + '"')
                $span.text(($span.text() == '无') ? '显示' : '无')
                break
            case 3:
                var check = op.checkEnable ? false : true

                $t.data('checkEnable', check)

                $log.val('data-check-enable="' + check + '"')
                $span.text(($span.text() == '无') ? '显示' : '无')
                break
            case 4:
                var edit = op.editEnable ? true : true,
                    bDrag = op.beforeDrag ? '' : 'M_BeforeNodeDrag',
                    bDrop = op.beforeDrop ? '' : 'M_BeforeNodeDrop',
                    onDrop = op.onDrop ? '' : 'M_NodeDrop'

                $t.data('editEnable', edit).data('beforeDrag', bDrag).data('beforeDrop', bDrop).data('onDrop', onDrop)

                $log.val('data-edit-enable="' + edit + '"\r\n' + 'data-before-drag="' + bDrag + '"\r\n' + 'data-before-drop="' + bDrop + '"\r\n' + 'data-on-drop="' + onDrop + '"')
                $span.text(($span.text() == '无') ? 'M_BeforeNodeDrag、M_BeforeNodeDrop、M_NodeDrop' : '无')
                break
            case 5:
                var add = op.beforeRemove ? null : 'edit',
                    remove = op.beforeRemove ? null : 'edit',
                    bR = op.beforeRemove ? null : 'M_BeforeRemove'
                oR = op.onRemove ? null : 'M_NodeRemove'

                $t.data('addHoverDom', add).data('removeHoverDom', remove).data('beforeRemove', bR).data('onRemove', oR)

                $log.val('data-add-hover-dom="' + add + '"\r\n' + 'data-remove-hover-dom="' + remove + '"\r\n' + 'data-before-remove="' + bR + '"\r\n' + 'data-on-remove="' + oR + '"')
                $('#ztree-2').text(($('#ztree-2').text() == '无') ? '显示' : '无')
                $span.text(($span.text() == '无') ? 'M_BeforeRemove、M_NodeRemove' : '无')
                break
            case 6:
                var diy = op.addDiyDom ? null : 'M_AddDiyDom'

                $t.data('addDiyDom', diy)

                $log.val('data-add-diy-dom="' + diy + '"')
                $span.text(($span.text() == '无') ? 'M_AddDiyDom' : '无')
                break
            case 7:
                var tree = $.fn.zTree.getZTreeObj("ztree1")
                var menus = tree.getNodes()
                $log.val(JSON.stringify(menus))
                break
        }
        $panel.initui()
    }

    //单击事件
    function ZtreeClick(event, treeId, treeNode) {
        event.preventDefault()

        var $detail = $('#ztree-detail')

        if ($detail.attr('tid') == treeNode.tId) return
        if (treeNode.name) $('#j_menu_name').val(treeNode.name)
        if (treeNode.url) {
            $('#j_menu_url').val(treeNode.url)
        } else {
            $('#j_menu_url').val('')
        }
        if (treeNode.tabid) {
            $('#j_menu_tabid').val(treeNode.tabid)
        } else {
            $('#j_menu_tabid').val('')
        }
        if (treeNode.target) {
            $('#j_menu_target').selectpicker('val', treeNode.target)
        } else {
            $('#j_menu_target').selectpicker('val', '')
        }
        $detail.attr('tid', treeNode.tId)
        $detail.show()
    }

    //保存属性
    function M_Ts_Menu() {
        var zTree = $.fn.zTree.getZTreeObj("ztree1")
        var name = $('#j_menu_name').val()
        var url = $('#j_menu_url').val()
        var tabid = $('#j_menu_tabid').val()
        var target = $('#j_menu_target').val()

        if ($.trim(name).length == 0) {
            alertMsg.error('菜单名称不能为空！')
            return;
        }
        var upNode = zTree.getSelectedNodes()[0]

        if (!upNode) {
            alertMsg.error('未选中任何菜单！')
            return
        }
        upNode.name = name
        upNode.url = url
        upNode.tabid = tabid
        upNode.target = target
        zTree.updateNode(upNode)
    }

    //
    function M_BeforeNodeDrag(treeId, treeNodes) {
        var $log = $('#ztree-log')
        $log.val('开始拖拽：' + treeNodes[0].name + '！\n' + $log.val())
        return true
    }

    //监听拖拽事件
    function M_BeforeNodeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
        /*禁止插入层级为2的节点*/
        if (moveType == 'inner' && targetNode.level == 2) {
            return false
        }
        /*禁止插入剩余层级不足的子节点*/
        if (moveType == 'inner' && treeNodes[0].isParent) {
            var molevel = 2 - targetNode.level //剩余层级
            var maxlevel = 1
            var zTree = $.fn.zTree.getZTreeObj("ztree1")
            var nodes = zTree.transformToArray(treeNodes)
            var level = nodes[0].level

            for (var i = 1; i < nodes.length; i++) {
                if (nodes[i].level == (level + 1)) {
                    maxlevel++
                    level++
                }
            }
            if (maxlevel > molevel) {
                return false
            }
        }
        return true
    }

    //拖拽结束事件
    function M_NodeDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
        var $log = $('#ztree-log')
        $log.val('拖拽结束！\n' + $log.val())
    }

    //删除前事件
    function M_BeforeRemove(treeId, treeNode) {
        var $log = $('#ztree-log')
        $log.val('准备删除：' + treeNode.name + '！\n' + $log.val())
        return true
    }

    //删除结束事件
    function M_NodeRemove(event, treeId, treeNode) {
        var $log = $('#ztree-log')
        $log.val('删除成功！\n' + $log.val())
    }

    //自定义DOM
    function M_AddDiyDom(treeId, treeNode) {
        var aObj = $('#' + treeNode.tId + '_a')

        if ($('#diyBtn_' + treeNode.id).length > 0) return
        aObj.append('<button type="button" class="diyBtn1" id="diyBtn_' + treeNode.id + '" title="' + treeNode.name + '" onfocus="this.blur();"><i class="fa fa-plane"></i></button>')
        $('#diyBtn_' + treeNode.id).bind('click', function () {
            $(this).alertmsg('info', (treeNode.name + ' 的飞机！'))
        })
    }

    function returnJSON() {
        return [{
            "id": 1,
            "pid": 0,
            "faicon": "rss",
            "faiconClose": "cab",
            "name": "表单元素",
            "level": 0,
            "tId": "ztree1_1",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": true,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 10,
            "pid": 1,
            "url": "form-button.html",
            "tabid": "form-button",
            "faicon": "bell",
            "pId": 1,
            "name": "按钮",
            "level": 0,
            "tId": "ztree1_2",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 11,
            "pid": 1,
            "url": "form-input.html",
            "tabid": "form-input",
            "faicon": "info-circle",
            "pId": 1,
            "name": "文本框",
            "level": 0,
            "tId": "ztree1_3",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 12,
            "pid": 1,
            "url": "form-select.html",
            "tabid": "form-select",
            "faicon": "ellipsis-v",
            "pId": 1,
            "name": "下拉选择框",
            "level": 0,
            "tId": "ztree1_4",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 13,
            "pid": 1,
            "url": "form-checkbox.html",
            "tabid": "table",
            "faicon": "soccer-ball-o",
            "pId": 1,
            "name": "复选、单选框",
            "level": 0,
            "tId": "ztree1_5",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 14,
            "pid": 1,
            "url": "form.html",
            "tabid": "form",
            "faicon": "comments",
            "pId": 1,
            "name": "表单综合演示",
            "level": 0,
            "tId": "ztree1_6",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 2,
            "pid": 0,
            "name": "表格",
            "level": 0,
            "tId": "ztree1_7",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 20,
            "pid": 2,
            "url": "table.html",
            "tabid": "table",
            "faicon": "signal",
            "pId": 2,
            "name": "普通表格",
            "level": 0,
            "tId": "ztree1_8",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 21,
            "pid": 2,
            "url": "table-fixed.html",
            "tabid": "table-fixed",
            "faicon": "rss-square",
            "pId": 2,
            "name": "固定表头表格",
            "level": 0,
            "tId": "ztree1_9",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": false,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }, {
            "id": 22,
            "pid": 2,
            "url": "table-edit.html",
            "tabid": "table-edit",
            "faicon": "bookmark-o",
            "pId": 2,
            "name": "可编辑表格",
            "level": 0,
            "tId": "ztree1_10",
            "parentTId": null,
            "open": false,
            "isParent": false,
            "zAsync": true,
            "isFirstNode": false,
            "isLastNode": true,
            "isAjaxing": false,
            "checked": false,
            "checkedOld": false,
            "nocheck": false,
            "chkDisabled": false,
            "halfCheck": false,
            "check_Child_State": -1,
            "check_Focus": false,
            "isHover": false,
            "editNameFlag": false
        }]
    }
</script>
<div class="bjui-pageContent">
    <div style="padding:20px;">
        <div class="clearfix">
            <div style="float:left; width:220px; height:240px; overflow:auto;">
                <ul id="ztree1" class="ztree" data-toggle="ztree"
                    data-options="{
                        expandAll: true,
                        onClick: 'ZtreeClick'
                    }"
                >
                    <li data-id="1" data-pid="0" data-faicon="rss" data-faicon-close="cab">表单元素</li>
                    <li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button"
                        data-faicon="bell">按钮
                    </li>
                    <li data-id="11" data-pid="1" data-url="form-input.html" data-tabid="form-input"
                        data-faicon="info-circle">文本框
                    </li>
                    <li data-id="12" data-pid="1" data-url="form-select.html" data-tabid="form-select"
                        data-faicon="ellipsis-v">下拉选择框
                    </li>
                    <li data-id="13" data-pid="1" data-url="form-checkbox.html" data-tabid="table"
                        data-faicon="soccer-ball-o">复选、单选框
                    </li>
                    <li data-id="14" data-pid="1" data-url="form.html" data-tabid="form" data-faicon="comments">表单综合演示
                    </li>
                    <li data-id="2" data-pid="0">表格</li>
                    <li data-id="20" data-pid="2" data-url="table.html" data-tabid="table" data-faicon="signal">普通表格
                    </li>
                    <li data-id="21" data-pid="2" data-url="table-fixed.html" data-tabid="table-fixed"
                        data-faicon="rss-square">固定表头表格
                    </li>
                    <li data-id="22" data-pid="2" data-url="table-edit.html" data-tabid="table-edit"
                        data-faicon="bookmark-o">可编辑表格
                    </li>
                </ul>
            </div>
            <div id="ztree-detail" style="display:none; margin-left:230px; width:300px; height:240px;">
                <div class="bs-example" data-content="详细信息">
                    <div class="form-group">
                        <label for="j_menu_name" class="control-label x85">菜单名称：</label>
                        <input type="text" class="form-control validate[required] required" name="m.name"
                               id="j_menu_name" size="15" placeholder="名称"/>
                    </div>
                    <div class="form-group">
                        <label for="j_menu_url" class="control-label x85">URL：</label>
                        <input type="text" class="form-control" name="m.url" id="j_menu_url" size="15"
                               placeholder="Url"/>
                    </div>
                    <div class="form-group">
                        <label for="j_menu_tabid" class="control-label x85">tabid：</label>
                        <input type="text" class="form-control" name="m.tabid" id="j_menu_tabid" size="15"
                               placeholder="tabid"/>
                    </div>
                    <div class="form-group">
                        <label for="j_menu_target" class="control-label x85">target：</label>
                        <select class="selectpicker show-tick" id="j_menu_target" data-style="btn-default btn-sel"
                                data-width="auto">
                            <option value=""></option>
                            <option value="navTab">navTab</option>
                            <option value="dialog">dialog</option>
                        </select>
                    </div>
                    <div class="form-group" style="padding-top:8px; border-top:1px #DDD solid;">
                        <label class="control-label x85"></label>
                        <button class="btn btn-green" onclick="M_Ts_Menu();">更新菜单</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix" style="margin-top:20px;">
            <div style="float: left; width: 220px;">
                <p><label class="control-label x120">默认编辑删除按钮：</label><span id="ztree-1"
                                                                            class="label label-default">无</span></p>
                <p><label class="control-label x120">自定义添/删按钮：</label><span id="ztree-2"
                                                                            class="label label-default">无</span></p>
                <p><label class="control-label x120">复选框：</label><span id="ztree-3" class="label label-default">无</span>
                </p>
                <p><label class="control-label x120">拖拽事件：</label><span id="ztree-4"
                                                                        class="label label-default">无</span></p>
                <p><label class="control-label x120">删除事件：</label><span id="ztree-5"
                                                                        class="label label-default">无</span></p>
                <p><label class="control-label x120">自定义DOM：</label><span id="ztree-6"
                                                                          class="label label-default">无</span></p>
            </div>
            <div style="margin-left:230px;">
                <textarea style="width:400px; font-size:12px;" rows="5" id="ztree-log"></textarea>
            </div>
        </div>
        <hr>
        <div class="btn-group" style="margin-top:5px;">
            <button type="button" class="btn-default btn-sm" onclick="changeZtree(1);">默认编/删按钮</button>
            <button type="button" class="btn-default btn-sm" onclick="changeZtree(2);">自定义添/删按钮</button>
            <button type="button" class="btn-default btn-sm" onclick="changeZtree(3);">复选框</button>
            <button type="button" class="btn-default btn-sm" onclick="changeZtree(4);">拖拽</button>
            <button type="button" class="btn-default btn-sm" onclick="changeZtree(5);">删除</button>
            <button type="button" class="btn-default btn-sm" onclick="changeZtree(6);">自定义DOM</button>
            <button type="button" class="btn-orange btn-sm" style="float: right;" onclick="changeZtree(7);">提交树</button>
        </div>
        <h4><a href="doc/plugin/ztree.html" data-toggle="navtab" data-id="doc-ztree"
               data-title="zTree">点我查看初始化方法及参数设置</a></h4>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li>
            <button type="button" class="btn-close" data-icon="close">关闭</button>
        </li>
    </ul>
</div>