ztree笔记

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE> ZTREE DEMO - one click</TITLE>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

<script type="text/javascript">

var setting = {

view: {

dblClickExpand: false,

showLine: false

},

callback:{

onClick:function(event,treeId,node,clickFlag){

console.log(event,treeId,node);

onClick(event,treeId,node,clickFlag);

}}

,

data: {

simpleData: {

enable: true

}

},

};

var zNodes =[

{ id:1, pId:0, name:"所有", open:true},

{ id:11, pId:1, name:"父节点 1-1", open:true},

{ id:111, pId:11, name:"叶子节点 1-1-1", open:true},

{ id:1111, pId:111, name:"叶子节点 1-1-1"},

{ id:112, pId:11, name:"叶子节点 1-1-2"},

{ id:113, pId:11, name:"叶子节点 1-1-3"},

{ id:114, pId:11, name:"叶子节点 1-1-4"},

{ id:115, pId:11, name:"叶子节点 1-1-5"},

{ id:12, pId:1, name:"父节点 1-2", open:true},

{ id:121, pId:12, name:"叶子节点 1-2-1"},

{ id:122, pId:12, name:"叶子节点 1-2-2"},

{ id:123, pId:12, name:"叶子节点 1-2-3"},

{ id:124, pId:12, name:"叶子节点 1-2-4"},

{ id:13, pId:1, name:"父节点 1-3", open:true},

{ id:131, pId:13, name:"叶子节点 1-3-1"},

{ id:132, pId:13, name:"叶子节点 1-3-2"},

{ id:133, pId:13, name:"叶子节点 1-3-3"},

{ id:134, pId:13, name:"叶子节点 1-3-4"}

];

function onClick(e,treeId, treeNode) {

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

zTree.expandNode(treeNode);

}

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting, zNodes);

});

</script>

<style type="text/css">

.ztree li button.switch {visibility:hidden; width:1px;}

.ztree li button.switch.roots_docu {visibility:visible; width:16px;}

.ztree li button.switch.center_docu {visibility:visible; width:16px;}

.ztree li button.switch.bottom_docu {visibility:visible; width:16px;}

</style>

</HEAD>

<BODY>

<div class="content_wrap">

<div class="zTreeDemoBackground left">

<ul id="treeDemo" class="ztree"></ul>

</div>

</div>

</BODY>

</HTML>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值