Jquery实现无限级树状结构并动态添加增删改等编辑功能

前面简单说了一下Jquery+CSS Sprites实现无限极树状的实例讲解，而里面纯碎只是用一般的DIV+CSS实现视觉上的效果，但真正涉及到树状节点的添加、删除、修改等操作时，整个排版结构要非常讲究。不然要实现树状无限极并动态更改其内部结构时会显得复杂无比。就简单举个例子：比如之前的实例当中，没有下级的子节点是用LI显示的；但细想一下，要是动态给它添加子节点，原来的整个UL结构不就是要改变吗？这样操作起来不但复杂，而且也不利于扩展。

针对这种情况，本人根据自己的开发经验设计了一种模式（功能包括：1、修改节点；2、删除单个子节点和父节点及其下面所有子节点；3、添加同级或下级节点；4、自动判断同级节点是否有相同名称；5、新节点根据已有节点名称而自动命名），大体效果如下图所示（每个元素都是由DIV“包装”起来的）：

 

打开演示地址

从上图可见，无论是父节点还是子节点，它们都是有一个DIV套起来的，不同的是class的值（[class=ParentNode]表示下级有子节点，[class=ChildNode]表示下级没有任何子节点）。而为了方便Jquery对子节点的操作，外层都加了一个“壳”（[class=Row]）。这样看起来，无论树状里面有多少个子层，从结构上就明显看出只有同级和上下级两种关系了。

其中，每个节点里面包含了三个元素：节点名称、节点对应的修改按钮以及对其进行的增删改操作。

而本人在做这个树状结构的操作设计时，印象最深的应该是每个操作的函数和过程定义。因为这不仅是一个实现页面动态显示的功能，最关键的是要对新内容进行动态地添加各种事件行为。所以平时习惯对鼠标事件直接进行定义的朋友们也可以交流一下这方面的经验。当然，这只是纯静态网页的效果，要是想数据库结合实现，有兴趣的朋友可以再结合Ajax来动态实现……