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


Posted in Javascript onMay 02, 2017

树形组件是一种具有层级结构的组件,广泛应用于各种场景。本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件。

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

数据源

树形组件的数据源可以是 JSON 格式的数据对象,也可以是具有 XML 结构的数据或者是其它的具有层级结构的数据。本章将采用具有如下 JSON 格式的数据对象。

var data = {
 name: 'My Tree',
 children: [
 { name: 'hello' },
 { name: 'world' },
 {
  name: 'child folder',
  children: [
  { name: 'alice' }
  ]
 }
 ]
};

上述数据源中,name 值会作为树结点的名称显示,含 children 的数组代表节点的子级。

递归结构的设计

由 HTML 中的列表元素 ul 以及 li 组合而成对象具有天然的树形结构,我们不妨采用它们作为构建树形组件的基本元素。树形组件的最外层必然是一个 ul 元素,所以我们可以暂时定义树形组件如下:

Tree: {
 xml: `<ul id='tree'>
   <Item id='item'/>
   </ul>`
}

这里的未定义的组件 Item 是一个需要递归定义的子项组件,它会根据提供的数据递归地生成子孙对象。下面是一种可能的设计:

Item: {
 xml: `<li id='item'>
   <div id='content'>
    <span id='neme'/><span id='expand'/>
   </div>
   <ul id='entries'/>
   </li>`,
 map: { defer: "entries" }
}

注意,上面的 neme 对象是用于显示 name 属性的。expand 对象用于展开或者关闭子级对象 entries。子级对象 entries 被设置为需要延迟实例化,只有当用户点击 expand 对象展开子级时,该对象才会实例化。

数据的加载与渲染

如上一节所述,我们设定了子级对象 entries 需要延迟实例化。所以,在给子项 Item 提供的数据设置接口不应该立马对 entries 实例化。下面我们先给出数据接口函数。

Item: {
 // css, xml, map 项同上
 fun: function (sys, items, opts) {
  var data;
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

该接口函数 val 只是设置了当前节点相关的内容。下面我们来侦听 expand 对象的点击事件,并适时地完成组件对象 entries 的实例化。

Item: {
 // css, xml, map 项同上
 fun: function (sys, items, opts) {
  var data, open;
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 0 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

上述代码中包含一个 open 参数,该参数记录了当前节点的是否处于展开状态以供相关的侦听器使用。

动态添加节点

现在我们对上述组件进行一个小的扩展,使得它支持动态添加树节点的功能。首先,我们在对象 entries 的子级添加一个触发按钮,并命名为 add。

Item: {
 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" }
}

其次,需要侦听 add 对象的点击事件,在侦听器中完成对象的添加。

Item: {
 // css, xml, map 项同前
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id='add']", function () {
   var stuff = {name: 'new stuff'};
   data.children.push(stuff);
   sys.add.before("Item").value().val(stuff);
  });
  // 其余代码同前
 }
}

这里需要注意,对 add 对象的侦听不能采取直接式的侦听:sys.add.on("click",...),而应该使用代理的方式,否则会报错。因为其父级属于延迟实例化的组件,在 entries 对象未实例化之间,add 对象并不可见。

完整的树形组件

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

Tree: {
 css: `#tree { font-family: Menlo, Consolas, monospace; color: #444; }
   #tree, #tree ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; }`,
 xml: `<ul id='tree'>
   <Item id='item'/>
   </ul>`,
 fun: function (sys, items, opts) {
  return items.item;
 }
},
Item: {
 css: "#item { cursor: pointer; }",
 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: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id='add']", function () {
   var stuff = {name: 'new stuff'};
   data.children.push(stuff);
   sys.add.before("Item").value().val(stuff);
  });
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 1 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

在实际应用中的树形组件会比这里的功能更丰富些,你可以在上述代码的基础上进一步的改进,比如添加些 ICON 图标、让子项成为可拖动的等等。但在改进过程中尽量避免代码的复杂化,适当地剥离些代码出来封装成组件是非常有必要的。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
JavaScript设计模式初探
Jan 07 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 #Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 #Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 #Javascript
ES6学习教程之对象的扩展详解
May 02 #Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 #Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 #Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 #Javascript
You might like
php 安全过滤函数代码
2011/05/07 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
PHP中phar包的使用教程
2017/06/14 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
信号生成及DFT的python实现方式
2020/02/25 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
python中time tzset()函数实例用法
2021/02/18 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
暑假实习求职信范文
2013/09/22 职场文书
企划经理的岗位职责
2013/11/17 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
课外活动实习计划
2015/01/19 职场文书
教师工作表现自我评价
2015/03/05 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL