【angular5项目积累总结】列表多选样式框(1)

憋不住想说一下：angular坑太多，各种教程各种不完整，官网还只是简单的画饼充饥，没办法只有自己研究自己总结，便于以后提高工作效率。

第一种：

view

code

list.css

:host {display: flex;width: 100%;border-left: 1px solid #ccc;
}.fxs-contextMenu {width: 125px;margin-left: -115px;
}
.ext-ad-appslist-image {height: 30px;width: 30px;display: inline-block;vertical-align: middle;padding: 0px 10px;
}
.search-select {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border-width: 1px;border-style: solid;color: inherit;display: inline-block;padding: 2px 5px 2px 2px;min-height: 15px;border-color: #bbb;background-color: #fff;color: #252525;width: 26.5%;
}
.search-input {width: 65%;padding: 4px;
}
.fxs-grid-selection-cell-wrapper {display: inline-block;vertical-align: middle;
}
.fxc-grid2 table thead tr th a {line-height: 34px;
}
.fxc-grid2.fxc-grid-sorting a.fxc-sortable {height:38px;
}
.azc-checkboxElementContainer {display: flex;width: 17px;float: left;margin-top: 9px;
}
.checkbox-pointer {cursor: pointer;
}

list.html

<panel-component [menuItems]="menuItems" headerTitle="Web 应用列表" initWidth="450px" (closeEvent)="onClose()"><div class="ext-hubs-browse-grid-parent" style="margin:20px;height:100%;" (click)="activeContextMenu(null,false,null,null)"><!--查询--><div class="ext-hubs-browse-resourcefilter fxc-base fxc-resourcefilter"><div class="fxc-resourcefilter-summary-filters"><div class="fxc-base msportalfx-form-formelement azc-textField fxc-TextField fxc-resourcefilter-visible fxc-resourcefilter-filter"><div class="azc-formElementContainer"><div class="azc-formElementContainer azc-formElementSubLabelContainer"><div class="fxc-base azc-control azc-editableControl azc-validatableControl azc-inputbox azc-textBox azc-validatableControl-none" data-canfocus="true" data-editable="true"><div class="azc-inputbox-wrapper azc-textBox-wrapper" tabindex="-1" style="outline: none"><input [(ngModel)]="searchName" (keyup)="loadWebApp()" aria-describedby="2a5d6185-45de-4683-a402-5c36596aa0a1" aria-inval aria-label="按名称筛选..."aria-multiline="false" class="azc-input azc-formControl azc-validation-border search-input"placeholder="按应用名称搜索" spellcheck="false" type="text">&nbsp;&nbsp;<select class="search-select" [(ngModel)]="searchCategory" (change)="loadWebApp()"><option value="0">所有应用</option><option *ngFor="let category of lstCategory" [value]='category.key'>{{category.value}}</option></select></div></div></div></div></div></div></div><!--列表信息--><div class="ext-hubs-browse-grid fxc-base fxs-grid-focus fxc-grid-sorting fxc-grid-scrolling fxc-grid-resizing fxs-grid-selection fxc-grid-contextMenu fxc-grid-grouping fxc-grid2 azc-control fxc-grid-verticalScroll"><div class="fxc-grid-container azc-br-muted"><div class="fxc-grid-tableContainer azc-br-muted" style="padding-top: 42px;"><div class="fxc-grid-tableScrollContainer azc-br-muted"><table class="fxc-grid-tableHeader fxs-grid-multiselection" data-grid-activation="true" style="width: calc(100% - 17px);"><thead><tr><th class="fxc-grid-sorting-header fxc-grid-column-header " style="width:35%;"><div class="fxc-grid-header-wrapper"><div class="azc-checkboxElementContainer checkbox-pointer" (click)="onAllCheck()"><div class="fxc-base azc-control azc-editableControl azc-validatableControl azc-checkBox azc-input azc-validatableControl-none"><span class="azc-fill-text azc-validation-border"><svg focusable="false" class="azc-checkBox-svg azc-check-svg" version="1.1" xmlns="http://www.w3.org/2000/svg'" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11px" height="11px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" space="preserve" style="visibility: hidden;" [ngStyle]="{'visibility':isAllChecked?'':'hidden'}"><path d="M0.6 8.9L0.1 8.3C0 8.1 0 7.9 0.1 7.7l1.5-1.4c0.1-0.1 0.2-0.1 0.3-0.1 0.1 0 0.2 0 0.3 0.1l4.2 4.5 7.3-9.3c0.1-0.1 0.2-0.1 0.3-0.1 0.1 0 0.2 0 0.2 0.1l1.7 1.3c0.1 0.1 0.1 0.1 0.1 0.2 0 0.1 0 0.2-0.1 0.3L6.6 15.2 0.6 8.9z"></path></svg><svg focusable="false" class="azc-checkBox-svg azc-indeterminate-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" enable="" background="new 0 0 24 24" space="preserve" [ngStyle]="{'visibility':isHasChecked?'':'hidden'}"><rect x="1px" y="1px" width="9" height="9"></rect></svg></span></div></div><a aria-sort="none" class="fxc-sortable fxc-none" style="width: 70%;"><span class="fxc-grid-headerlabel">显示名称</span></a><div class="fxc-grid-resizableColumn-handle"><div class="fxc-grid-resizableColumn-handle-line azc-bg-muted"></div></div></div></th><th class="fxc-grid-sorting-header fxc-grid-column-header " style="width:25%;"><div class="fxc-grid-header-wrapper"><a aria-sort="none" class="fxc-sortable fxc-none"><span class="fxc-grid-headerlabel">App ID</span></a><div class="fxc-grid-resizableColumn-handle"><div class="fxc-grid-resizableColumn-handle-line azc-bg-muted"></div></div></div></th><th class="fxc-grid-sorting-header fxc-grid-column-header " style="width:20%;"><div class="fxc-grid-header-wrapper"><a aria-sort="none" class="fxc-sortable fxc-none"><span class="fxc-grid-headerlabel">类型</span></a><div class="fxc-grid-resizableColumn-handle"><div class="fxc-grid-resizableColumn-handle-line azc-bg-muted"></div></div></div></th><th class="fxc-grid-sorting-header fxc-grid-column-header " style="width:16%;"><div class="fxc-grid-header-wrapper"><a aria-sort="none" class="fxc-sortable fxc-none"><span class="fxc-grid-headerlabel">状态</span></a><div class="fxc-grid-resizableColumn-handle"><div class="fxc-grid-resizableColumn-handle-line azc-bg-muted"></div></div></div></th></tr></thead></table><div class="fxc-grid-tableContent" style="height:calc(100% - 120px); position: relative; overflow-x: hidden;"><table class="fxc-grid-full fxs-grid-multiselection" data-grid-activation="true" style="position: absolute;"><tbody class="fxc-grid-groupdata "><tr class="fxc-grid-row fxs-portal-focus fxs-portal-hover" [ngClass]="{'fxs-portal-selected':app.isSelected}" *ngFor="let app of lstApp;let i = index" (click)="onOpenDetailById(app.id,i)"><td class="fxc-grid-cell azc-br-muted" style="width:33%;"><div class="azc-vivaControl"><div class="fxs-grid-selection-cell-wrapper fxs-portal-border azc-fill-text checkbox-pointer" (click)="onCheck(i,$event)"><div class="fxs-grid-selection-cell-check"><div class="fx-grid-formatters-svg"><span class="fx-grid-formatters-svgicon" style="height: 11px; width: 11px;"><svg height="100%" width="100%" aria-hidden="true" role="presentation" focusable="false" [ngStyle]="{'visibility':app.isChecked?'':'hidden'}"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#FxSymbol0-0c2"></use></svg></span></div></div></div><img *ngIf="app.category == 1" class="ext-ad-appslist-image" alt="应用程序图标" src="https://gallery.windowsazure.cn/artifact/20161101/Microsoft.WebSite.2.2.0/Icons/Small.png"><!--<img *ngIf="app.category == 2" class="ext-ad-appslist-image" alt="应用程序图标" src="https://gallery.windowsazure.cn/artifact/20161101/Microsoft.Zumo.1.0.21/Icons/Small.png">--><img *ngIf="app.category == 2" class="ext-ad-appslist-image" alt="应用程序图标" src="https://gallery.windowsazure.cn/artifact/20161101/Microsoft.ApiApp.1.0.1/Icons/Small.png"><span data-bind="text: value" class="msportalfx-text-ellipsis">{{app.displayName}}</span></div></td><td class="fxc-grid-cell azc-br-muted" style="width:25%;"><div class="azc-grid-cellContent">{{app.name}}</div></td><td class="fxc-grid-cell azc-br-muted" style="width:16%;"><div class="azc-grid-cellContent">{{getDictLabel(lstCategory,app.category)}}</div></td><td class="fxc-grid-cell azc-br-muted" style="width:16%;" align="center"><div class="azc-grid-cellContent">{{getDictLabel(lstAppStatus,(app.status + 1))}}</div></td><td class="fxc-grid-contextMenuShortcut-cell azc-br-muted"><a (click)="activeContextMenu($event,true,i,app)" class="msportalfx-inherit-color fxs-portal-svg" href="javascript:;" role="button" title="单击以打开上下文菜单" tabindex="0"><svg height="100%" width="100%" aria-hidden="true" role="presentation" focusable="false"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#FxSymbol0-013"></use></svg></a></td></tr></tbody></table></div></div></div></div><div aria-hidden="true" class="fxs-hide-accessible-label"></div><div class="azc-resize azc-resize-shrink"><div class="azc-resize-content" style="width: 200%; min-width: 1px; height: 200%; min-height: 1px;"></div></div><div class="azc-resize azc-resize-grow"><div class="azc-resize-content" style="width: 517px; height: 518px;"></div></div><div class="fxs-commands-contextMenu fxs-contextMenu fxs-popup fxs-portal-bg-txt-br" [ngClass]="{'fxs-contextMenu-active' : isActiveMenu}" [ngStyle]="{'top.px': menuTop,'left.px': menuLeft}"><ul role="menu" class="fxs-contextMenu-itemList" data-bind="foreach: { data: commands, afterRender: afterRender }, attr: { 'aria-label': ariaLabel }" aria-label="上下文菜单"><li role="menuitem" class="fxs-contextMenu-item fxs-portal-hover" tabindex="0" aria-posinset="1" aria-setsize="1" (click)="onOpenDetail()"><div class="fxs-contextMenu-text fxs-portal-text msportalfx-text-ellipsis" data-bind="text: text">查看</div></li><li role="menuitem" class="fxs-contextMenu-item fxs-portal-hover" tabindex="0" aria-posinset="1" aria-setsize="1" (click)="removeCurApp()"><div class="fxs-contextMenu-text fxs-portal-text msportalfx-text-ellipsis" data-bind="text: text">删除</div></li></ul></div></div></div>
</panel-component>
<router-outlet></router-outlet>

list.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AppStoreService } from '../service/appStoreService'
import { CommonService } from '../../providers/commonService';@Component({selector: 'all-app',templateUrl: './allApp.html',styleUrls: ['./allApp.css']
})export class AllApp {constructor(private router: Router,private actRouter: ActivatedRoute,private appStoreService: AppStoreService,private comService: CommonService) {this.subscribeUpdate(comService);}lstApp: any;lstCategory: any;lstAppStatus: any;searchName: string;searchCategory: any = 0;isActiveMenu: boolean = false;menuTop: any;menuLeft: any;currIndex: any;currApp: any;isAllChecked: boolean = false;isHasChecked: boolean = false;parentUrl: string;menuItems: any = [{ title: "应用注册", icon: "#FxSymbol0-010", event: this.regWebApp.bind(this) },{ title: "应用审核", icon: "#FxSymbol0-077", event: this.auditWebApp.bind(this) },{ title: "刷新", icon: "#FxSymbol0-0c4", event: this.loadWebApp.bind(this) },]ngOnInit(): void {this.actRouter.parent.params.subscribe((params) => {this.parentUrl = this.router.url;this.loadWebApp();});this.appStoreService.GetCategoryList((rtv) => {this.lstCategory = rtv;});this.appStoreService.GetAppSatus((rtv) => {this.lstAppStatus = rtv;});   }loadWebApp() {this.appStoreService.AllApp(this.searchName, this.searchCategory,(result) => {this.lstApp = result;})}onClose() {this.router.navigate(['/home'], {});}activeContextMenu(event: any, isActive: boolean,index: any,app: any) {this.isActiveMenu = isActive;if (event) {this.menuLeft = event.pageX - 20;this.menuTop = event.pageY - 10;event.stopPropagation();}this.currIndex = index;this.currApp = app;}removeCurApp() {let _this = this;this.currApp.id && this.appStoreService.DeleteApp(this.currApp.id, (result) => {_this.loadWebApp()}) }getDictLabel(dict: any, key: any) {if (dict && dict.length > 0) {let curItem = dict.filter(item => { return item.key == key });return curItem.length > 0 ? curItem[0].value : '';}}regWebApp() {this.router.navigate([this.parentUrl +'/create'], {});}onOpenDetail() {this.currApp.id && this.router.navigate([this.parentUrl + '/' + this.currApp.id]);}onOpenDetailById(id: string, index: any) {this.lstApp.map((app, i) => i == index ? app.isSelected = true : app.isSelected = false);id && this.router.navigate([this.parentUrl + '/' + id]);}subscribeUpdate(comService: CommonService) {this.comService.notifyObservable$.subscribe(data => {if (data == 'refreshWebApp') {this.loadWebApp();}}, error => {console.log(`subscribe error:${error}`)})}auditWebApp() {this.router.navigate([this.parentUrl + '/regAudit']);}onAllCheck() {this.isAllChecked = !this.isAllChecked;this.lstApp.map(app => app.isChecked = this.isAllChecked);this.isHasChecked = false;}onCheck(index: any,event: any) {this.lstApp[index].isChecked = !this.lstApp[index].isChecked;let isAllCheck = this.lstApp.every(app => { return app.isChecked == true });isAllCheck ? this.isAllChecked = true : this.isAllChecked = false;let isHasCheck = this.lstApp.some(app => { return app.isChecked == true });isHasCheck && !isAllCheck ? this.isHasChecked = true : this.isHasChecked = false;event && event.stopPropagation();}
}

转载于:https://www.cnblogs.com/sybboy/p/8385769.html

【angular5项目积累总结】列表多选样式框(1)相关推荐

【angular5项目积累总结】一些正则积累
/^[1-9][0-9]{0,4}$/ /^[1-9][0-9]{0,4}(,[1-9][0-9]{0,4})*$/ /^([a-zA-Z0-9_\-])+\@(([a-zA-Z0-9\-])+\.) ...
php input多选,利用css3更改input单选和多选样式的方法
在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...
Bootstrap3 列表元素的样式
列表 Bootstrap 支持HTML 提供的三种类型的列表:无序列表.有序列表和描述列表.列表可以嵌套定义,即可以在一个列表中嵌套其它列表.嵌套没有类型和层级的限制. 1.无序列表无序列表的各个表 ...
不一样的 9 宫格图片展示，仿 Nice 首页图片列表 9 图样式，并实现拖拽效果
ImageNice9Layout 项目地址:wobiancao/ImageNice9Layout 简介:不一样的 9 宫格图片展示,仿 Nice 首页图片列表 9 图样式,并实现拖拽效果写在开头: ...
flutter 项目实战四列表数据展示
本项目借用逛丢网站的部分数据,仅作为 flutter 开发学习之用. 逛丢官方网址:https://guangdiu.com/ flutter windows开发环境设置 flutter 项目实战 ...
element 表格table纵横双列表头斜线样式处理和多级表头循环
element 表格table纵横双列表头斜线样式处理和多级表头循环 <!DOCTYPE html> <html> <head><meta charset= ...
web无序列表去掉点_web前端入门到实战：css如何玩转有序无序列表项list样式
在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...
HTML去除无序列表的默认样式
去除无序列表的默认样式需要用到:list-style:none; 开发工具 Visual Studio Code 开发者诶嘿撰写时间 2022年3月26日在制作无序列表的时候都会有一个默认值(d ...
BCH粉必转 | 围绕BCH建立的相关项目和应用列表汇总
近期,Bitcoin.com网站整理了一份围绕BCH建立的相关项目和应用列表汇总,列表共分为9个方面,分别是:工具和服务.游戏.开发.钱包.小费和众筹.支付网关.商家和购物.赚取BCH.社交网络,每个 ...

【angular5项目积累总结】列表多选样式框(1)

【angular5项目积累总结】列表多选样式框(1)相关推荐

最新文章

热门文章