XUL tree
По началу tree воспринимается просто за таблицу, но на самом деле его способы применения и работы очень широки. Но в начале о его табличной ипостаси
<tree
flex="1"
rows="2"
editable="true"
enableColumnDrag="true"
hidecolumnpicker="true"
onselect="selecting(currentIndex);"
>
<treecols>
<treecol id="sender" label="Sender" flex="1"/>
<splitter class="tree-splitter"/>
<treecol id="subject" label="Subject" flex="2"/>
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="joe@somewhere.com"/>
<treecell label="Top secret plans"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="mel@whereever.com"/>
<treecell label="Let's do lunch"/>
</treerow>
</treeitem>
</treechildren>
</tree>
<script>
function selecting(idx){
alert("Selected " + idx);
}
</script>
Надо знать что:
rows="2" - количество строк которые будет видно, по умолчанию 1
editable="true" - ячейки можно изменять двойным кликом
enableColumnDrag="true" - можно перетягивать колонки мышкой меняя их расположение
hidecolumnpicker="true" - убрать с боку инструмет для спрятывания колонок
onselect="selecting(currentIndex);" - показывает номер выделенной ячейки
<splitter class="tree-splitter"/> - благодаря ему можно именять размер колонок
Пример