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實現倉儲管理系統——EasyUI前端頁面框架 (十八)
在上一篇abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之二(二十八) 文章中我們建立了一些組織管理功能用到的類，這一篇文章中我們進行組織管理的列表頁面。
八、使用EasyUI建立組織列表頁面
1. 在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊在領域層“ABP.TPLMS.Web.Mvc”專案中的Views目錄。 選擇“新增” > “新建資料夾”。並重命名為“Orgs”。
2. 在Visual Studio 2017的“解決方案資源管理器”中，滑鼠右鍵單擊“Orgs”資料夾，然後選擇“新增” > “新建項…”。 在“新增新項-ABP.TPLMS.Web.Mvc”對話方塊中，選擇“Razor檢視”，並將名稱命名為Index.cshmtl。如下圖。
3. 在我們剛才建立的Index.cshmtl檔案中，編寫如下程式碼：
@using ABP.TPLMS.Web.Startup
@{
ViewData["Title"] = PageNames.Org;
}
@section scripts
{
<script src="~/view-resources/Views/Orgs/Index.js" asp-append-version="true"></script>
<script type="text/javascript">
// var editFlag = undefined;
$(function () {
initable();
reloaded();
});
</script>
}
<div data-options="region:'center'" style="overflow: hidden;">
<div id="containter" style="width: 1000px; height: auto; margin: 0px auto;">
<!--toolbar-->
<div style="margin-bottom:1px;font-weight:bold;">
<a href="#" id="add" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
style="width:100px; height:30px; ">新增</a>
<a href="#" id="del" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"
style="width:100px; height:30px; ">刪除</a>
<a href="#" id="edit" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"
style="width:100px; height:30px; ">修改</a>
<a href="#" id="reload" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"
style="width:100px; height:30px; ">重新整理</a>
</div>
<!--panel-->
<div data-options="region:'center',split:false" style="height:500px;">
<!--表格-->
<table id="dgOrg"></table>
</div>
</div>
</div>
4. 在Visual Studio 2017的“解決方案資源管理器”中，找到領域層“ABP.TPLMS.Web.Mvc”專案中的wwwroot目錄下的view-resources目錄。使用滑鼠右鍵單擊此目錄，在彈出選單中選擇“新增” > “新建資料夾”。並重命名為“Org”。
5. 在Visual Studio 2017的“解決方案資源管理器”中，滑鼠右鍵單擊“Org”資料夾，然後選擇“新增” > “新建項…”。 在“新增新項-ABP.TPLMS.Web.Mvc”對話方塊中，選擇“javascript檔案”，並將名稱命名為Index.js。如下圖。
6. 在Index.js檔案中，我們寫入如下程式碼。
//------------------------系統管理-->組織資訊--------------------------------//
//重新整理資料
function initable() {
$("#dgOrg").treegrid({
url: "/Orgs/List",
title: "組織管理",
pagination: false,
fit: true,
fitColumns: false,
loadMsg: "正在載入組織資訊...",
nowarp: false,
border: false,
idField: "Id",
sortName: "Id",
sortOrder: "asc",
treeField: "Name",
frozenColumns: [[//凍結列
{
field: "chk", checkbox: true, align: "left", width: 50
}
]],
columns: [[
{ title: "編號", field: "Id", width: 50, sortable: true },
{ title: "組織名稱", field: "Name", width: 200, sortable: true },
{ title: "程式碼", field: "BizCode", width: 100, sortable: true },
{ title: "海關程式碼", field: "CustomCode", width: 100, sortable: true },
{ title: "狀態", field: "Status", width: 80, sortable: false },
{ title: "型別", field: "Type", width: 80, sortable: false },
{ title: '建立時間', field: 'CreationTime', width: 130, align: 'center' }
]]
});
}
function reloaded() { //reload
$("#reload").click(function () {
//
$('#dgOrg').treegrid('reload');
});
}
7. 在Visual Studio 2017中按F5執行應用程式。登入之後，點選“[組織管理]”選單，我們可以看到貨物管理列表頁面。如下圖。
&n