前端framework7 树

最新推荐文章于 2022-05-24 21:50:32 发布
最新推荐文章于 2022-05-24 21:50:32 发布
阅读量368 收藏
点赞数
分类专栏： 前端 文章标签： framework7 树
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SusanMoss/article/details/103217581
版权
这篇博客详细介绍了如何在前端项目中利用Framework7框架实现动态树形组件的构建，包括节点的增删改查操作及交互效果的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端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=".list-block" class="searchbar searchbar-init">
                        <div class="searchbar-input">
                            <input type="search" placeholder="请输入要搜索的标题" id="searchName" autocomplete="off">
                            <a href="#" class="searchbar-clear"></a>
                        </div>
                        <a href="#" class="searchbar-cancel" id="cancel" style="color: #fff;">取消</a>
                    </form>
                    <div class="list-block" style="margin-top: 0px;">
                        <ul class="outClass" id="rootLoop">
                        </ul>
                    </div>
                    <script type="text/template7" id="rootToChildTemplate">
                        <li   class="accordion-item item-link libottom" style="padding-left: 15px;">
                            <a href="#" class="item-link">
                                <div class="item-inner">
                                    <div class="item-title-row" style="width: 90%;">
                                        <div class="item-subtitle text-bold">\{{name}}
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="accordion-item-content">
                                <div class="content-block">
                                    <ul style="padding-left: 15px;" id="\{{id}}">

                                    </ul>
                                </div>
                            </div>
                        </li>
                    </script>
                    <script type="text/template7" id="childToChildTemplate">
                        <li class="accordion-item item-link libottom" >
                            <a href="#" class="item-link">
                                <div class="item-inner">
                                    <div class="item-title-row" style="width: 90%;">
                                        <div class="item-subtitle text-bold">\{{name}}
                                            <div class="row">
                                                <div class="col-50"></div>
                                                <div class="col-50"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="accordion-item-content">
                                <div class="content-block">
                                    <ul style="padding-left: 15px;" id="\{{id}}">

                                    </ul>
                                </div>
                            </div>
                        </li>
                    </script>
                    <script type="text/template7" id="childToNoChildTemplate">
                        <li class="item-link libottom" id="fj\{{id}}" data-id="\{{id}}" data-name="\{{name}}">
                            <a href="#" class="item-link" >
                                <div class="item-inner">
                                    <div class="item-title-row" style="width: 90%;">
                                        <div class="item-subtitle text-bold">\{{name}}
                                            <!--<div class="row">-->
                                                <!--<div class="col-50"></div>-->
                                                <!--<div class="col-50"></div>-->
                                            <!--</div>-->
                                        </div>
                                    </div>
                                </div>
                            </a>
       
                        </li>
                    </script>
                 
                </div>

            </div>
        </div>
    </div>
</div>
{{> ../share/js}}
</body>
</html>

在这里插入图片描述

前端项目-framework7.zip
09-02
前端项目-framework7,framework7是一个免费的框架，可以用来开发混合移动应用（origin和html混合）或者开发iOS和android wing格的web app。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
前端移动框架Framework7入门
weixin_30394251的博客
06-15 408
正版官网：https://framework7.io/ （英文） 对应国内：http://www.framework7.cn/（中文） 本地构建步骤（Demo级别） 1、HTML结构 2、引入Framework7框架的css，js文件 3、实例化框架 --========================================== 一、HTML结构 先在本地磁盘创...
Yii Framework 开发教程(19) UI 组件 TreeView示例
mapdigit
12-25 140
CTreeView用来显示具有层次结构的数据，使用TreeView 通过设置Data属性。Data为具有下面结构的数组： ext: string, 树节点的文本. expanded: boolean,可选，表示该节点是否展开. id: string, 可选，该节点ID. hasChildren: boolean, 可选，缺省为False,当为True表示该节点含有子节点. children: a...
Framework7框架结构
liudanyang_21的博客
08-21 209
以2017年2月10日发布的Framework7 1.5.3为例。 (function(){ 'use strict'; window.Framework7 = function(){ 　　　　var app = this;　　　　app.init = function(){　　　　};　　　　app.init();　　　　return app; };　　　　Framework7.prototype.device = function(){　　　　var device = {}
移动端安卓和IOS开发框架Framework7教程-多媒体列表（Media List View）
zaixianshouce的博客
06-13 229
多媒体列表是列表（list view）的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。 当然，它的布局更为复杂： &lt;!-- 多媒体列表有额外的“media-list”类 --&gt; &lt;div class="list-block media-list"&gt;     &lt;ul&gt;         &lt;li&gt;        ...
meteor-framework7
04-28
对于初学者而言，通过学习 "meteor-framework7-master" 示例，可以快速掌握这种开发方式，为自己的Web开发技能树添加新的分支。在实际项目中，灵活运用这两个工具，可以极大地提高开发效率，创造出更优秀的用户体验...
为前端开发者打造的Vue和Django(RestFramework)模板.zip
最新发布
09-29
Vue.js和Django Rest Framework是两个非常流行的开源框架，它们分别在前端和后端开发中发挥着重要作用。Vue.js是一个轻量级的JavaScript框架，它以其简洁的API、高效的响应式系统和易于学习的特性而受到欢迎。Django...
学习framework7 6.x版本的记录----（3）
fj120029的博客
02-15 2951
其实fw7大致摸得差不多了，因为希望练习的项目是一个可以自己运行的客户端小游戏，根据需求分析所需要的技术支持如下，要找到对应的哪个用法是可以被支持实现的： 1、可动态加载的配置块： 一个游戏需要有大量的配置文件，支持json，部分配置文件要求全域访问，部分配置文件希望动态加载，在不需要使用时卸载，免于占用过多的内存空间； 这点可以使用ES6的对象来实现，将配置数据导出为json存入js里，适当还可以有一些方法，方便于查询，更新等基本的DAO操作 2、可写文件： 运行中需要可以存储当前的状态，进度，
java读取本地文件夹在前端生成树形结构
weixin_44510984的博客
08-01 3151
java+ztree 根据本地文件夹生成树形结构 近期根据需求实现了java+ztree根据本地文件夹生成树形结构在web前端中展示。有不足之处希望大家批评指正 //java bean public class Tree { private int id; private int pId; private String name; public int getI...
构建前端Web应用的uPortal-app-framework框架入门
- **Java环境**：如果需要利用Maven工件进行开发，需要安装Java，并推荐使用JDK 7或更高版本。 - **HTML页面**：uPortal-app-framework在托管AngularJS单页应用程序（SPA）的上下文的根目录中提供了主要的HTML页面。...
Framework7Vue使用Framework7和Vue构建完整的iOS和Android应用程序
08-10
Framework7-Vue使用Framework7和Vue构建完整的iOS和Android应用程序
移动端安卓和IOS开发框架Framework7教程-Popover 布局
zaixianshouce的博客
06-03 354
Popover 组件是用来管理popover里的内容展示。你可以用 popovers 临时显示一些信息. popover 保持可见直到用户点击popover窗口外面或者你明确地移除它。 注意，不推荐在小屏幕(iPhone)上使用 Popover 。 在小屏幕上你应该使用 操作表 来代替。或者使用  操作表转换为Popover。 Popover 布局 首先让我们来看看 Popov...
Framework7中Template7的使用
Joyce的前端日常
04-20 4039
Template7的使用及注意事项
【MFC开发（16）】树形控件Tree Control
Demo.demo的博客
05-24 6365
1.树形控件的属性配置 （1）Check Boxes ：默认为false，如果选择为true的话每个节点前面会带有一个方框 （2）Edit Labels：默认为false，如果选择为true的话每个节点的名称可以编辑修改 （3）Has Buttons：默认为false，如果选择为true的话展开的节点前面会有加号或者减号 （4）Has Lines：默认为false，如果选择为true的话会出现线如下所示 (5) Lines At Root：默认为false...
Framework7 Vue 教程 入门 学习
小钰的博客
02-23 7020
网上关于Framework7的博客、学习资料少之又少，所以我想把我学习Framework7 Vue的入门记录一下。 Framework7 Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。 Framework7 最主要的功能是可以...
Winform UI界面设计例程——TreeView控件
奔跑的郑的博客
05-17 3645
今天我们来探讨下treeView的使用 treeView控件是树形菜单，非常易于展示层次结构和对其进行导航，我们电脑的资源管理器就是使用了treeView控件进行目录和磁盘的导航。 TreeView控件是树形列表，树形列表是由不同级别的节点构成，一般将treeView控件的最高一级节点称为根节点，以下各级节点称为子节点。通过向treeView控件中添加各级节点形成一个完整的树形列表。 新建一个winform程序 项目引用 添加一个treeView控件，DOCK属性设置为lef.
移动端安卓和IOS开发框架Framework7教程-标签页(Tabs)
zaixianshouce的博客
05-21 844
标签用于控制不同内容区的切换显示。 Tabs标签布局 我们来看一下标签页的布局 &lt;!-- Tabs容器, 需要带有"tabs"类。必需元素 --&gt; &lt;div class="tabs"&gt;   &lt;!-- 第一个tab, 需要带有"tab"类和唯一的id --&gt;   &lt;!-- 第一个tab默认是激活显示状态，通过添加"
springboot 读取文件夹返回树给前端
05-11
可以使用递归的方式遍历文件夹，并将文件夹及其子文件夹信息封装成树形结构返回给前端。以下是一个示例代码： ```java import org.springframework.stereotype.Controller; import org.springframework.web.bind....
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值