abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之三(二十九)

@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运行应用程序。登录之后，点击“[组织管理]”菜单，我们可以看到货物管理列表页面。如下图。

abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之三(二十九)

上一篇：他靠5毛钱一袋的辣条起家，如今公司年收入20亿、市值500亿！

下一篇：天九共享集团卢俊卿：构建每个企业的“长赢法则”

abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之三(二十九)

abp(net core)+easyui+efcore实现仓储管理系统目录

八、使用easyui创建组织列表页面

abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)

abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十五)

abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十二)

abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之五(三十一)

abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与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结合增删改查之二(二十八)