基于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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
AJAX实现指定部分页面刷新效果
AJAX实现省市县三级联动效果
Oct 16 #Javascript
You might like
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
python通过post提交数据的方法
2015/05/06 Python
python实现八大排序算法(2)
2017/09/14 Python
python爬取微信公众号文章
2018/08/31 Python
python微信撤回监测代码
2019/04/29 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Django--权限Permissions的例子
2019/08/28 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
质量负责人任命书
2014/06/06 职场文书
颐和园导游词
2015/01/30 职场文书
婚育证明格式
2015/06/17 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Python合并pdf文件的工具
2021/07/01 Python