基于angular实现树形二级表格


Posted in Javascript onOctober 16, 2021

先看效果:

基于angular实现树形二级表格

代码:

1、html

<div class="userContent_content">
    <div>
      <table>
        <tr>
          <td>节点名称</td>
          <td>节点管理IP</td>
          <td>节点登录名</td> 
          <td>节点登录密码</td> 
        </tr>
        //使用ng-container作为空标签用于辅助放置for或者if事件,它在审查元素中是找不到的
        <ng-container *ngFor="let item of currentTotalList,let i = index">
          <tr>
            <td style="color: #04AEB4;cursor: pointer;" class="img">
              <div>
                <div>{{item.name}}</div>
                <div>
        //下面是箭头的图片,是展开和收起箭头的切换,通过判断当前点击索引与列表索引是否相等,相等则展开,否则收起
                  <img (click)="clickShowChildList(i,item.name)"
                    [attr.src]="i == currentClickOpenIndex?'../../assets/resource/img/bottom.png':'../../assets/resource/img/right.png'">
                </div>
              </div>
            </td>
            <td>{{item.ip}}</td>
            <td>{{item.username}}</td>
            <td>{{item.password}}</td>
          </tr>
        //再次使用ng-container标签嵌套表格的子级
          <ng-container *ngFor="let childItem of item.nodeList, let j = index">
        //由于在同一个标签内,for循环和if判断不能同时共存,因此我们的隐藏事件if放置tr标签内,通过判断当前点击的索引与列表索引是否一致,相等则收起,不等则显示的功能。
 
            <tr *ngIf="i == currentClickOpenIndex">
              <td style="color: #04AEB4;cursor: pointer;" class="img">
                <div>
                  <div>
                    {{childItem.masterIp}}</div>
                </div>
              </td>
              <td>{{childItem.ip}}</td>
              <td>{{childItem.username}}</td>
              <td>{{childItem.password}}</td>
            </tr>
          </ng-container>
        </ng-container>
 
      </table>
    </div>
    
  </div>

2、less

.userContent_content{
        width: 100%;
        height: calc(~"100% - 60px");
        overflow: auto;
        >div:nth-child(1){
          >table{
            width: 100%;
            tr{
              td{
                width: 25%;
                text-align: center;
                font-size: 14px;
                color: #fff;
                padding: 16px 0px;
                box-shadow: 0 1px #333;
              }
            }
            .img {
              >div {
                width: 100%;
                display: flex;
                position: relative;
  
                >div:nth-child(1) {
                  width: 85%;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  overflow: hidden;
                  margin: 0 auto;
  
                }
              }
  
              img {
                height: 10px !important;
                width: 10px !important;
                margin-left: 0 !important;
                position: absolute;
                right: 0;
                top: 3px;
              }
            }
          }
        }
  
        >div:nth-child(2){
          height: 80px;
          width: 90%;
          display: flex;
          align-items: center;
          margin: 0 auto;
          justify-content: flex-end;
          #page{
            display: table;
          }
        }
      }

3、js

(1)currentTotalList表格数据的格式类似如下(你们自己写个模拟数据吧):

基于angular实现树形二级表格

(2)初始化当前的点击索引变量currentClickOpenIndex 为-1

(3)是展开收起箭头的点击事件:

clickShowChildList = (i,item)=>{
    console.log(i,this.currentClickOpenIndex)
    if(this.currentClickOpenIndex==i){
      this.currentClickOpenIndex = -1
    }else{
      this.currentClickOpenIndex = i
    }
  }

然后就完成了……

到此这篇关于基于angular实现树形二级表格的文章就介绍到这了,更多相关angular树形二级表格内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Javascript 相关文章推荐
基于jquery的时间段实现代码
Aug 02 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
JavaScript简介
Feb 15 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
AJAX实现指定部分页面刷新效果
AJAX实现省市县三级联动效果
Oct 16 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
用来给图片加水印的PHP类
2008/04/09 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
Convert Seconds To Hours
2007/06/16 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
vue内置指令详解
2018/04/03 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
python实现自动重启本程序的方法
2015/07/09 Python
python3 爬取图片的实例代码
2018/11/06 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
2013年保送生自荐信格式
2013/11/20 职场文书
质检部部长职责
2013/12/16 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
导游词之日本富士山
2020/01/06 职场文书