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="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>
</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>
- 在需要分级的treeitem元素中,设置containter属性为"true"。这样就允许用户可以通过双击来打开和关闭内部的行。通过设置open属性为"true"或"false",就可以设置初始状态下内部行的打开和关闭。
- 将表头中的主要列设置primary属性,这样就可能在有分级情况的这一列单元格的前面显示一个小三角或加号。一旦某列被设为primary,用户是无法关闭的。
- 在某个需要分级的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不支持。
分享到:
相关推荐
一个很完善的tree,使用xul界面语言完成。 一个很完善的tree,使用xul界面语言完成。 欢迎大家使用,提出意见。
为了在最新的FireFox中使用XUL,请安装 来自 并启用 (不要被错误消息打扰,确定。)以在FireFox ESR(或seamonkey,pear moon或waterfox或其他REAL浏览器)中显示XUL,而不是受限制的每晚“ FFox”) NOW:在此处...
XUL 是经过测试的真正...在本教程,您开始使用 XUL 进行编程,并学习一些帮助您开发 XUL 应用程序的工具。当您的 Web 开发技术得到提高时,您可以构建一个基于 XUL 的博客编辑器,并通过它使用 XUL 构建桌面应用程序。
XUL标签的介绍及用法,最近学ZK淘换来的,挺全的
是一个xul music player
事实证明XUL是成功的UI开发技术,本文以一个最简明的视角来向看官展示如何使用XUL来开发自己的定制UI程序。由于XUL及相关技术是基于WEB的,所以会HTML开发读者会更容易理解它的整个体系。当然XUL也用于桌面程序开发...
XUL开发手册.pdf
xul文档具体标签说明和例子xul文档具体标签说明和例子
一个用xul写的便签,可以实现记事的功能
xul是XML User Interface language 的简写,是Mozilla基金会开发的一种基于XML的标记语言,一般用来构造程序的界面,典型的firefox就是这种的实践,目前XUL只能被Firefox的浏览器支持,它和js,css,html等理论上能够...
清晰给出繁杂配置和步骤, c++开发xpcom组件的完整例子, vs2005 环境配置 ,xpconnect调用xpcom组件, xul 中使用javascript 内有源码,配置图示
该xul是我学习心得与体会
NULL 博文链接:https://monlyu.iteye.com/blog/348583
XUL (XML User-interface Language - 基于 XML 的用户接口语言)是一种新的富客户端(Rich Client)技术,是 Mozilla 和 Firefox 的核心语言,是一种用来快速开发跨...任何能使用和解析 XML 的地方 XUL 都可以出现。
您将能够使用HTML构建桌面UI,同时仍然使用桌面UI方法。 建造 请注意,尽管该项目使用NodeJS和Electron,但Zuul的实际源代码是纯JavaScript,并不依赖于NodeJS。 NodeJS仅用于构建可分发内容,而Electron则用于对其...
博文链接:https://zsp.iteye.com/blog/232047
开发firefox扩展时使用XUL文件的自动补齐acp文件,用于editplus。不知能否用于其他编辑器 对XUL reference中列出的标签都可进行自动补齐, 如box标签,使用自动补齐之后只需要输入box然后按空格键即可自动补齐为 ...
ffjcext.xul
XUL Mozilla XPCOM Gecko 学习资料
jjwxc_bbs功能: 红晋江 网站帖子的右键查询菜单安装:说明:右键出现 红晋江 选单,可以直接在当前页面进行一键查询红晋江帖子。此版本以 开发使用截图参考:旧版,以 XUL::App 开发