前端framework7 树

最新推荐文章于 2022-05-24 21:50:32 发布

SusanMoss

最新推荐文章于 2022-05-24 21:50:32 发布

阅读量306

点赞数

分类专栏：前端文章标签： framework7 树

本文链接：https://blog.csdn.net/SusanMoss/article/details/103217581

版权

这篇博客详细介绍了如何在前端项目中利用Framework7框架实现动态树形组件的构建，包括节点的增删改查操作及交互效果的实现。

摘要由CSDN通过智能技术生成

前端framework7 树

// 画无子的
function drawNoChildren(c, d) {
  const childToNoChildHTML = global.app.templates.childToNoChildTemplate({
    name: c.name,
    id: c.id,
  });
  $$(`#${d.id}`).append(childToNoChildHTML);
  $$(`#fj${c.id}`).on('click', showPic);
}
// 画有子的
function drawHasChildren(c, d) {
  const childToChildHTML = global.app.templates.childToChildTemplate({
    name: c.name,
    id: c.id,
  });
  $$(`#${d.id}`).append(childToChildHTML);
}
function hasChildren(s) {
  if (s.children.length === 0) {
    return false;
  }
  return true;
}
// 遍历每一层的所有节点
function ergodicNodes(t) {
  for (let a = 0; a < t.children.length; a += 1) { // 遍历下层节点
    if (hasChildren(t.children[a]) === true) {
      drawHasChildren(t.children[a], t); // 有孩子
      ergodicNodes(t.children[a]);
    } else {
      drawNoChildren(t.children[a], t);
    }
  }
}
function successData(data0) {
  $$('#rootLoop').html('');
  const data = JSON.parse(data0);
  if (data.length !== 0) {
    for (let i = 0; i < data.length; i += 1) {
      // 画根
      const rootToChildHTML = global.app.templates.rootToChildTemplate({
        name: data[i].name,
        id: data[i].id,
      });
      $$('#rootLoop').append(rootToChildHTML);
      ergodicNodes(data[i]);
    }
  }`在这里插入代码片`

//页面
<!DOCTYPE html>
<html>
<head>
    {
   {
   > ../share/css}}
</head>
<body>
<!-- Views -->
<div class="views">
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
        <div class="pages navbar-fixed">
            <!-- Page, "data-page" contains page name -->
            <div data-page="newKnowV3" class="page no-tabbar">
                <!-- Page content -->
                <div class="page-content pagecolor">
                    <form data-search-list=".list-block" data-search-in&#

最低0.47元/天解锁文章

SusanMoss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
前端framework7 树

前端framework7 树// 画无子的function drawNoChildren(c, d) { const childToNoChildHTML = global.app.templates.childToNoChildTemplate({ name: c.name, id: c.id, }); $$(`#${d.id}`).append(childToN...
复制链接

扫一扫