abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之五(三十一)

在上一篇文章abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之四(三十) 中咱們實現了新增組織部門信息功能，不過還存在一些BUG，以下圖。「自動展開和子級」沒有顯示，「上級組織」下拉框中沒有數據顯示。今天咱們來繼續完善組織部門信息新增功能。json

10、建立下拉框樹

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; }
    }

}

3. 在Visual Studio 2017的「解決方案資源管理器」中，右鍵單擊在領域層「ABP.TPLMS.Web.Mvc」項目中的Controller目錄中找到OrgsController.cs文件，在此文件中輸入建立下拉列表樹的JSON代碼。

[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運行應用程序。登陸以後，點擊「[組織管理]」菜單，咱們能夠看到貨物管理列表頁面。而後點擊「添加」按鈕。以下圖。post

5.咱們發現咱們須要的「自動展開和子級」兩個Checkbox複選框沒有顯示，並且點擊「上級組織」的下拉箭頭，下拉列表中也沒有任何數據。咱們在瀏覽器中按F12。會發現以下圖。測試

6.對於上面的狀況，是因爲樣式衝突形成的。咱們重寫對應的代碼。代碼以下。
ui

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。