效果图，如上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/ligerUi/ligerui.min.js"></script>
<link rel="stylesheet" href="../css/skins/Aqua/css/ligerui-all.css" />
<script>
var treeData = [{
'name': '节点1',
'no': 0,
'text':'哈哈',
'children': [{
'name': '节点1.1',
'no': 1
},
{
'name': '节点1.2',
'no': 2
},
{
'name': '节点1.3',
'children': [{
'name': '节点1.3.1'
},
{
'name': '节点1.3.2'
}
]
},
{
'name': '节点1.4'
}
]
},
{
'name': '节点2','no':'yes'
}
];
$(function() {
$("#tree").ligerTree({
checkbox: false,
parentIcon: null,
childIcon: null,
slide: false, //是否显示动画
nodeWidth: 100,
idFieldName: 'id',
textFieldName: 'name', //指定数据中要显示的属性名，默认为"text"
data: treeData,
onSelect: function(node) {
if(!node.data.name) {
return
};
//处理导航树的点击事件TODO
alert(node.data.no);
}
});
//var tree = $("#tree").ligerGetTreeManager();
//tree.setData(treeData) ; //或者这样设值
});
</script>
</head>
<body>
<ul id="tree"></ul>
</body>
</html>