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.cnblogs.com/chillsrc/p/11975823.html