一.前言
通過前面的文章至的學習,我們已經有實現了傳統的ASP.NET Core MVC+EasyUI的增刪改查功能。本篇文章我們要實現了使用ABP提供的WebAPI方式+EasyUI來實現增刪改查的功能。本文中我們將不在使用DataGrid表格控件,而是使用樹形表格(TreeGrid)控件。
二、樹形表格(TreeGrid)介紹
我先上圖,讓我們來看一下功能完成之後的組織管理信息列表頁面。如下圖。
這個組織管理列表頁面使用TreeGrid來實現的。我們接下來介紹一下TreeGrid。
首先、在定義TreeGrid時有兩個屬性必須要有一個是idField,這個要唯一;另一個是treeField的定義,這是樹節點的值,必須要有。
其次、easyui加載treegrid的json數據格式有三種,我就介紹我常用的這種。其他兩種方式,請查看easyui的相關文檔。
{"total":7,"rows":[
{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},
{"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},
{"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},
{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
],"footer":[
{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
]}
下面介紹一下上面數據中的幾個重要屬性:
1) _parentId :字段_parentId必不可少,且名稱唯一。記得前面有“_” ,他是用來記錄父級節點,沒有這個屬性,是沒法展示父級節點 其次就是這個父級節點必須存在,不然信息也是展示不出來,在後台遍歷組合的時候,如果父級節點不存在或為0時,此時 _parentId 應該不賦值,或設為“”。如果賦值 “0” 則在表格中不显示數據。
2) state:是否展開
3) checked:是否選中(用於複選框)
4) iconCls:選項前面的圖標,如果自己不設定,父級節點默認為文件夾圖標,子級節點為文件圖標
下面我們來開始實現組織管理頁面的相關功能。首先我們要創建一個組織信息實體。
三、創建Org實體
1. 在Visual Studio 2017的“解決方案資源管理器”中,右鍵單擊“ABP.TPLMS.Core”項目的“Entitys”文件夾,在彈出菜單中選擇“添加” >
> “類”。 將類命名為 Org,然後選擇“添加”。
2.創建Org類繼承自Entity<int>,通過實現審計模塊中的IHasCreationTime來實現保存創建時間。根據TreeGrid所需要的數據格式的要求。代碼如下:
using Abp.Domain.Entities;
using Abp.Domain.Entities.Auditing;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Text;
namespace ABP.TPLMS.Entitys
{
public partial class Org : Entity<int>, IHasCreationTime
{
int m_parentId = 0;
public Org()
{
this.Id = 0;
this.Name = string.Empty;
this.HotKey = string.Empty;
this.ParentId = 0;
this.ParentName = string.Empty;
this.IconName = string.Empty;
this.Status = 0;
this.Type = 0;
this.BizCode = string.Empty;
this.CustomCode = string.Empty;
this.CreationTime = DateTime.Now;
this.UpdateTime = DateTime.Now;
this.CreateId = 0;
this.SortNo = 0;
}
[Required]
[StringLength(255)]
public string Name { get; set; }
[StringLength(255)]
public string HotKey { get; set; }
public int ParentId { get { return m_parentId; } set { m_parentId = value; } }
[Required]
[StringLength(255)]
public string ParentName { get; set; }
public bool IsLeaf { get; set; }
public bool IsAutoExpand { get; set; }
[StringLength(255)]
public string IconName { get; set; }
public int Status { get; set; }
public int Type { get; set; }
[StringLength(255)]
public string BizCode { get; set; }
[StringLength(100)]
public string CustomCode { get; set; }
public DateTime CreationTime { get; set; }
public DateTime UpdateTime { get; set; }
public int CreateId { get; set; }
public int SortNo { get; set; }
public int? _parentId {
get {
if (m_parentId == 0)
{
return null;
}
return m_parentId;
}
}
}
}
3.定義好實體之後,我們去“ABP.TPLMS.EntityFrameworkCore”項目中的“TPLMSDbContext”類中定義實體對應的DbSet,以應用Code First 數據遷移。添加以下代碼
using Microsoft.EntityFrameworkCore;
using Abp.Zero.EntityFrameworkCore;
using ABP.TPLMS.Authorization.Roles;
using ABP.TPLMS.Authorization.Users;
using ABP.TPLMS.MultiTenancy;
using ABP.TPLMS.Entitys;
namespace ABP.TPLMS.EntityFrameworkCore
{
public class TPLMSDbContext : AbpZeroDbContext<Tenant, Role, User, TPLMSDbContext>
{
/* Define a DbSet for each entity of the application */
public TPLMSDbContext(DbContextOptions<TPLMSDbContext> options)
: base(options)
{
}
public DbSet<Module> Modules { get; set; }
public DbSet<Supplier> Suppliers { get; set; }
public DbSet<Cargo> Cargos { get; set; }
public DbSet<Org> Orgs { get; set; }
}
}
4.從菜單中選擇“工具->NuGet包管理器器—>程序包管理器控制台”菜單。
5. 在PMC中,默認項目選擇EntityframeworkCore對應的項目后。輸入以下命令:Add-Migration AddEntityOrg,創建遷移。如下圖。
6. 在上面的命令執行完畢之後,創建成功后,會在Migrations文件夾下創建時間_AddEntityOrg格式的類文件,這些代碼是基於DbContext指定的模型。如下圖。
7.在程序包管理器控制台,輸入Update-Database,回車執行遷移。執行成功后,如下圖。
8. 在SQL Server Management Studio中查看數據庫,Orgs表創建成功。
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※帶您來了解什麼是 USB CONNECTOR ?
※自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象
※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!!
※綠能、環保無空污,成為電動車最新代名詞,目前市場使用率逐漸普及化
※廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益
※試算大陸海運運費!