abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之一(二十七)
abp(net core)+easyui+efcore實現倉儲管理系統目錄
abp(net core)+easyui+efcore實現倉儲管理系統——ABP總體介紹(一)
abp(net core)+easyui+efcore實現倉儲管理系統——解決方案介紹(二)
abp(net core)+easyui+efcore實現倉儲管理系統——領域層建立實體(三)
abp(net core)+easyui+efcore實現倉儲管理系統——定義倉儲並實現 (四)
abp(net core)+easyui+efcore實現倉儲管理系統——建立應用服務(五)
abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之控制器(六)
abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之列表檢視(七)
abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之增刪改檢視(八)
abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之選單與測試(九)abp(net core)+easyui+efcore實現倉儲管理系統——多語言(十)
abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十一)
abp(net core)+easyui+efcore實現倉儲管理系統——選單-上 (十六)
abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI前端頁面框架 (十八)
abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理一 (十九)
abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理六(二十四) abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理七(二十五) abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理八(二十六)一.前言
通過前面的文章abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理一 (十九) 至 abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理八(二十六) 的學習,我們已經有實現了傳統的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表建立成功。