abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之三(二十九)
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运行应用程序。登录之后,点击“[组织管理]”菜单,我们可以看到货物管理列表页面。如下图。
相关文章
- 对 python 中 @property 和计算属性的一些思考
- 如何使用 numpy 和 pytorch 快速计算 IOU
- 实践案例丨基于ModelArts AI市场算法MobileNet_v2实现花卉分类
- 美女面试官问我Python如何优雅的创建临时文件,我的回答....
- 绝了,华为云服务器“The 3”出道,每款都很能打
- Volcano火山:容器与批量计算的碰撞
- 【华为云技术分享】LiteOS无法直接烧录或者烧录失败解决方法--ST-Link
- 快速了解云原生中的微服务应用(内含福利)
- 从软件开发到 AI 领域工程师:模型训练篇
- 【福利活动】华为云“上云之路”征文大赛开启,FreeBuds3无线耳机等重磅好礼送不停
- 【儿童节特辑】风格迁移——让你的照片秒变手绘日漫风
- 【极客思考】计算机网络:Wireshark抓包分析TCP中的三次握手与四次挥手
- 低代码开发平台发展趋势:低代码——炒作还是趋势?
- 我们谈自动驾驶网络到底在谈什么?
- 【昇腾】ModelArts与Atlas 200 DK云端协同开发——行人检测Demo(完整版)
- 疫情数据背后,聊聊数据分析平台变迁史
- 华为五大专家亲述:如何转型搞 AI?
- 【华为云技术分享】LwM2M协议的学习与分享
- Serverless架构的前世今生
- 【华为云技术分享】STM32L476移植华为LiteOS系列教程(二)---开发前准备