助力高校计算机教育 —— 码云为老师推出免费高校版,高达 200 人的协作团队
Watch Star Fork

xknaan / B-JUIJavaScriptApache-2.0

加入码云
与超过 200 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
B-JUI(Best jQuery UI) 前端框架,轻松开发,专注您的业务,从B-JUI开始。
一键复制 编辑 原始数据 按行查看 历史
ztree.html 16.77 KB K'naan 提交于 2015-05-09 11:38 . V1.1正式版,全新组件datagrid,其他优化。
<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>

评论 ( 0 )

你可以在登录后,发表评论

10_float_left_people 10_float_left_close