.Net Core应用框架Util介绍（五）
上篇簡(jiǎn)要介紹了Util在Angular Ts方面的封裝情況，本文介紹Angular封裝的另一個(gè)部分，即Html的封裝。?
標(biāo)準(zhǔn)組件與業(yè)務(wù)組件?
對(duì)于管理后臺(tái)這樣的表單系統(tǒng)，你通常會(huì)使用Angular Material或Ng-Zorro這樣的UI組件庫(kù)，它們提供了標(biāo)準(zhǔn)化的UI組件。?
標(biāo)準(zhǔn)組件將Ts封裝起來(lái)，以特定標(biāo)簽和屬性的方式提供使用。?
業(yè)務(wù)組件使用標(biāo)準(zhǔn)組件拼湊頁(yè)面，并從服務(wù)端API獲取數(shù)據(jù)綁定到頁(yè)面上。?
可以看出，標(biāo)準(zhǔn)組件是業(yè)務(wù)開發(fā)的基礎(chǔ)，我們必須將標(biāo)準(zhǔn)組件的開發(fā)效率提升到極致。?
使用標(biāo)準(zhǔn)組件的問(wèn)題?
直接使用原生標(biāo)準(zhǔn)組件有什么問(wèn)題呢??
復(fù)雜的Html結(jié)構(gòu)?
現(xiàn)代流行的UI組件庫(kù)，為了構(gòu)造美觀大氣的視覺效果及增強(qiáng)組件的功能特性，一個(gè)組件需要組裝多個(gè)Html元素來(lái)表達(dá)。?
在帶來(lái)美觀視覺體驗(yàn)的同時(shí)，也導(dǎo)致了Html結(jié)構(gòu)變得很復(fù)雜。
Angular Material是Google以Material設(shè)計(jì)風(fēng)格開發(fā)的UI組件庫(kù)。?
我們來(lái)看一個(gè)Angular Material文本框的例子。?
<mat-form-field><input matInput placeholder="Favorite food" value="Sushi"> </mat-form-field>你看到了Angular Material文本框并不是一個(gè)input標(biāo)簽，input標(biāo)簽嵌套在mat-form-field標(biāo)簽內(nèi)。
這看上去并不算復(fù)雜，不過(guò)它只是最簡(jiǎn)單的情況，讓我們?cè)黾觾蓚€(gè)特性。?
<mat-form-field><input matInput placeholder="測(cè)試一下" [(ngModel)]="value" ><mat-hint>哈哈</mat-hint><button mat-button *ngIf="value" matSuffix mat-icon-button (click)="value=''"><mat-icon>close</mat-icon></button> </mat-form-field>我們?cè)谖谋究虻南路教砑恿颂崾疚谋?#xff0c;并在文本框右側(cè)加了個(gè)按鈕，你可以點(diǎn)擊這個(gè)按鈕清空文本框的內(nèi)容。
?
你應(yīng)該觀察到Html結(jié)構(gòu)變得稍微復(fù)雜了，讓我們?cè)偬砑觾蓚€(gè)特性。
<mat-form-field><input matInput #testControl="ngModel" name="test" placeholder="金額" [(ngModel)]="value" required max="10"><span matPrefix>$ </span><span matSuffix>元</span><mat-hint>充值金額</mat-hint><button mat-button *ngIf="value" matSuffix mat-icon-button (click)="value=''"><mat-icon>close</mat-icon></button><mat-error *ngIf="testControl.hasError('max') && !testControl.hasError('required')">最大金額不能超過(guò)10元</mat-error><mat-error *ngIf="testControl.hasError('required')">這是一個(gè)必填項(xiàng)</mat-error> </mat-form-field>現(xiàn)在在文本框的左側(cè)加了一個(gè)美元符號(hào)，在文本框右側(cè)添加了后綴“元”，另外添加了必填和最大值驗(yàn)證。
這還只是一個(gè)不太復(fù)雜的文本框，Html居然這么長(zhǎng)。
組件標(biāo)簽結(jié)構(gòu)成為前端業(yè)務(wù)開發(fā)的第一個(gè)關(guān)注點(diǎn)。
繁瑣的數(shù)據(jù)綁定
如果要綁定一些可選項(xiàng)到下拉列表，一種辦法是硬編碼。
<mat-form-field><mat-select placeholder="請(qǐng)選一個(gè)吧"><mat-option value="1">A</mat-option><mat-option value="2">B</mat-option><mat-option value="3">C</mat-option></mat-select> </mat-form-field>這是具有三個(gè)選項(xiàng)的下拉列表。
?
如果我們要綁定56個(gè)民族，就需要硬編碼56個(gè)選項(xiàng)，這確實(shí)可行，不過(guò)一個(gè)下拉框就60幾行，占地太廣，復(fù)制粘貼也不方便。
另外，下拉選項(xiàng)可能是動(dòng)態(tài)的，這些可選值存儲(chǔ)在數(shù)據(jù)庫(kù)中。
數(shù)據(jù)綁定大多從服務(wù)端獲取數(shù)據(jù)，綁定到組件上。
Angular提倡將數(shù)據(jù)訪問(wèn)與組件分離，這個(gè)設(shè)計(jì)理念被Angular Material這些標(biāo)準(zhǔn)組件庫(kù)所遵循。
為了綁定數(shù)據(jù)，你首先需要發(fā)送一個(gè)Http請(qǐng)求，從服務(wù)端獲取Json數(shù)據(jù)，轉(zhuǎn)換為Ts對(duì)象，然后通過(guò)Angular提供的循環(huán)語(yǔ)法綁定上去。
<mat-form-field><mat-select placeholder="Favorite food"><mat-option *ngFor="let food of foods" [value]="food.value">{{food.viewValue}}</mat-option></mat-select> </mat-form-field>Angular Material下拉列表能夠分組，它與普通下拉列表的Html結(jié)構(gòu)不同，如果服務(wù)端返回的數(shù)據(jù)格式不太友好，綁定起來(lái)將更加困難。
<mat-form-field><mat-select placeholder="Pokemon" [formControl]="pokemonControl"><mat-option>-- None --</mat-option><mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"[disabled]="group.disabled"><mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">{{pokemon.viewValue}}</mat-option></mat-optgroup></mat-select> </mat-form-field>?
下拉列表并不是唯一需要數(shù)據(jù)綁定的組件，還有一些組件也需要，且它們更加復(fù)雜，比如樹型控件，表格控件，樹型表格控件等。
數(shù)據(jù)綁定成為前端業(yè)務(wù)開發(fā)的第二個(gè)關(guān)注點(diǎn)。?
低效的驗(yàn)證
驗(yàn)證是業(yè)務(wù)健壯性的基本保障，Angular Material表單組件提供了基本的驗(yàn)證方法。?
<mat-form-field><input matInput name="test" [(ngModel)]="value" required> </mat-form-field>上面演示了設(shè)置必填項(xiàng)的方法，它相當(dāng)簡(jiǎn)單，只要把required加到input標(biāo)簽上就好了。
遺憾的是，文本框雖然得到了驗(yàn)證，但卻沒有顯示出任何錯(cuò)誤提示消息。
通過(guò)添加一個(gè)mat-error標(biāo)簽，可以顯示指定錯(cuò)誤提示。
<mat-form-field><input matInput #control="ngModel" name="test" [(ngModel)]="value" required><mat-error *ngIf="control.hasError('required')">這是一個(gè)必填項(xiàng)</mat-error> </mat-form-field>如果組件上有兩個(gè)驗(yàn)證條件，你需要添加兩個(gè)mat-error標(biāo)簽。
<mat-form-field><input matInput #control="ngModel" name="test" [(ngModel)]="value" required max="10"><mat-error *ngIf="control.hasError('max') && !control.hasError('required')">最大值不能超過(guò)10</mat-error><mat-error *ngIf="control.hasError('required')">這是一個(gè)必填項(xiàng)</mat-error> </mat-form-field>注意，為了讓提示消息只在特定驗(yàn)證條件失敗時(shí)才顯示，你需要在mat-error標(biāo)簽上進(jìn)行驗(yàn)證狀態(tài)判斷。
如果現(xiàn)在組件包含5個(gè)驗(yàn)證條件，mat-error和它上面的判斷條件將變得相當(dāng)復(fù)雜。
另一方面，客戶端腳本驗(yàn)證只是為了提升用戶體驗(yàn)，用戶可以繞過(guò)界面直接請(qǐng)求你的服務(wù)端，所以真正的驗(yàn)證必須在服務(wù)端完成。
這樣一來(lái)，驗(yàn)證需要在客戶端和服務(wù)端編寫兩次，這造成了雙倍的工作量。
當(dāng)需求發(fā)生變動(dòng)，服務(wù)端和客戶端的驗(yàn)證很難同步更新，維護(hù)變得更加困難。
驗(yàn)證成為前端業(yè)務(wù)開發(fā)的第三個(gè)關(guān)注點(diǎn)。?
解決方案?
如果開發(fā)的時(shí)候，既不用關(guān)心Html的結(jié)構(gòu)，又不用關(guān)注數(shù)據(jù)怎么綁定，驗(yàn)證還能自動(dòng)完成，甚至連標(biāo)簽和它上面的屬性也不用記憶，這就最理想不過(guò)了，該如何實(shí)現(xiàn)呢？?
用Angular組件包裝標(biāo)準(zhǔn)組件?
首先我們需要用Angular組件對(duì)標(biāo)準(zhǔn)組件進(jìn)行包裝，以方便功能擴(kuò)展，這個(gè)自定義組件稱為包裝器。?
- 封裝Html復(fù)雜結(jié)構(gòu)
我們把標(biāo)準(zhǔn)組件的Html標(biāo)簽包裝起來(lái)，以屬性的形式提供訪問(wèn)。
<mat-form-field><input matInput placeholder="測(cè)試一下" [(ngModel)]="value" ><mat-hint>哈哈</mat-hint><button mat-button *ngIf="value" matSuffix mat-icon-button (click)="value=''"><mat-icon>close</mat-icon></button> </mat-form-field>把上面標(biāo)簽包裝后變成這樣。?
<mat-textbox-wrapperplaceholder="測(cè)試一下" [(ngModel)]="value" hint="哈哈" showClearButton="true"></mat-textbox-wrapper>mat-hint標(biāo)簽現(xiàn)在被轉(zhuǎn)換為hint屬性，通過(guò)showClearButton屬性來(lái)控制是否顯示清空按鈕，大幅提升了組件的易用性。?
- 約定前后端數(shù)據(jù)格式
不論下拉列表，還是表格，甚至樹型控件這些需要數(shù)據(jù)綁定的組件，都有一定規(guī)律可循。
當(dāng)你一遍又一遍的復(fù)制粘貼，仔細(xì)觀察這個(gè)機(jī)械乏味的綁定過(guò)程，不難抽取出公共元素，形成前后端數(shù)據(jù)綁定的通用數(shù)據(jù)格式。
一旦抽取出前后端通用數(shù)據(jù)格式，你只需將業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)換為通用格式，發(fā)送到客戶端就自動(dòng)綁定完成。
- 將數(shù)據(jù)操作內(nèi)置到包裝器
如果你曾經(jīng)使用過(guò)EasyUi這樣的組件庫(kù)，定會(huì)發(fā)現(xiàn)它的數(shù)據(jù)綁定功能十分強(qiáng)大，這是因?yàn)樗褦?shù)據(jù)操作內(nèi)置到了標(biāo)準(zhǔn)組件中。
基于Angular低耦合設(shè)計(jì)原則，Angular Material標(biāo)準(zhǔn)組件并不會(huì)直接請(qǐng)求服務(wù)端，任何數(shù)據(jù)綁定工作都需要你手工完成，不過(guò)我們可以將數(shù)據(jù)操作內(nèi)置到包裝器。?
一旦封裝完成，數(shù)據(jù)綁定變得非常簡(jiǎn)單，比如設(shè)置一個(gè)url屬性即可，服務(wù)端返回約定的數(shù)據(jù)格式。
<mat-select-wrapper url="/api/test"></mat-select-wrapper>用TagHelper封裝Angular組件?
Angular包裝器組件，大幅簡(jiǎn)化了標(biāo)準(zhǔn)組件的使用，但它提供的依然是Html，而自定義Html標(biāo)簽和屬性沒有什么提示，這意味著你如果記不住這些API，就需要隨時(shí)欣賞API文檔。
TagHelper終于閃亮登場(chǎng)。
- 強(qiáng)類型代碼提示和編譯時(shí)檢查?
一旦把Html標(biāo)簽封裝成TagHelper，就可以跟API文檔拜拜了，把代碼提示點(diǎn)出來(lái)，慢慢選，只要你知道該組件確實(shí)有這功能，哪怕印象有點(diǎn)模糊也沒關(guān)系。
Html標(biāo)簽和屬性的拼寫錯(cuò)誤也將與你無(wú)緣，VS大哥會(huì)為你把關(guān)，代碼健壯性將大幅提升。
?
- Lambda表達(dá)式元數(shù)據(jù)解析
很多人已經(jīng)認(rèn)識(shí)到HtmlHelper或TagHelper的好處是強(qiáng)類型提示，不過(guò)這個(gè)認(rèn)識(shí)還很膚淺。
TagHelper真正的威力來(lái)自Lambda表達(dá)式元數(shù)據(jù)解析，它提供了一個(gè)統(tǒng)一的抽象方式，自動(dòng)設(shè)置表單組件的常規(guī)屬性、驗(yàn)證，甚至數(shù)據(jù)綁定。
對(duì)于Angular Material表單組件，通常需要設(shè)置以下常規(guī)屬性：
-
- 控件名稱 name
- 占位文本 placeholder
- 雙向綁定 ngModel
常規(guī)驗(yàn)證：
-
- 必填項(xiàng)驗(yàn)證 required
- Email驗(yàn)證 email
- 最小長(zhǎng)度驗(yàn)證 minlength
- 最大長(zhǎng)度驗(yàn)證 maxlength
- 最小值驗(yàn)證 min
- 最大值驗(yàn)證 max
- 正則驗(yàn)證 pattern
幾乎所有表單組件都需要設(shè)置這三個(gè)常規(guī)屬性，而文本框更需要進(jìn)行多種驗(yàn)證，雖然這些操作并不復(fù)雜，但由于一個(gè)表單界面包含很多組件，每個(gè)組件都要挨個(gè)設(shè)置，既浪費(fèi)時(shí)間又枯燥乏味。?
如果能夠自動(dòng)化設(shè)置這些常規(guī)屬性和驗(yàn)證屬性，雖然從單個(gè)組件看并不起眼，但從整個(gè)項(xiàng)目的角度，能大幅提升生產(chǎn)力。?
Lambda表達(dá)式元數(shù)據(jù)解析，通過(guò)讀取C#屬性的類型信息以及相關(guān)的特性，能夠自動(dòng)化設(shè)置三大常規(guī)屬性，以及對(duì)文本框?qū)嵤┒喾N驗(yàn)證，還解決了客戶端與服務(wù)端驗(yàn)證無(wú)法同步的難題。?
一旦用上Lambda表達(dá)式，界面標(biāo)簽將變得干凈整潔，你的關(guān)注點(diǎn)將迅速轉(zhuǎn)移到業(yè)務(wù)上。
?
上面的TagHelper標(biāo)簽生成的結(jié)果Html如下。?
<mat-textbox-wrapper name="code" placeholder="應(yīng)用程序編碼" requiredMessage="應(yīng)用程序編碼不能為空" [(model)]="model&&model.code" [maxLength]="60" [required]="true"></mat-textbox-wrapper>for指向了ApplicationDto對(duì)象的Code屬性，下面是Code屬性的定義。
?
從Code屬性定義可以解析出該組件需要設(shè)置的常規(guī)屬性和驗(yàn)證屬性。
?
上面演示了文本框組件，對(duì)于單選框，多選框，下拉框等表單組件，都可以使用相同的方式，一個(gè)for屬性，基礎(chǔ)工作已經(jīng)完成。
封裝的弊端
看了前面的解決方案，你知道經(jīng)過(guò)幾層高強(qiáng)度封裝后，組件將變得簡(jiǎn)單易用，不過(guò)在將這些方法應(yīng)用到你的項(xiàng)目之前，你需要對(duì)這些方法有更深的了解。
任何事物都有其兩面性，所謂此消彼長(zhǎng)，在組件變得更加簡(jiǎn)單易用的同時(shí)，它的靈活性也在降低。
包裝器組件將Html結(jié)構(gòu)封裝起來(lái)，這會(huì)導(dǎo)致組件不再支持模板化，如果某個(gè)功能在你的包裝器中未實(shí)現(xiàn)，那么不能通過(guò)在包裝器標(biāo)簽內(nèi)嵌套HTML的方式組合出新的功能。
封裝包裝器組件有相當(dāng)多的講究，特別是Angular Material這樣的組件庫(kù)在功能上幾乎無(wú)法與EasyUi或Ext等企業(yè)級(jí)UI庫(kù)相提并論，你必須在易用性和靈活性間進(jìn)行平衡，對(duì)于像表格這樣的重量級(jí)組件，很難封裝到完全滿足業(yè)務(wù)需求，這種情況下，你必須為其保留模板化能力。
另一方面，封裝后的傻瓜式TagHelper，很容易把程序員慣壞，開發(fā)常用功能風(fēng)升水起，一碰到超出框架范圍的需求就變得束手無(wú)策，因?yàn)樗麄儚膩?lái)沒有學(xué)習(xí)過(guò)原生的知識(shí)。
你團(tuán)隊(duì)的主力開發(fā)人員必須對(duì)原生技術(shù)有系統(tǒng)了解。
一旦功能超出框架范圍，你必須有能力擴(kuò)展框架，在必要的時(shí)候，直接使用原生Html進(jìn)行開發(fā)，這時(shí)候你更能體會(huì)到TagHelper與Html混合編程的好處，既提升了常規(guī)功能的開發(fā)效率，又滿足了復(fù)雜功能對(duì)操作體驗(yàn)的需求。
Util組件介紹
下面簡(jiǎn)要介紹Util中封裝的幾個(gè)常用組件，它們來(lái)自Angular Material或PrimeNg組件庫(kù)。?
文本框
前面已經(jīng)展示過(guò)文本框的用法，除了常規(guī)屬性設(shè)置和驗(yàn)證以外，for指向?qū)傩缘臄?shù)據(jù)類型會(huì)影響生成的文本框類型，比如屬性為日期類型，文本框會(huì)變成一個(gè)日期選擇控件。??
/// <summary>/// 創(chuàng)建時(shí)間/// </summary>[Display( Name = "創(chuàng)建時(shí)間" )]public DateTime? CreationTime { get; set; } <util-textbox for="CreationTime"></util-textbox>生成的Html結(jié)果如下。?
<mat-datepicker-wrapper name="creationTime" placeholder="創(chuàng)建時(shí)間" [(model)]="model&&model.creationTime"></mat-datepicker-wrapper>下面再演示一下數(shù)值類型，添加了最大和最小值驗(yàn)證，并設(shè)置前綴文本和后綴圖標(biāo)。?當(dāng)屬性為數(shù)值類型時(shí)，文本框只能輸入數(shù)字。
/// <summary>/// 金額/// </summary>[Required( ErrorMessage = "必須填寫金額" )][Range(10,50,ErrorMessage = "有效金額在10到50之間")][Display( Name = "金額" )]public decimal Money { get; set; }生成的Html結(jié)果如下。?
<mat-textbox-wrapper type="number" name="money" placeholder="金額" [(model)]="model&&model.money" startHint="a" endHint="b" prefixText="$" suffixFontAwesomeIcon="fa-apple"[required]="true" requiredMessage="必須填寫金額"[min]="10" [max]="50" minMessage="有效金額在10到50之間" maxMessage="有效金額在10到50之間"></mat-textbox-wrapper>來(lái)看看執(zhí)行效果。
?
下拉列表
下拉列表的封裝，重點(diǎn)在于數(shù)據(jù)綁定。
- 綁定枚舉?
下面演示如何把民族枚舉綁定到下拉列表。?
C#代碼如下。?
1 /// <summary> 2 /// 民族 3 /// </summary> 4 public enum Nation { 5 /// <summary> 6 /// 漢族 7 /// </summary> 8 [Description( "漢族" )] 9 Hz = 0, 10 /// <summary> 11 /// 蒙古族 12 /// </summary> 13 [Description( "蒙古族" )] 14 Mgz = 1, 15 /// <summary> 16 /// 回族 17 /// </summary> 18 [Description( "回族" )] 19 HuiZ = 2, 20 /// <summary> 21 /// 藏族 22 /// </summary> 23 [Description( "藏族" )] 24 Zz = 3, 25 /// <summary> 26 /// 維吾爾族 27 /// </summary> 28 [Description( "維吾爾族" )] 29 Wwez = 4, 30 /// <summary> 31 /// 苗族 32 /// </summary> 33 [Description( "苗族" )] 34 Mz = 5, 35 /// <summary> 36 /// 彝族 37 /// </summary> 38 [Description( "彝族" )] 39 Yz = 6, 40 /// <summary> 41 /// 壯族 42 /// </summary> 43 [Description( "壯族" )] 44 ZhuangZ = 7, 45 /// <summary> 46 /// 布依族 47 /// </summary> 48 [Description( "布依族" )] 49 Byz = 8, 50 /// <summary> 51 /// 朝鮮族 52 /// </summary> 53 [Description( "朝鮮族" )] 54 Cxz = 9, 55 /// <summary> 56 /// 滿族 57 /// </summary> 58 [Description( "滿族" )] 59 ManZ = 10, 60 /// <summary> 61 /// 侗族 62 /// </summary> 63 [Description( "侗族" )] 64 Tz = 11, 65 /// <summary> 66 /// 瑤族 67 /// </summary> 68 [Description( "瑤族" )] 69 YaoZ = 12, 70 /// <summary> 71 /// 白族 72 /// </summary> 73 [Description( "白族" )] 74 Bz = 13,//baizu 75 /// <summary> 76 /// 土家族 77 /// </summary> 78 [Description( "土家族" )] 79 Tjz = 14, 80 /// <summary> 81 /// 哈尼族 82 /// </summary> 83 [Description( "哈尼族" )] 84 Hnz = 15, 85 /// <summary> 86 /// 哈薩克族 87 /// </summary> 88 [Description( "哈薩克族" )] 89 Hskz = 16, 90 /// <summary> 91 /// 傣族 92 /// </summary> 93 [Description( "傣族" )] 94 Dz = 17, 95 /// <summary> 96 /// 黎族 97 /// </summary> 98 [Description( "黎族" )] 99 Lz = 18, 100 /// <summary> 101 /// 傈僳族 102 /// </summary> 103 [Description( "傈僳族" )] 104 Lsz = 19, 105 /// <summary> 106 /// 佤族 107 /// </summary> 108 [Description( "佤族" )] 109 Wz = 20, 110 /// <summary> 111 /// 畬族 112 /// </summary> 113 [Description( "畬族" )] 114 Sz = 21, 115 /// <summary> 116 /// 高山族 117 /// </summary> 118 [Description( "高山族" )] 119 Gsz = 22, 120 /// <summary> 121 /// 拉祜族 122 /// </summary> 123 [Description( "拉祜族" )] 124 Lhz = 23, 125 /// <summary> 126 /// 水族 127 /// </summary> 128 [Description( "水族" )] 129 ShuiZ = 24, 130 /// <summary> 131 /// 東鄉(xiāng)族 132 /// </summary> 133 [Description( "東鄉(xiāng)族" )] 134 Dxz = 25, 135 /// <summary> 136 /// 納西族 137 /// </summary> 138 [Description( "納西族" )] 139 Nxz = 26, 140 /// <summary> 141 /// 景頗族 142 /// </summary> 143 [Description( "景頗族" )] 144 Jpz = 27, 145 /// <summary> 146 /// 柯爾克孜族 147 /// </summary> 148 [Description( "柯爾克孜族" )] 149 Kekzz = 28, 150 /// <summary> 151 /// 土族 152 /// </summary> 153 [Description( "土族" )] 154 TuZ = 29, 155 /// <summary> 156 /// 達(dá)斡爾族 157 /// </summary> 158 [Description( "達(dá)斡爾族" )] 159 Dwez = 30, 160 /// <summary> 161 /// 仫佬族 162 /// </summary> 163 [Description( "仫佬族" )] 164 Mlz = 31, 165 /// <summary> 166 /// 羌族 167 /// </summary> 168 [Description( "羌族" )] 169 Qz = 32, 170 /// <summary> 171 /// 布朗族 172 /// </summary> 173 [Description( "布朗族" )] 174 Blz = 33, 175 /// <summary> 176 /// 撒拉族 177 /// </summary> 178 [Description( "撒拉族" )] 179 Slz = 34, 180 /// <summary> 181 /// 毛南族 182 /// </summary> 183 [Description( "毛南族" )] 184 Mnz = 35, 185 /// <summary> 186 /// 仡佬族 187 /// </summary> 188 [Description( "仡佬族" )] 189 Ylz = 36, 190 /// <summary> 191 /// 錫伯族 192 /// </summary> 193 [Description( "錫伯族" )] 194 Xbz = 37, 195 /// <summary> 196 /// 阿昌族 197 /// </summary> 198 [Description( "阿昌族" )] 199 Acz = 38, 200 /// <summary> 201 /// 普米族 202 /// </summary> 203 [Description( "普米族" )] 204 Pmz = 39, 205 /// <summary> 206 /// 塔吉克族 207 /// </summary> 208 [Description( "塔吉克族" )] 209 Tjkz = 40, 210 /// <summary> 211 /// 怒族 212 /// </summary> 213 [Description( "怒族" )] 214 Nz = 41, 215 /// <summary> 216 /// 烏孜別克族 217 /// </summary> 218 [Description( "烏孜別克族" )] 219 Wzbkz = 42, 220 /// <summary> 221 /// 俄羅斯族 222 /// </summary> 223 [Description( "俄羅斯族" )] 224 Elsz = 43, 225 /// <summary> 226 /// 鄂溫克族 227 /// </summary> 228 [Description( "鄂溫克族" )] 229 Ewkz = 44, 230 /// <summary> 231 /// 德昂族 232 /// </summary> 233 [Description( "德昂族" )] 234 Daz = 45, 235 /// <summary> 236 /// 保安族 237 /// </summary> 238 [Description( "保安族" )] 239 Baz = 46, 240 /// <summary> 241 /// 裕固族 242 /// </summary> 243 [Description( "裕固族" )] 244 Ygz = 47, 245 /// <summary> 246 /// 京族 247 /// </summary> 248 [Description( "京族" )] 249 Jz = 48, 250 /// <summary> 251 /// 塔塔爾族 252 /// </summary> 253 [Description( "塔塔爾族" )] 254 Ttrz = 49, 255 /// <summary> 256 /// 獨(dú)龍族 257 /// </summary> 258 [Description( "獨(dú)龍族" )] 259 Dlz = 50, 260 /// <summary> 261 /// 鄂倫春族 262 /// </summary> 263 [Description( "鄂倫春族" )] 264 Elcz = 51, 265 /// <summary> 266 /// 赫哲族 267 /// </summary> 268 [Description( "赫哲族" )] 269 Hzz = 52, 270 /// <summary> 271 /// 門巴族 272 /// </summary> 273 [Description( "門巴族" )] 274 Mbz = 53, 275 /// <summary> 276 /// 珞巴族 277 /// </summary> 278 [Description( "珞巴族" )] 279 Lbz = 54, 280 /// <summary> 281 /// 基諾族 282 /// </summary> 283 [Description( "基諾族" )] 284 Jnz = 55 285 } 民族枚舉? /// <summary>/// 民族/// </summary>[Required( ErrorMessage = "必須選擇一個(gè)民族" )][Display( Name = "民族" )][DataMember]public Nation Nation { get; set; }TagHelper代碼如下。
<util-select for="Nation"></util-select>生成的Html如下，可以看出，民族可選項(xiàng)被硬編碼到Html標(biāo)簽中。
<mat-select-wrapper name="nation" placeholder="民族" requiredMessage="必須選擇一個(gè)民族" [(model)]="model&&model.nation"[dataSource]="[{'text':'漢族','value':0,'sortId':0},{'text':'蒙古族','value':1,'sortId':1},{'text':'回族','value':2,'sortId':2},{'text':'藏族','value':3,'sortId':3},{'text':'維吾爾族','value':4,'sortId':4},{'text':'苗族','value':5,'sortId':5},{'text':'彝族','value':6,'sortId':6},{'text':'壯族','value':7,'sortId':7},{'text':'布依族','value':8,'sortId':8},{'text':'朝鮮族','value':9,'sortId':9},{'text':'滿族','value':10,'sortId':10},{'text':'侗族','value':11,'sortId':11},{'text':'瑤族','value':12,'sortId':12},{'text':'白族','value':13,'sortId':13},{'text':'土家族','value':14,'sortId':14},{'text':'哈尼族','value':15,'sortId':15},{'text':'哈薩克族','value':16,'sortId':16},{'text':'傣族','value':17,'sortId':17},{'text':'黎族','value':18,'sortId':18},{'text':'傈僳族','value':19,'sortId':19},{'text':'佤族','value':20,'sortId':20},{'text':'畬族','value':21,'sortId':21},{'text':'高山族','value':22,'sortId':22},{'text':'拉祜族','value':23,'sortId':23},{'text':'水族','value':24,'sortId':24},{'text':'東鄉(xiāng)族','value':25,'sortId':25},{'text':'納西族','value':26,'sortId':26},{'text':'景頗族','value':27,'sortId':27},{'text':'柯爾克孜族','value':28,'sortId':28},{'text':'土族','value':29,'sortId':29},{'text':'達(dá)斡爾族','value':30,'sortId':30},{'text':'仫佬族','value':31,'sortId':31},{'text':'羌族','value':32,'sortId':32},{'text':'布朗族','value':33,'sortId':33},{'text':'撒拉族','value':34,'sortId':34},{'text':'毛南族','value':35,'sortId':35},{'text':'仡佬族','value':36,'sortId':36},{'text':'錫伯族','value':37,'sortId':37},{'text':'阿昌族','value':38,'sortId':38},{'text':'普米族','value':39,'sortId':39},{'text':'塔吉克族','value':40,'sortId':40},{'text':'怒族','value':41,'sortId':41},{'text':'烏孜別克族','value':42,'sortId':42},{'text':'俄羅斯族','value':43,'sortId':43},{'text':'鄂溫克族','value':44,'sortId':44},{'text':'德昂族','value':45,'sortId':45},{'text':'保安族','value':46,'sortId':46},{'text':'裕固族','value':47,'sortId':47},{'text':'京族','value':48,'sortId':48},{'text':'塔塔爾族','value':49,'sortId':49},{'text':'獨(dú)龍族','value':50,'sortId':50},{'text':'鄂倫春族','value':51,'sortId':51},{'text':'赫哲族','value':52,'sortId':52},{'text':'門巴族','value':53,'sortId':53},{'text':'珞巴族','value':54,'sortId':54},{'text':'基諾族','value':55,'sortId':55}]"[required]="true"></mat-select-wrapper>執(zhí)行效果如下。
- 綁定服務(wù)端數(shù)據(jù)
為了綁定服務(wù)端數(shù)據(jù)，必須約定通用數(shù)據(jù)格式，對(duì)于下拉列表，服務(wù)端C#是由Util.Item來(lái)完成的。
1 using System; 2 using Newtonsoft.Json; 3 4 namespace Util { 5 /// <summary> 6 /// 列表項(xiàng) 7 /// </summary> 8 public class Item : IComparable<Item> { 9 /// <summary> 10 /// 初始化 11 /// </summary> 12 /// <param name="text">文本</param> 13 /// <param name="value">值</param> 14 /// <param name="sortId">排序號(hào)</param> 15 /// <param name="group">組</param> 16 /// <param name="disabled">禁用</param> 17 public Item( string text, object value, int? sortId = null, string group = null, bool? disabled = null ) { 18 Text = text; 19 Value = value; 20 SortId = sortId; 21 Group = group; 22 Disabled = disabled; 23 } 24 25 /// <summary> 26 /// 文本 27 /// </summary> 28 [JsonProperty( "text", NullValueHandling = NullValueHandling.Ignore )] 29 public string Text { get; } 30 31 /// <summary> 32 /// 值 33 /// </summary> 34 [JsonProperty( "value", NullValueHandling = NullValueHandling.Ignore )] 35 public object Value { get; } 36 37 /// <summary> 38 /// 排序號(hào) 39 /// </summary> 40 [JsonProperty( "sortId", NullValueHandling = NullValueHandling.Ignore )] 41 public int? SortId { get; } 42 43 /// <summary> 44 /// 組 45 /// </summary> 46 [JsonProperty( "group", NullValueHandling = NullValueHandling.Ignore )] 47 public string Group { get; } 48 49 /// <summary> 50 /// 禁用 51 /// </summary> 52 [JsonProperty( "disabled", NullValueHandling = NullValueHandling.Ignore )] 53 public bool? Disabled { get; } 54 55 /// <summary> 56 /// 比較 57 /// </summary> 58 /// <param name="other">其它列表項(xiàng)</param> 59 public int CompareTo( Item other ) { 60 return string.Compare( Text, other.Text, StringComparison.CurrentCulture ); 61 } 62 } 63 } Util.Item客戶端Typescript定義了對(duì)應(yīng)的結(jié)構(gòu)。
1 //============== 列表============================= 2 //Copyright 2018 何鎮(zhèn)汐 3 //Licensed under the MIT license 4 //================================================ 5 import { ISort, sort } from '../core/sort'; 6 import { util } from '../index'; 7 8 /** 9 * 列表 10 */ 11 export class Select { 12 /** 13 * 初始化列表 14 * @param items 列表項(xiàng)集合 15 */ 16 constructor(private items: SelectItem[]) { 17 } 18 19 /** 20 * 轉(zhuǎn)換為下拉列表項(xiàng)集合 21 */ 22 toOptions(): SelectOption[] { 23 return this.getSortedItems().map(value => new SelectOption(value)); 24 } 25 26 /** 27 * 獲取已排序的列表項(xiàng)集合 28 */ 29 private getSortedItems() { 30 return sort(this.items); 31 } 32 33 /** 34 * 轉(zhuǎn)換為下拉列表組集合 35 */ 36 toGroups(): SelectOptionGroup[] { 37 let result: SelectOptionGroup[] = new Array<SelectOptionGroup>(); 38 let groups = util.helper.groupBy(this.getSortedItems(), t => t.group); 39 groups.forEach((items, key) => { 40 result.push(new SelectOptionGroup(key, items.map(item => new SelectOption(item)), false)); 41 }); 42 return result; 43 } 44 45 /** 46 * 是否列表組 47 */ 48 isGroup(): boolean { 49 return this.items.every(value => !!value.group); 50 } 51 } 52 53 /** 54 * 列表項(xiàng) 55 */ 56 export class SelectItem implements ISort { 57 /** 58 * 文本 59 */ 60 text: string; 61 /** 62 * 值 63 */ 64 value; 65 /** 66 * 禁用 67 */ 68 disabled?: boolean; 69 /** 70 * 排序號(hào) 71 */ 72 sortId?: number; 73 /** 74 * 組 75 */ 76 group?: string; 77 } 78 79 /** 80 * 下拉列表項(xiàng) 81 */ 82 export class SelectOption { 83 /** 84 * 文本 85 */ 86 text: string; 87 /** 88 * 值 89 */ 90 value; 91 /** 92 * 禁用 93 */ 94 disabled?: boolean; 95 96 /** 97 * 初始化下拉列表項(xiàng) 98 * @param item 列表項(xiàng) 99 */ 100 constructor(item: SelectItem) { 101 this.text = item.text; 102 this.value = item.value; 103 this.disabled = item.disabled; 104 } 105 } 106 107 /** 108 * 下拉列表組 109 */ 110 export class SelectOptionGroup { 111 /** 112 * 初始化下拉列表組 113 * @param text 文本 114 * @param value 值 115 * @param disabled 禁用 116 */ 117 constructor(public text: string, public value: SelectOption[], public disabled?: boolean) { 118 } 119 } SelectItem下面來(lái)演示一下用法。?
先把Nation屬性的類型改成int。
/// <summary>/// 民族/// </summary>[Required( ErrorMessage = "必須選擇一個(gè)民族" )][Display( Name = "民族" )][DataMember]public int Nation { get; set; }在WebApi控制器中，添加一個(gè)方法，用來(lái)獲取民族枚舉可選項(xiàng)。
通過(guò)Util.Helpers.Enum.GetItems方法可以提取出枚舉項(xiàng)列表，返回值為List<Item>，這正是我們約定的標(biāo)準(zhǔn)格式，如果返回的是業(yè)務(wù)類型列表，應(yīng)轉(zhuǎn)換為L(zhǎng)ist<Item>。
Success方法用來(lái)將List<Item>轉(zhuǎn)換為前后端約定的標(biāo)準(zhǔn)結(jié)果類型Result。?
/// <summary>/// 獲取民族可選項(xiàng)列表/// </summary>[HttpGet( "nationItems" )]public IActionResult GetNationItems() {List<Item> items = Util.Helpers.Enum.GetItems<Util.Biz.Enums.Nation>();return Success( items );}再來(lái)看TagHelper標(biāo)簽，for屬性承包了常規(guī)的機(jī)械工作，你將注意力集中在業(yè)務(wù)上，通過(guò)手工設(shè)置url屬性來(lái)加載遠(yuǎn)程數(shù)據(jù)。?
<util-select for="Nation" url="/api/test/nationItems"></util-select>效果跟直接綁定枚舉一樣，不過(guò)生成的Html簡(jiǎn)單很多。?
<mat-select-wrapper name="nation" placeholder="民族" requiredMessage="必須選擇一個(gè)民族" url="/api/application/nationItems" [(model)]="model&&model.nation" [required]="true"></mat-select-wrapper>上面演示的下拉列表并未分組，我們來(lái)改造一下，讓它以分組顯示。?
/// <summary>/// 獲取民族可選項(xiàng)列表/// </summary>[HttpGet( "nationItems" )]public IActionResult GetNationItems() {var result = Util.Helpers.Enum.GetItems<Util.Biz.Enums.Nation>().GroupBy( t => Util.Helpers.String.PinYin( t.Text.Substring( 0,1 ) ) ).SelectMany( t => t.ToList().Select( item => new Item( item.Text, item.Value, item.SortId, t.Key ) ) );return Success( result );}Util包含大量有用的Helper，Util.Helpers.String.PinYin方法能夠?qū)h字轉(zhuǎn)換為拼音首字母縮寫，使用GroupBy方法將民族拼音首字母進(jìn)行分組，并轉(zhuǎn)換為Item標(biāo)準(zhǔn)格式。
執(zhí)行效果如下。
?
TagHelper沒有任何變化，Angular Material下拉列表是否分組，其原生Html格式完全不同，但封裝以后，你根本感覺不到它們的區(qū)別，你不需要編寫任何一行Ts代碼，就完成了分組下拉列表的綁定，你應(yīng)該已經(jīng)體會(huì)到封裝的強(qiáng)大之處。?
單選按鈕
單選按鈕和下拉列表類似，下面演示一下枚舉綁定。
C#代碼如下。
/// <summary>/// 性別/// </summary>public enum Gender {/// <summary>/// 女/// </summary> [Description( "女士" )]Female = 1,/// <summary>/// 男/// </summary>[Description( "先生" )]Male = 2} /// <summary>/// 性別/// </summary>[Display( Name = "性別" )]public Gender Gender { get; set; }TagHelper標(biāo)簽如下。
<util-radio for="Gender"></util-radio>生成的Html標(biāo)簽如下。
<mat-radio-wrapper label="性別" name="gender" [(model)]="model&&model.gender" [dataSource]="[{'text':'女士','value':1,'sortId':1},{'text':'先生','value':2,'sortId':2}]"></mat-radio-wrapper>執(zhí)行效果如下。
?
復(fù)選框
復(fù)選框用于操作布爾類型。
C#代碼如下。
/// <summary>/// 啟用/// </summary>[Display( Name = "啟用" )][DataMember]public bool? Enabled { get; set; }TagHelper標(biāo)簽如下。
<util-checkbox for="Enabled"></util-checkbox>生成的Html標(biāo)簽如下。
<mat-checkbox name="gender" [(ngModel)]="model&&model.gender">性別</mat-checkbox>執(zhí)行效果如下。
?
?
滑動(dòng)開關(guān)
滑動(dòng)開關(guān)與復(fù)選框功能相同，但長(zhǎng)像更具現(xiàn)代化氣質(zhì)。
TagHelper標(biāo)簽如下。
<util-slide-toggle for="Enabled"></util-slide-toggle>生成的Html標(biāo)簽如下。
<mat-slide-toggle name="enabled" [(ngModel)]="model&&model.enabled">啟用</mat-slide-toggle>執(zhí)行效果如下。
?
?
表格?
Angular Material表格提供了一套模板化機(jī)制，你需要任何功能，往表格標(biāo)簽中添加元素就好了。
像序號(hào)，多選，分頁(yè)等常規(guī)功能都沒有內(nèi)置到Angular Material表格中，Angular Material官網(wǎng)以Demo的形式提供了參考樣例，如果你直接使用它來(lái)進(jìn)行業(yè)務(wù)開發(fā)，將導(dǎo)致十分低效的開發(fā)效率。
Util將自動(dòng)生成序號(hào)，多選，分頁(yè)，排序等常見功能以及數(shù)據(jù)綁定能力封裝到表格包裝器組件中，同時(shí)，Util保留了Angular Material表格的模板化能力，你依然可以通過(guò)往表格標(biāo)簽中添加元素的方式擴(kuò)展功能。
由于大多表格都需要分頁(yè)，約定的后臺(tái)數(shù)據(jù)格式由PagerList承載，Ts也定義了類似的分頁(yè)列表對(duì)象。
下面演示一個(gè)簡(jiǎn)單的表格示例。
服務(wù)端已經(jīng)封裝了通用的查詢方法，留待下篇介紹。
先看看TagHelper代碼。?
1 <util-table id="tableApplication" query-param="queryParam" base-url="application" 2 sort="CreationTime" sort-direction="Desc" max-height="500"> 3 <util-table-column type="Checkbox"></util-table-column> 4 <util-table-column type="LineNumber"></util-table-column> 5 <util-table-column for="Code" sort="true"></util-table-column> 6 <util-table-column for="Name" sort="true"></util-table-column> 7 <util-table-column for="Enabled" sort="true"></util-table-column> 8 <util-table-column for="RegisterEnabled" sort="true"></util-table-column> 9 <util-table-column for="CreationTime" sort="true"></util-table-column> 10 <util-table-column title="操作" column="operation"> 11 <util-table-cell> 12 <util-a styles="Icon" tooltip="編輯" bind-link="['update',row.id]"> 13 <util-icon material-icon="Edit"></util-icon> 14 </util-a> 15 <util-button styles="Icon" menu-id="menu"> 16 <util-icon material-icon="More_Vert"></util-icon> 17 <util-menu id="menu"> 18 <util-menu-item label="刪除" material-icon="Delete" on-click="delete(row.id)"></util-menu-item> 19 <util-menu-item label="查看詳細(xì)" material-icon="Visibility" bind-link="['detail',row.id]"></util-menu-item> 20 </util-menu> 21 </util-button> 22 </util-table-cell> 23 </util-table-column> 24 </util-table>生成的Html如下。?
1 <mat-table-wrapper #tableApplication="" baseUrl="application" key="application" maxHeight="500" [(queryParam)]="queryParam"><mat-table matSort="" matSortActive="CreationTime" matSortDirection="desc" matSortDisableClear="" [dataSource]="tableApplication.dataSource" [style.max-height]="tableApplication.maxHeight?tableApplication.maxHeight+'px':null" [style.min-height]="tableApplication.minHeight?tableApplication.minHeight+'px':null"> 2 <ng-container matColumnDef="selectCheckbox"><mat-header-cell *matHeaderCellDef=""><mat-checkbox (change)="$event?tableApplication.masterToggle():null" [checked]="tableApplication.isMasterChecked()" [disabled]="!tableApplication.dataSource.data.length" [indeterminate]="tableApplication.isMasterIndeterminate()"></mat-checkbox></mat-header-cell><mat-cell *matCellDef="let row"><mat-checkbox (change)="$event?tableApplication.checkedSelection.toggle(row):null" (click)="$event.stopPropagation()" [checked]="tableApplication.checkedSelection.isSelected(row)"></mat-checkbox></mat-cell></ng-container> 3 <ng-container matColumnDef="lineNumber"><mat-header-cell *matHeaderCellDef="">ID</mat-header-cell><mat-cell *matCellDef="let row">{{ row.lineNumber }}</mat-cell></ng-container> 4 <ng-container matColumnDef="code"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">應(yīng)用程序編碼</mat-header-cell><mat-cell *matCellDef="let row">{{ row.code }}</mat-cell></ng-container> 5 <ng-container matColumnDef="name"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">應(yīng)用程序名稱</mat-header-cell><mat-cell *matCellDef="let row">{{ row.name }}</mat-cell></ng-container> 6 <ng-container matColumnDef="enabled"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">啟用</mat-header-cell><mat-cell *matCellDef="let row"><mat-icon *ngIf="row.enabled">check</mat-icon><mat-icon *ngIf="!row.enabled">clear</mat-icon></mat-cell></ng-container> 7 <ng-container matColumnDef="registerEnabled"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">啟用注冊(cè)</mat-header-cell><mat-cell *matCellDef="let row"><mat-icon *ngIf="row.registerEnabled">check</mat-icon><mat-icon *ngIf="!row.registerEnabled">clear</mat-icon></mat-cell></ng-container> 8 <ng-container matColumnDef="creationTime"><mat-header-cell *matHeaderCellDef="" mat-sort-header="">創(chuàng)建時(shí)間</mat-header-cell><mat-cell *matCellDef="let row">{{ row.creationTime | date:"yyyy-MM-dd" }}</mat-cell></ng-container> 9 <ng-container matColumnDef="operation"><mat-header-cell *matHeaderCellDef="">操作</mat-header-cell> 10 <mat-cell *matCellDef="let row"> 11 <a mat-icon-button="" matTooltip="編輯" [routerLink]="['update',row.id]"> 12 <mat-icon>edit</mat-icon> 13 </a> 14 <button mat-icon-button="" type="button" [matMenuTriggerFor]="menu"> 15 <mat-icon>more_vert</mat-icon> 16 <mat-menu #menu="matMenu"><ng-template matMenuContent=""> 17 <button (click)="delete(row.id)" mat-menu-item=""><mat-icon>delete</mat-icon><span>刪除</span></button> 18 <button mat-menu-item="" [routerLink]="['detail',row.id]"><mat-icon>visibility</mat-icon><span>查看詳細(xì)</span></button> 19 </ng-template></mat-menu> 20 </button> 21 </mat-cell> 22 </ng-container> 23 <mat-header-row *matHeaderRowDef="['selectCheckbox','lineNumber','code','name','enabled','registerEnabled','creationTime','operation'];sticky:true"></mat-header-row><mat-row (click)="tableApplication.selectedSelection.select(row)" *matRowDef="let row;columns:['selectCheckbox','lineNumber','code','name','enabled','registerEnabled','creationTime','operation']" class="mat-row-hover" [class.selected]="tableApplication.selectedSelection.isSelected(row)"></mat-row></mat-table></mat-table-wrapper>可以看見，Html比TagHelper代碼要復(fù)雜得多，這還是封裝過(guò)后的情況，如果完全沒有封裝，折騰一個(gè)表格將會(huì)耗費(fèi)你大量精力，且Bug遍地，難以維護(hù)。?
Ts代碼幾乎看不見，你只需設(shè)置base-url屬性，數(shù)據(jù)綁定就完成了。?
base-url是一個(gè)基地址，根據(jù)約定創(chuàng)建服務(wù)端請(qǐng)求地址/api/baseUrl,如果你的請(qǐng)求地址不同，可以改為設(shè)置url屬性。?
執(zhí)行效果如下。
樹型表格
樹型層次關(guān)系是業(yè)務(wù)常見操作之一。
Util Angular Material的封裝主要是在Angular Material 5.x之前完成的，Angular Material 6.x才提供了樹型控件，所以Util尚未封裝樹型控件，不過(guò)為了解決編輯樹型層次困難的局面，我從PrimeNg組件庫(kù)Copy了一個(gè)樹型表格過(guò)來(lái)。
PrimeNg是另一個(gè)開源的Angular組件庫(kù)，它的樹型表格功能非常弱，我花了數(shù)天時(shí)間來(lái)修改它的源碼，以滿足我的基本需求。
由于樹型包含同步加載，異步加載，上移，下移，單選，多選等操作，封裝樹型表格比普通表格要復(fù)雜得多。
服務(wù)端提供了PrimeTreeControllerBase和PrimeTreeNode等對(duì)象類型來(lái)實(shí)現(xiàn)與客戶端通信，不過(guò)它們都還相當(dāng)具體化，待后續(xù)封裝Ng-Zorro樹型組件時(shí)再來(lái)重構(gòu)。
一旦封裝完成，它用起來(lái)就跟Angular Material表格幾乎沒什么區(qū)別。
來(lái)看個(gè)示例。
TagHelper代碼如下。?
<util-tree-table id="treeTable_role" base-url="role" query-param="queryParam" selection-mode="Multiple" key="treeTable_role" ><util-tree-table-column for="Name"></util-tree-table-column><util-tree-table-column for="Code"></util-tree-table-column><util-tree-table-column for="Enabled"></util-tree-table-column><util-tree-table-column for="SortId"></util-tree-table-column><util-tree-table-column title="操作"><util-a styles="Icon" tooltip="添加下級(jí)角色" link="create" query-params="{id:row.data.id}"><util-icon material-icon="Add"></util-icon></util-a><util-button id="btnMoveUp" styles="Icon" tooltip="上移" ng-if="!isFirst(row)" on-click="moveUp(row,btnMoveUp,$event)"><util-icon material-icon="Arrow_Upward"></util-icon></util-button><util-button id="btnMoveDown" styles="Icon" tooltip="下移" ng-if="!isLast(row)" on-click="moveDown(row, btnMoveDown,$event)"><util-icon material-icon="Arrow_Downward"></util-icon></util-button><util-button styles="Icon" menu-id="menu" on-click="selectRow(row,$event)"><util-icon material-icon="More_Vert"></util-icon><util-menu id="menu"><util-menu-item label="編輯" material-icon="Edit" bind-link="['update',row.data.id]"></util-menu-item><util-menu-item label="禁用" material-icon="Lock" on-click="disable(row)"></util-menu-item><util-menu-item label="啟用" material-icon="Lock_Open" on-click="enable(row)"></util-menu-item><util-menu-item label="刪除" material-icon="Delete" on-click="delete(row)"></util-menu-item><util-menu-item label="詳細(xì)" material-icon="Visibility" bind-link="['detail',row.data.id]"></util-menu-item></util-menu></util-button></util-tree-table-column> </util-tree-table>生成的Html如下。?
<p-tree-table #treeTable_role="" baseUrl="role" key="treeTable_role" selectionMode="checkbox" [(queryParam)]="queryParam"><p-column field="name" header="角色名稱"></p-column><p-column field="code" header="角色編碼"></p-column><p-column field="enabled" header="啟用"><ng-template let-first="first" let-i="index" let-last="last" let-row="rowData"><mat-icon *ngIf="row.data.enabled">check</mat-icon><mat-icon *ngIf="!row.data.enabled">clear</mat-icon></ng-template></p-column><p-column field="sortId" header="排序號(hào)"></p-column><p-column header="操作"><ng-template let-first="first" let-i="index" let-last="last" let-row="rowData"><a mat-icon-button="" matTooltip="添加下級(jí)角色" routerLink="create" [queryParams]="{id:row.data.id}"><mat-icon>add</mat-icon></a><mat-button-wrapper #btnMoveUp="" (onClick)="moveUp(row,btnMoveUp,$event)" *ngIf="!isFirst(row)" style="mat-icon-button" tooltip="上移"><ng-template><mat-icon>arrow_upward</mat-icon></ng-template></mat-button-wrapper><mat-button-wrapper #btnMoveDown="" (onClick)="moveDown(row, btnMoveDown,$event)" *ngIf="!isLast(row)" style="mat-icon-button" tooltip="下移"><ng-template><mat-icon>arrow_downward</mat-icon></ng-template></mat-button-wrapper><button (click)="selectRow(row,$event)" mat-icon-button="" type="button" [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon><mat-menu #menu="matMenu"><ng-template matMenuContent=""><button mat-menu-item="" [routerLink]="['update',row.data.id]"><mat-icon>edit</mat-icon><span>編輯</span></button><button (click)="disable(row)" mat-menu-item=""><mat-icon>lock</mat-icon><span>禁用</span></button><button (click)="enable(row)" mat-menu-item=""><mat-icon>lock_open</mat-icon><span>啟用</span></button><button (click)="delete(row)" mat-menu-item=""><mat-icon>delete</mat-icon><span>刪除</span></button><button mat-menu-item="" [routerLink]="['detail',row.data.id]"><mat-icon>visibility</mat-icon><span>詳細(xì)</span></button></ng-template></mat-menu></button></ng-template></p-column> </p-tree-table>看上去Html比TagHelper沒有復(fù)雜多少，那是因?yàn)橐呀?jīng)將功能內(nèi)置到樹型表格組件內(nèi)部，不得不承認(rèn)，有時(shí)候修改源碼比在外圍擴(kuò)展要省很多力氣。?
執(zhí)行效果如下。
?
在完成了異步加載，多選，上移，下移，搜索，刪除行，刷新，分頁(yè)等一系列功能后，一行Ts都沒有，是否感覺到很清爽呢。
其它組件?
Util還封裝了顏色拾取器，菜單，側(cè)邊欄等組件，限于篇幅，就不一一介紹。?
小結(jié)
本文簡(jiǎn)要介紹了Angular標(biāo)準(zhǔn)組件的封裝手法，它能夠大幅提升業(yè)務(wù)開發(fā)的生產(chǎn)力，同時(shí)也提醒你，必須系統(tǒng)學(xué)習(xí)原生技術(shù)，否則碰上稍微復(fù)雜點(diǎn)的問(wèn)題就無(wú)法解決。
本文更多的是介紹封裝思路，而封裝思想與具體UI技術(shù)無(wú)關(guān)，一旦你了解了封裝背后的動(dòng)機(jī)和技巧，不論Angular還是Vue，或者Android組件，甚至小程序都可以通過(guò)封裝來(lái)提升開發(fā)效率。
未完待續(xù)，C#服務(wù)端CRUD的封裝將在下篇介紹。
寫文需要?jiǎng)恿?#xff0c;請(qǐng)大家多多支持，點(diǎn)下推薦，Github點(diǎn)下星星。
Util應(yīng)用框架交流一群: 24791014（已滿）
Util應(yīng)用框架交流二群: 184097033
Util應(yīng)用框架地址：https://github.com/dotnetcore/util
轉(zhuǎn)載于:https://www.cnblogs.com/xiadao521/p/Util-Introduction-5.html
總結(jié)
以上是生活随笔為你收集整理的.Net Core应用框架Util介绍（五）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： NLP领域预训练模型
- 下一篇： [JZOJ5836] Sequence