<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - noIcon </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
.select{position:relative;228px;}
.select input{218px;padding-left:10px;height:26px;}
.select span{position:absolute;right:0;top:13px;0;height:0;border-8px;border-color: #6B4CE6 transparent transparent transparent;border-style:solid;cursor:pointer;}
</style>
<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: {
showLine: false,//不显示连接线
showIcon: showIconForTree //图标不显示
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: zTreeOnClick
}
};
var zNodes =[
{ id:1, pId:0, name:"精油疗方", open:true},
{ id:11, pId:1, name:"精油疗方工具"},
{ id:111, pId:11, name:"精油瓶"},
{ id:112, pId:11, name:"精油量杯"},
{ id:113, pId:11, name:"香薰灯"},
{ id:114, pId:11, name:"皂盒"},
{ id:13, pId:1, name:"单方精油", isParent:true},
{ id:2, pId:0, name:"身体护理"},
{ id:21, pId:2, name:"纤体", open:true},
{ id:211, pId:21, name:"纤体绷带"},
{ id:212, pId:21, name:"纤体霜"},
{ id:213, pId:21, name:"纤体贴"},
{ id:22, pId:2, name:"沐浴露",isParent:true},
{ id:23, pId:2, name:"身体乳",isParent:true},
{ id:3, pId:0, name:"卸妆", isParent:true}
];
function showIconForTree(treeId, treeNode) {
return !treeNode.isParent;
};
function zTreeOnClick(event, treeId, treeNode) {
if(!treeNode.isParent){
var selval=$("#sel");
$(selval).val(treeNode.name);
}
};
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>不显示节点图标和线的树</h1>
<div class="wrapbox" style="margin-left:50px">
<div class="select">
<input type="text" id="sel"><span class="close"></span>
</div>
<ul id="treeDemo" class="ztree" style="height:120px;margin-top:0;display:none"></ul>
</div>
<script>
$(".select span").click(function(){
if($(this).hasClass('close')){$("#treeDemo").slideDown();$(this).removeClass('close')}
else{$("#treeDemo").slideUp();$(this).addClass('close')}
})
</script>
</BODY>
</HTML>
zTree -- jQuery 树插件：http://www.treejs.cn/v3/main.php#_zTreeInfo