select tree 简单实用-下拉树
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,名称,跳转到urlts.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><!-- onchange="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 = {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.pid == this._rootId) {this.createSubOption(1, this._data);}}}// 创建子节点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.pid == current.id) {this.createSubOption(level + 1, this._data);//寻找子节点}}}大家都说zTree不错，简单看了下，外观比较漂亮，有机会试用下http://www.baby666.cn/v3/demo.php#_508
页:
[1]