上一篇文章“asp.net treeview控件无刷新选择和删除节点的ajax方法”中说明了如何选择和删除节点,接着来说一下如何无刷新的添加节点。实例请到“用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)”下载。
TreeView控件生成的html结构已经在上一篇中说明,这里再简单说一下,一个节点就是在一个table里面的span标签,这个span所在的td的前一个td放的是节点的缩进,一个div标签,是第几层节点有几个这样的td。另外还有一个图片,就是控制节点展开和收缩的加减号,如果节点有子节点的话,就要有这个图片。详细看下面的代码。
三个变量newNodeTemplete定义了一个节点的table,indent定义了一个缩进用的td,还有一个toggle就是控制展开和收缩用的图片。变量中$..$这个形式都是为了替换具体节点的内容。
注意这里table中的这里“<td><img src='+TreeView1_Data.images[3]+' alt="" /></td>”这个是节点前的一个图片,TreeView1_Data.images[3]是TreeView控件自己定义的图片,其实就是一个空白图片,但是如果这个节点有子节点的时候,这个img就要用toggle定义的html代码来替换。
另外还有这里“onclick=SelectNode(this)”,这个是选择节点的方法,但是这个在treeview生成的html代码里是没有的,但是在这里必须要有,因为jQuery无法为用代码添加的html节点添加事件,这里就简单一点直接加上这个事件。用ajax方法添加上节点之后,刷新页面后就没有这个属性了。
下面看一下添加节点的代码
以上就是添加节点的代码,需要说明的是节点的id,它与节点的值没有关系,它的形式是“TreeView1t35”这个样子,t前面的TreeView1是TreeView控件的id,t后面的数字是节点的编号,每增加一个节点这个编号就加一。另外selectedNode是一个全局变量,记录这被选中的节点,还有包含子节点的div请看选择和删除节点的文章里面对TreeView生成的html的详细说明。
还有就是GetMaxID(),DoExpand(),SetIndent(subdiv)这三个函数在实例中都有,代码都比较简单,就不做详细说明了。
再来看具体的添加操作
简单说明一下,用jQuery的ajax方法把要添加的节点的文本和父节点的值传到后台,处理后返回的是新添加的节点的值,这个看实例中后台代码就可以明白。