www.qjdy.com-奇迹赌场 > www.qjdy.com官网 > 组合而成对象具有天然的树形结构

原标题:组合而成对象具有天然的树形结构

浏览次数:155 时间:2019-08-22

xmlplus组件设计体系之树(Tree)(9),xmlplustree

树形组件是一种具备层级结构的零部件,广泛应用于种种现象。本章会完毕一个轻松的树形组件,固然成效有限,但你能够透过扩张它来贯彻本身所急需的树形组件。

图片 1

数据源

树形组件的数据源能够是 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'>

   </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'>

   </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'>

   </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。这里有详细的入门文书档案可供参照他事他说加以考察。

以上就是本文的全体内容,希望对我们的求学抱有帮助,也意在大家多多扶助帮客之家。

树形组件是一种具备层级结构的零部件,广泛应用于种种现象。本章会完毕一个简单的树形组...

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com官网,转载请注明出处:组合而成对象具有天然的树形结构

关键词: mg4355登录首页

上一篇:4、获取相对路径

下一篇:没有了