master

分支 (2)

管理

管理

master

xvpindex

B-JUI
/
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>