abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之五(三十一)
阿新 • • 發佈：2019-12-20
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實現倉儲管理系統——EasyUI前端頁面框架 (十八)
在上一篇文章abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之四(三十) 中我們實現了新增組織部門資訊功能，不過還存在一些BUG，如下圖。“自動展開和子級”沒有顯示，“上級組織”下拉框中沒有資料顯示。今天我們來繼續完善組織部門資訊新增功能。
十、建立下拉框樹
1. 在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊在領域層“ABP.TPLMS.Web.Mvc”專案中的Models目錄。 選擇“新增” > “新建資料夾”。並重命名為“Orgs”。
2. 在Visual Studio 2017的“解決方案資源管理器”中，滑鼠右鍵單擊“Org”資料夾，然後選擇“新增” > “新建項…”。 在“新增新項-ABP.TPLMS.Web.Mvc”對話方塊中，選擇“類”，並將名稱命名為TreeJsonModel.cs。程式碼如下。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace ABP.TPLMS.Web.Models.Orgs
{
/// <summary>
/// 構建Json資料來源的資料格式，屬性有id,test,children,這裡名字不能夠更改否則不能夠讀取出來
/// </summary>
public class TreeJsonViewModel
{
/// <summary>
/// ID
/// </summary>
public int id { get; set; }
/// <summary>
/// 分類
/// </summary>
public string text { get; set; }
/// <summary>
/// 子類
/// </summary>
public List<TreeJsonViewModel> children { get; set; }
/// <summary>
/// 父ID
/// </summary>
public int parentId { get; set; }
public string url { get; set; }
public string state { get; set; }
}
}
3. 在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊在領域層“ABP.TPLMS.Web.Mvc”專案中的Controller目錄中找到OrgsController.cs檔案，在此檔案中輸入建立下拉列表樹的JSON程式碼。
[DontWrapResult]
[HttpGet]
public JsonResult GetJsonTree()
{
PagedOrgResultRequestDto paged = new PagedOrgResultRequestDto();
var classlist = _orgAppService.GetAll(paged).GetAwaiter().GetResult().Items;
List<TreeJsonViewModel> list = LinqJsonTree(classlist,0);
return Json(list);
}
/// <summary>
/// 遞迴
/// </summary>
/// <param name="list"></param>
/// <returns></returns>
private List<TreeJsonViewModel> LinqJsonTree(IReadOnlyList<OrgDto> orgs,int parentId)
{
List<TreeJsonViewModel> jsonData = new List<TreeJsonViewModel>();
List<OrgDto> classlist = orgs.Where(m => m.ParentId == parentId).ToList();
classlist.ToList().ForEach(item =>
{
jsonData.Add(new TreeJsonViewModel
{
id = item.Id,
children = LinqJsonTree(orgs, item.Id),
parentId = item.ParentId,
text = item.Name,
url = string.Empty,
state = parentId == 0 ? "open" : ""
});
});
return jsonData;
}
4. 在Visual Studio 2017中按F5執行應用程式。登入之後，點選“[組織管理]”選單，我們可以看到貨物管理列表頁面。然後點選“新增”按鈕。如下圖。
5.我們發現我們需要的“自動展開和子級”兩個Checkbox複選框沒有顯示，而且點選“上級組織”的下拉箭頭，下拉列表中也沒有任何資料。我們在瀏覽器中按F12。會發現如下圖。
6.對於上面的情況，是由於樣式衝突造成的。我們重寫對應的程式碼。程式碼如下。
<div id="divAddUpdOrg" class="easyui-dialog" closed="true" data-options="buttons: '#dlg-buttons'">
<form name="OrgEditForm" role="form" novalidate class="form-validation">
<table>
<tr>
<td><input type="hidden" name="Id" id="IDUpdate" /></td>
</tr>
<tr>
<td>組織名稱：</td>
<td>
<input type="text" id="NameUpdate" name="Name" class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 組織程式碼：</td>
<td><input type="text" id="UpdBizCode" name="BizCode" class="form-control input-sm" /></td>
</tr>
<tr>
<td>型別：</td>
<td>
<input type="text" id="UpdType" name="Type" class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 關區程式碼：</td>
<td><input type="text" id="UpdCustomCode" name="CustomCode" class="form-control input-sm" /></td>
</tr>
<tr>
<td>自動展開：</td>
<td>
<div class="form-control input-sm">
<input type="checkbox" name="IsAutoExpand" value="true" id="UpdIsAutoExpand"
class="filled-in" checked />
<label for="UpdIsAutoExpand"></label>
</div>
</td>
</tr>
<tr>
<td>子級：</td>
<td>
<div class="form-control input-sm">
<input type="checkbox" name="IsLeaf" value="true" id="UpdIsLeaf" class="filled-in" checked />
<label for="UpdIsLeaf"></label>
</div>
</td>
</tr>
<tr>
<td>狀態：</td>
<td>
<input type="text" id="UpdStatus" name="Status" class="form-control input-sm" />
</td>
</tr>
<tr>
<td>上級組織：</td>
<td>
<input id="AddTree" name="ParentName" class="easyui-combotree" />
</td>
</tr>
<tr>
<td>熱鍵：</td>
<td>
<input id="UpdHotKey" name="HotKey" class="form-control input-sm" />
</td>
</tr>
<tr>
<td>圖示：</td>
<td>
<input id="UpdIconName" name="IconName" class="form-control input-sm" />
</td>
</tr>
<tr>
<td>
<input id="UpdParentId" name="ParentId" type="hidden" />
</td>
</tr>
<tr>
<td>備註：</td>
<td>
<input type="text" id="RemarkUpdate" name="URemark" class="form-control input-sm" />
</td>
</tr>
</table>
</form>
</div>