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 相关文章推荐
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
javascript冒泡排序小结
Apr 10 Javascript
JQuery学习总结【一】
Dec 01 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 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
drupal 代码实现URL重写
2011/05/04 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
人事主管岗位职责
2014/01/30 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
优秀教师事迹材料
2014/12/15 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js