html:<html>
<head>
<title></title>
<script type="text/javascript" src="TreeSelector.js"></script>
<script type="text/javascript">
window.onload = function() {
var ts = new TreeSelector("selectTree");//select的id
//id,父id,名称,跳转到url
ts.add('0', '-1', '系统主页', 'http://www.baidu.com/index.html');
ts.add('1', '-1', '批发系统', 'http://www.google.com');
ts.add('2', '1', '前端业务系统');
ts.add('3', '1', '业务监控屏');
ts.add('4', '1', '系统管理');
ts.add('5', '-1', '终端系统');
ts.add('6', '5', '门店');
ts.add('7', '5', '三级站');
ts.add('8', '5', '呼叫中心');
ts.add('9', '5', '管理中心');
ts.add('10', '5', '业务监控屏');
ts.add('11', '5', '系统管理');
ts.add('12', '8', '系统管理2222');
ts.add('13', '12', '系统管理2222');
ts.add('14', '12', '系统管理2222');
//显示
ts.createTree();
}
</script>
</head>
<body>
<!-- οnchange="goPage();" -->
<select id="selectTree" ></select>
</body>
</html>
//创建TreeSelector对象
function TreeSelector(item) {
this._data = new Array();
this._item = document.getElementById(item);
this._rootId = -1;// 规定根节点-1
}
// 增加一个节点
TreeSelector.prototype.add = function(_id, _pid, _text, _url) {
this._data[this._data.length] = {
id : _id,
pid : _pid,
text : _text,
url : _url
};
}
// 创建树
TreeSelector.prototype.createTree = function() {
var len = this._data.length;
for ( var i = 0; i < len; i++) {
if (this._data[i].pid == this._rootId) {
this.createSubOption(1, this._data[i]);
}
}
}
// 创建子节点
TreeSelector.prototype.createSubOption = function(level, current) {
var blank = "";
if (level != 1) {
for (a = 0; a < level; a++) {
blank += " ";
}
blank += "├-";
}
this._item.options.add(new Option(blank + current.text, current.id));// 添加Option选项
for ( var j = 0; j < this._data.length; j++) {
if (this._data[j].pid == current.id) {
this.createSubOption(level + 1, this._data[j]);//寻找子节点
}
}
}
大家都说zTree不错，简单看了下，外观比较漂亮，有机会试用下http://www.baby666.cn/v3/demo.php#_508
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
