abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之五(三十一)
程序员文章站
2023-11-10 21:42:58
在上一篇文章abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之四(三十) 中我们实现了新增组织部门信息功能，不过还存在一些BUG，如下图。“自动展开和子级”没有显示，“上级组织”下拉框中没有数据显示。今天我们来继续完善组织部门信... ......
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; }
}
}
[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>
推荐阅读
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之五(三十一)
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理五 (二十三)
-
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七）
-
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图（八）
-
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试（九）
-
abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与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结合增删改查之一(二十七)