<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
<style type="text/css">
.box
{
float: left;
}
.tree
{
width: 230px;
height: 200px;
margin: 10px;
border: 1px solid #ccc;
overflow: auto;
}
h4
{
margin: 10px;
}
</style>
<script type="text/javascript">
var manager=null;
$(function () {
$("#tree1").ligerTree({
nodeWidth: 200, //Tree控件宽度
data: createData(), //Tree数据源
checkbox: true, //是否使用Checkbox
idFieldName: ‘id‘, //绑定id
isExpand: 2, //是否展开节点 FALSE为不展开 TRUE展示所有节点 指定数字为展开指定节点
slide: false, //节点展开效果False无效果 TRUE缓慢展开效果
parentIDFieldName: ‘pid‘//绑定夫ID
});
manager = $("#tree1").ligerGetTreeManager();
});
//数据输出
function createData() {
var data = [];
data.push({ id: 1, pid: 0, text: ‘1‘, url: "www.baidu.com",ischecked: true});//设置节点ID 夫ID 节点内容 节点链接 选中状态
data.push({ id: 2, pid: 1, text: ‘1.1‘ });
data.push({ id: 4, pid: 2, text: ‘1.1.2‘ });
data.push({ id: 5, pid: 2, text: ‘1.1.2‘ });
data.push({ id: 10, pid: 8, text: ‘wefwfwfe‘ });
data.push({ id: 11, pid: 8, text: ‘wgegwgwg‘ });
data.push({ id: 12, pid: 8, text: ‘gwegwg‘ });
data.push({ id: 6, pid: 2, text: ‘1.1.3‘, ischecked: true });
data.push({ id: 7, pid: 2, text: ‘1.1.4‘ });
data.push({ id: 8, pid: 7, text: ‘1.1.5‘ });
data.push({ id: 9, pid: 7, text: ‘1.1.6‘ });
data.push({ id: 20, pid: 0, text: ‘1‘, url: "www.baidu.com" });
data.push({ id: 21, pid: 20, text: ‘12‘, url: "www.baidu.com" });
return data;
}
function getSelected() {
var note = manager.getSelected(); //获取选中节点的内容 非选中chechbox
alert(‘选择的是:‘ + note.data.url);
}
function getChecked() {
var notes = manager.getChecked(); //获取选中Chechebox内容
var text = "";
for (var i = 0; i < notes.length; i++) {
text += notes[i].data.text + ",";
}
alert(‘选择的节点数：‘ + text);
}
function collapseAll() {
manager.collapseAll();//全选
}
function expandAll() {
manager.expandAll();//取消全选
}
</script>
</head>
<body style="padding: 10px">
<input value="全选" onclick="collapseAll()" type="button" />
<input value="取消全选" onclick="collapseAll()" type="button" />
<input value="获取选中内容" onclick="getSelected()" type="button" />
<input value="获取选中Chechebox内容" onclick="getChecked()" type="button" />
<div class="box">
<h4>
不展开节点</h4>
<div class="tree">
<ul id="tree1">
</ul>
</div>
</div>
<div class="l-clear">
</div>
</body>
</html>
时间： 2024-12-22 02:09:19