动态载入数据的无刷新TreeView控件(5)

今天讨论一下TreeView控件的交互问题。包括鼠标对TreeNode的选取(单选&多选)、Checked；键盘对TreeNode的选取(单选&多选)、Checked；通过代码和控件交互三种方式。最后提供一个现阶段完成版本的演示示例供大家测试。

使用封装好的代码来操作TreeView的UI，是我们上次主要讲述的内容。要实现交互，最重要的就是管理键盘和鼠标的事件。我原来讲过，关于TreeNode的UI外观，我们在TreeNodeBase那个类中进行处理，而把TreeNode的事件处理放在TreeNode类中来处理，这样的设计是为了提供一个清晰的编程结构。下面我们先看一下TreeNode类的定义和TreeNode.Render方法的代码：

</script>

当然，为了能灵活的使用鼠标和TreeViee交互，我们需要处理大部分的鼠标事件。包括click、mousedown、mouseover、mouseout和mousemove。同时在处理这些鼠标事件时，很多时候还需要和键盘配合来操作，比如：Shift+Click的区段选取，Ctrl+Click的check方式选取等。

在TreeNode的Render方法中，处理节点展开和收缩的事件是比较简单的，因为那只是一个开/关状态的转换。在TreeNode上做Check操作时需要注意，为了让控件的脚本类(TreeNode的实例)和DHTML类之间属性值同步，我们需要完全控制Checkbox的状态的变化，并且为了避免后面我们使用键盘来Check节点时出错，我们还必须保证Checkbox始终不能获得焦点。

input.onfocus = function(){ FindParentElement(this, 'TD').focus(); };

// 总是把焦点置于Checkbox的Parent元素上

由于我们已经实现了一套对UI更新的机制，就是统一使用ApplyUIChange()方法来负责。所以除了mousedown事件外，其它的事件处理函数都非常的简单，只需要设置一下控件属性，然后调用ApplyUIChange()就行了，比如：__CheckBoxOnClick()，它的实现就非常的简单清晰。

TreeNode.__CheckBoxOnClick = function()
{
var elmtNode = FindParentElement(this, 'TR');
if ( elmtNode && elmtNode.Comment == 'TreeNode' )
{
var objNode = elmtNode.Object;
if ( objNode )
{
objNode.SetChecked(this.checked);
}
}
};

但是由于mousedown事件需要和键盘配合，并且本身它自己就承担着很多的交互功能，所以处理起来比较麻烦。而其中最麻烦的就是按住Shift键再Click的区段TreeNode选取功能。

if ( evt.shiftKey && !evt.ctrlKey )
do
{
curNode.SetSelected(true);
curNode = curNode.GetNextRowNode();
}
while(curNode != endNode);

简单吧，可是这个curNode.GetNextRowNode()又不是很简单</script>
上面的代码，switch前是为了取到被操作的TreeNode对象。+、-、Space和Esc都很简单，从代码中一眼就看明白了，麻烦的就是Up和Down这两个操作。其实在这里希望实现的操作都是WinControl的TreeView中支持的，只是被移到Web的控件上而已。Up和Down操作就是Selected最近那个节点的相邻节点，或上面的或下面的。如果我们在一个层次上来找一个节点的上一个和下一个，那是非常简单的index-1、index+1就行了，可是在树这样的层次结构中，寻找一个它的看起来的上一个或下一个展开的节点，就比较郁闷了。两个方法：

var previousNode = currentNode.GetPreviousRowNode();
var nextNode = currentNode.GetNextRowNode();
要说明白它们是干嘛的，都比较难。这么说吧，当这个TreeView展现我们面前时，我们暂时忽略节点之间的层级关系，把它们的节点看成向List的条目一样的结构，GetPreviousRowNode()，就是取上一行的Node，GetNextRowNode()就是取当前节点下一行的节点。

</script>

弄个图来配合代码看可能比较容易理解些

：



嗯，其它的问题先玩玩demo再继续讨论吧

。

to be continued . . .