xmlplus组件设计系列之树(9)

树组件是一种分层组件，广泛应用于各种场景。本章将实现一个简单的树组件。虽然功能有限，但是您可以扩展它来实现您需要的树组件。

数据源

树组件的数据源可以是JSON格式的数据对象、XML结构数据或其他层次结构数据。本章将使用以下JSON格式的数据对象。

var data={ name: 'My Tree '，children :[{ name : ' hello ' }，{ name: 'world' }，{ name: ' child folder '，children :[{ name : ' Alice ' }]}]}；在上面的数据源中，name值显示为树节点的名称，包含子节点的数组表示节点的子节点。

递归结构的设计

HTML中列表元素ul和li组成的对象具有自然的树形结构，我们不妨将它们作为构建树形组件的基本元素。树组件的最外层必须是ul元素，因此我们可以临时定义树组件如下：

tree : { XML : ` ul id=' tree ' Item id=' Item '/ul ` }这里未定义的组件项是需要递归定义的子组件，它会根据提供的数据递归生成后代对象。以下是一种可能的设计：

item : { XML : ` Li id=' item ' div id=' content ' span id=' name '/span id=' expand '/div ul id=' entries '/Li `，map3360 {defer3360' entries'}}请注意，上面的Expand对象用于展开或关闭子对象条目。子对象条目被设置为延迟实例化，并且只有当用户单击展开对象来展开子对象时，对象才会被实例化。

数据的加载和呈现

如前一节所述，我们设置子对象条目来延迟实例化。因此，在为Item提供的数据设置接口时，不应立即实例化条目。先给出数据接口函数。

Item: {//css，xml，map项与fun:函数(sys，items，opts){ vardata；函数val(value){ data=value；sys . neme . text(data . name)；data . children data . children . length sys . expand . show()。文本('[]')；}返回{ val : val }；}}此接口函数val仅设置与当前节点相关的内容。接下来，我们监听扩展对象的点击事件，及时完成组件对象条目的实例化。

Item: {//css，xml，map项与fun:函数相同(sys，items，opts) {var data，opensys.expand.on('click '，function () { open=！打开；sys.expand.text(打开？' [-]' : ' [ ]');打开？(sys . entries . show()load()): sys . entries . hide()；});函数load() { if (sys.entries.children()。长度==0)。值()。val(项目)；}函数val(value){ data=value；sys . neme . text(data . name)；data . children data . children . length sys . expand . show()。文本('[]')；}返回{ val : val }；}}上述代码包含一个open参数，该参数记录当前节点的是否为相关侦听器展开。

动态添加节点

现在我们对上述组件做一个小的扩展，使其支持动态添加树节点的功能。首先，我们向对象条目的子条目添加一个触发器按钮，并将其命名为添加。

项目： { XML : ' Li id=' item ' div id=' content ' span id=' neme '/span id=' expand '/div ul id=' entries ' Li id=' add '/Li/ul/Li '，映射： {defer3360

Item: { //css，xml，map项同前fun:函数(sys，items，opts) { var data，opensys.item.on('click '，'//*[@id='add']'，function(){ var stuff={ name : ' new stuff ' }；data.children.push(东西);系统添加在('项目')之前.值()。瓦尔（东西);});//其余代码同前}}这里需要注意，对增加对象的侦听不能采取直接式的侦听：sys.add.on('点击，),而应该使用代理的方式，否则会报错。因为其父级属于延迟实例化的组件，在进入对象未实例化之间，添加对象并不可见。

完整的树形组件

综合以上的内容，现在给出一个完整版本的树形组件：

tree : { CSS : ` # tree { font-family : Menlo，Consolas，monospacecolor: # 444} #tree，# tree ul { padding-left : 1em；线高： 1.5 em列表样式类型：点；} `，XML : ` ul id=' tree ' Item id=' Item '/ul `，fun : fun(sys，items，opts){ return items。项目；}}，项： { CSS : ' #项{光标： }指针；} '，XML : ` Li id=' item ' div id=' content ' span id=' neme '/span id=' expand '/div ul id=' entries ' Li id=' add '/Li/ul/Li `，map: { defer: ' entries ' }，fun : fun(sys，items，opts) { var data，opensys.item.on('click '，'/*[@id='add']'，fun(){ var stuff='data.children.push(东西);系统添加在('项目')之前.值()。瓦尔（东西);});sys.expand.on('click '，function () { open=！打开；sys.expand.text(打开？' [-]' : ' [ ]');打开？(系统。条目。show()load()): sys。条目。hide()；});函数load() { if (sys.entries.children().长度==1)用于(var数据项。子项目)系统添加在('项目')之前.值()。val(项目);}函数val(value){ data=value；系统。奈梅。文本(数据。姓名)；数据。儿童数据。孩子们。长度系统。扩展。show().文本('[]');}返回{ val : val }；}}在实际应用中的树形组件会比这里的功能更丰富些，你可以在上述代码的基础上进一步的改进，比如添加些图标图标、让子项成为可拖动的等等。但在改进过程中尽量避免代码的复杂化，适当地剥离些代码出来封装成组件是非常有必要的。

本系列文章基于xmlplus框架。如果你对xmlplus没有多少了解，可以访问www.xmlplus.cn。这里有详尽的入门文档可供参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。