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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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之require/include顺序 推荐
2011/01/02 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
Python中顺序表的实现简单代码分享
2018/01/09 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
python支付宝支付示例详解
2019/08/22 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
大学社团活动策划书
2014/01/26 职场文书
班组长岗位职责
2014/03/03 职场文书
初中学生期末评语
2014/04/24 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
2016年清明节寄语
2015/12/04 职场文书
golang中的空slice案例
2021/04/27 Golang
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL