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實作倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之一(二十七) abp(net core)+easyui+efcore實作倉儲管理系統——ABP WebAPI與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運行應用程式，登錄之后，點擊“[組織管理]”選單，我們可以看到貨物管理串列頁面，如下圖，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/87875.html
標籤：.NET Core