xul : tree的用法

Tree也是XUL中的复杂控件之一，理解XUL中的tree要注意区别传统概念中的treeview，因为这里的tree除了可以实现treeview，还有一个重要的功能，就是实现DataGrid。

使用tree来实现DataGrid

看下面例子：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="findfile-window"   
title="Find Files"   
orient="horizontal"   
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<tree id="tree1" flex="1">
  <treecols>
    <treecol id="nameColumn1" label="Name" flex="1"/>
    <treecol id="addressColumn1" label="Address" flex="2"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="[e-mail]"/>
        <treecell label="Top secret plans"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="[e-mail]"/>
        <treecell label="Let's do lunch"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

</window>

1.tree表示DataGrid的开始
2.treecols表示列集合，列的标题可以指定在treecol中（label属性），可以用flex属性来控制列宽,treecol必须设置id属性，用于控制该列显示与否
3.treechildren表示行集合
4.右上角的按钮可以选择隐藏或显示列，可以设置tree的hidecolumnpicker =true来隐藏这个按钮，可以设置treecol的hidden ="true"来选择某一列默认不显示
5.单击鼠标可以选中某一行，也可按住shift或ctrl来选中多行，如果只能单选一行，需要设置tree的seltype ="single"
6.如果要允许列可拖动（点击表头，拖动，可交换列的位置），设置tree的enableColumnDrag ="true"
7.如果想要改变列宽，在两个treecol标签之间加上<splitter class="tree-splitter"/>

 效果：

用tree来实现TreeView

分级树是通过在某个treeitem中嵌套treechildren来实现的。

<tree flex="1">
  <treecols>
      <treecol id="firstname" label="First Name" primary="true" flex="3"/>
      <treecol id="lastname" label="Last Name" flex="7"/>
  </treecols>
  <treechildren>
    <treeitem container="true" open="true" >
      <treerow>
        <treecell label="Guys"/>
      </treerow>
      <treechildren>
        <treeitem>
          <treerow>
            <treecell label="Bob"/>
            <treecell label="Carpenter"/>
          </treerow>
        </treeitem>
        <treeitem>
          <treerow>
            <treecell label="Jerry"/>
            <treecell label="Hodge"/>
          </treerow>
        </treeitem>
      </treechildren>
    </treeitem>
  </treechildren>
</tree>

1. 在需要分级的treeitem元素中，设置containter属性为"true"。这样就允许用户可以通过双击来打开和关闭内部的行。通过设置open属性为"true"或"false"，就可以设置初始状态下内部行的打开和关闭。
2. 将表头中的主要列设置primary属性，这样就可能在有分级情况的这一列单元格的前面显示一个小三角或加号。一旦某列被设为primary，用户是无法关闭的。
3. 在某个需要分级的treeitem中嵌入treechildren元素。注意不要放在treerow中，那样做无效。

效果：  

自定义view

      这因该是我们最常用的，从数据库中取出数据源后，显示在DataGrid或treeview中，对于这样的tree，只需要定义columns，treechildren留空：

<tree id="my-tree" flex="1">
  <treecols>
    <treecol id="namecol" label="Name" flex="1"/>
    <treecol id="datecol" label="Date" flex="1"/>
  </treecols>
  <treechildren/>
</tree>

      在这里，数据源是一个对象，这个对象必须实现nslTreeView接口(这个还不太理解。。。)，可以用javascript来实现这个对象，如果一个页面中有多个tree，需要为每一个tree写一个treeView对象。

<script>
var treeView = {
    rowCount : 10000, //设置总行数
    getCellText : function(row,column){//设置数据
      if (column.id == "namecol") return "Row "+row;
      else return "February 18";
    },
    setTree: function(treebox){ this.treebox = treebox; },
    isContainer: function(row){ return false; },
    isSeparator: function(row){ return false; },
    isSorted: function(){ return false; },
    getLevel: function(row){ return 0; },
    getImageSrc: function(row,col){ return null; },
    getRowProperties: function(row,props){},
    getCellProperties: function(row,col,props){},
    getColumnProperties: function(colid,col,props){}
};

   最后一步是把该对象指定到一个具体的tree      

    document.getElementById('my-tree').view = treeView;
</script>

tree的事件

 1.选中tree的某一节点

 <tree id="treeset" onselect ="alert('You selected something!');">

 

与listbox比较
1.listbox支持任意形式的内容，但tree只支持text和images
2.tree支持nested rows，listbox不支持。