Valen Won

转一篇两年前的老博客过来，两年前写了这篇文章后，陆续有很多网友来加我的MSN讨论。时至今日，我早已没有从事web应用开发的第一线工作，然而还是有网友来询问我，可见知识带来影响是长久的。bs tree实际上就是一个复杂的表格，由特殊的图片和排列，使得它看起来像一个tree view，
而构造这个tree的工具，就是javascript，现在做tree view 的js已经非常的多了。大家在做的时候，只要考虑数据如何生成（从总线，httpsession，webwork对象...），调用js lib的api 把数据传进去，一个tree view，就诞生了，原理是非常简单。嘿嘿。

最近由于工作需要，要求作一个带checkbox的treeview，要在EOS5.0.1里面弄无限级带checkbox的就有点困难了。后来就在google上go了半天中文网，一个可用的都没有。
最后在http://www.blueshoes.org/
发现这个终极treeview，功能超级强大，所以模块都实现了组件化，提供的21个例子基本涵盖了treeview常用功能。唯一可惜的是，例子提供动态功能不强，几乎不能用。我仔细研究了它的结构后，重新写了个动态加载数据js脚本。
我做的就是把它和ORACLE联系起来，做成动态的treeview，并且客户端可以解析出选中checkbox属性和内容。
下面讲讲基本过程：
－JS相关－－－－－－－－－－－－－－－－－－－－－－－1.先下载需要的JS，网站上有下载，好像是免费的，里面有需要的图片和JS。Bs_Checkbox.class.js，Bs_TreeElement.class.js，Bs_Tree.class.js,Bs_Array.class.js,Bs_Misc.lib.js,这5个就够了，下载后解压，里面就有。（其实把例子的页面另存为也可以获得，比较简单）
2.把JS和图片拷贝到相关web目录里面，然后更改Bs_Tree.class.js里面的imageDir为你的图片路径，否则你treeview里面全是XX。
3.在你的web服务器运行例子（下载包里面有20个），熟悉一下吧。
－ORACLE相关－－－－－－－－－－－－－－－－－－－－4.准备数据，把你要构造的数据用start with connect by 构件成以下结构
id name 所属组的总行数 是否叶子节点
1 中国 2 0
2 四川 2 0
3 成都 1 1
4 广东 2 0
5 广州 2 1
6 深圳 2 1
7 日本 2 0
8 九洲 1 0
9 大阪 1 1
所属组的总行数指的是和它同级并且父节点相同的节点总数，例如一级节点有中国日本两个，四川 广东为两个，九州 1 个。
构造的时候用父节点ID分组，用count(*) over(...)就可以完成。
而求叶子节点在出现10g的伪列前，就比较困难，而且效率低下，不过方法已经有了很多，大家可以选择使用。我用connect-sys-by_path来分析出是否有子节点，效率低啊，希望高手指导。
顺序一定自上向下，数据要准确。
－－－－－－－－－－－－－－－－－－－－－－－－－－－
5.构造4个JS数组。用logic:iterate 构建数组
rnTable =(1,2,3,4,5,6...);
nametable=(中国,四川,成都....);
countTbale....
leaftable....
我花了大半天时间研究数据结构后，重新写了一段生成数组的代码，只有数行，通过嵌套实现目标，而且满足无限级（只要你机器运行得了）。
代码如下：
Var j=0;
Var callNumber=1;
function createRandomData(callNumber) {
var a = new Array;
for (var i=0; i<callNumber; i++) {

a = new Array;
a['caption'] = nameTable[j];//数组的caption属性赋值，也就是节点显示值
a['target'] = rnTable[j];//id值，用于计算用，比如中国 对应 1
j++;
if (deepTable[j-1]==0) { //是否有子节点.

a['children'] = createRandomData(coluTable[j]);//生成子节点
// coluTable[j]就是同级总行数，判断该级节点该循环运行级次
}
}
return a;
}
6.使用它自己方便生成tree
t = new Bs_Tree();
t.useCheckboxSystem = true;
t.checkboxSystemWalkTree = 3;
t.lookAhead = 1; //set to -1 to see how long it takes to load everything from the

var a = createRandomData(coluTable[0]);
t.initByArray(a);

t.drawInto('treeDiv1');
－－－－－－－－－－－


tree