八、使用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運行應用程序。登錄之后，點擊“[組織管理]”菜單，我們可以看到貨物管理列表頁面。如下圖。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

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

abp(net core)+easyui+efcore實現倉儲管理系統目錄

八、使用EasyUI創建組織列表頁面

免責聲明！