具有可调整列大小的 JScript 树列表控件

• 下载演示项目 - 8 Kb

引言

注意：此代码需要 Internet Explorer 5.5 或更高版本。

继我使用 JScript 和 ASP 制作的树列表控件（文章在此）之后，我创建了一个新的控件，完全不需要 ASP。一次添加大量节点的速度不是很快，但是展开和折叠一个节点是瞬时的。将鼠标悬停在某行中的文本上将导致该行的节点突出显示，从而更容易确定您正在查看哪个节点。

用法

创建树的实例

var myTree = new TreeListControl("myUniqueID");

添加列

myTree.addColumn([column name], [width], [alignment]);

创建树，指定父元素

myTree.createIn(document.body);

添加节点

myTree.addNode([parent ID], [relative path to icon], [expand branch?], 
                [column text 1], ..., [column text n]);

删除节点

myTree.deleteNode([node ID]);

API

方法

TreeListControl ( strID )

树的每个实例都必须有其自己的唯一标识符。这将成为该元素的 .id 属性，并用于所有节点的 id 赋值。

TreeListControl . addColumn ( strTitle[, [intWidth[, strAlign]]] )

向树添加一列。这必须在调用 TreeListControl 的 createIn() 方法之前完成。

TreeListControl . createIn ( objContainerElement )

这构建了主树对象，并将其附加到传入的对象。

TreeListControl . addNode ( intParentID, strIconSrc, boolExpandChildren, strColumnText1, ..., strColumnTextN )

用于在树中添加一个条目。返回值是该节点的整数 ID 值，如果需要，可以用来稍后引用该节点。首先提供要添加的节点的父 ID（如果无父节点，则为 0 或 null），然后是图标的路径，然后是 true/false，具体取决于您是否希望此分支被折叠或展开，然后是每列的文本。如果您在列的文本中使用字符串 [[id]]，它将被替换为该节点被分配的实际 ID 号。此外，如果添加了一个节点，并且指定的父节点不存在，它将被排队并添加到父 ID 被添加到树中时。

TreeListControl . setText ( intNodeID, intColumnIndex, strText )

更改指定列中节点的文本。如果您在列的文本中使用字符串 [[id]]，它将被替换为该节点被分配的实际 ID 号。

TreeListControl . deleteNode ( intNodeID )

删除指定的节点及其所有子节点。

TreeListControl . deleteAllChildren ( intNodeID )

删除指定节点的所有子节点，但不删除节点本身。

TreeListControl . redrawAllIcons ( )

强制树重新绘制使树看起来正确的线条连接图像。如果在属性 autoRedrawIcons 设置为 false 时添加了节点，则必须调用此方法。

属性

TreeListControl . autoRedrawIcons

添加新节点时，这决定是否重新计算要绘制哪些线条连接器图像，以使树看起来正确。如果一次添加大量节点，请将其设置为 false，添加节点，然后将其设置为 true。这应该可以加快操作速度。

Example usage

function addone(parentid) {
    var opt = "[ Delete";
    opt += " | Add Child ]"
    var newid = xx.addNode(parentid,
                xx.pathtoicons+"icon_folder.gif", //the icon to use
                true, //expand this node's children?
                s[Math.floor(Math.random()*s.length)], //value for column 1
                s[Math.floor(Math.random()*s.length)], //value for column 2
                s[Math.floor(Math.random()*s.length)], //value for column 3
                s[Math.floor(Math.random()*s.length)], //value for column 4
                opt); //value for column 4
}

xx = new TreeListControl("tlc1"); //create an instance of the control 
                                  // and specify its unique identifier string
xx.autoRedrawIcons = false;       //don't calculate the icons until we've added
                                  // all the nodes (faster this way)
xx.pathtoicons = "treelistcontrol/treeicons/"; //specify the path to the tree 
                                               // icons
xx.addColumn("Things",250) //add some columns (label, width, alignment)
xx.addColumn("More Things",150)
xx.addColumn("Interesting Things",150)
xx.addColumn("Other Things",150)
xx.addColumn("Options",null,"right") //the last column should not have a width

xx.createIn(document.body); // create the tree, passing in the container object
                            //to generate the tree inside

s = new Array("yay","cool","wonderful","great","awesome","fluff",
              "green","beans","mean","machine", "high","balloons",
              "flying","for","fun","great","happy",
              "apples and cherries","bump"); //make some random text values
for(var z=0; z<50; z++){
    addone(Math.floor(Math.random()*z));
}

xx.autoRedrawIcons = true; //remember to set this back to true so that future 
                           //nodes added will be drawn correctly
xx.redrawAllIcons(); //since no icons were drawn, redraw all of them

历史

2002 年 10 月 5 日 - 更新了源代码