ASP.NET ZERO 学习 JTable的使用

View信息：

@using Abp.Web.Mvc.Extensions
@using MedicalSystem.Authorization
@using MedicalSystem.Web.Navigation
@{
    ViewBag.CurrentPageName = PageNames.App.Common.DrugConfiguration;
}
@section Styles
{
    @Html.IncludeStyle("~/Areas/Mpa/Views/DrugConfiguration/Index.min.css")
}
@section Scripts
{
    @Html.IncludeScript("~/Areas/Mpa/Views/Common/_PermissionTree.js")
    @*@Html.IncludeScript("~/Areas/Mpa/Views/Roles/_CreateOrEditModal.js")*@
    @Html.IncludeScript("~/Areas/Mpa/Views/DrugConfiguration/Index.js")
}
<div class="row margin-bottom-5">
    <div class="col-xs-6">
        <div class="page-head">
            <div class="page-title">
                <h1>
                    <span>@L("DrugConfiguration")</span> <small>@L("DrugConfigurationInfo")</small>
                </h1>
            </div>
        </div>
    </div>
    <div class="col-xs-6 text-right">
        @if (IsGranted(AppPermissions.Pages_Administration_DrugConfiguration_Create))
        {
            <button id="CreateNewDrugConfigurationButton" class="btn btn-primary blue"><i class="fa fa-plus"></i> @L("CreateDrugConfiguration")</button>
        }
    </div>
</div>

<div class="portlet light">
    <div class="portlet-body">
        <div id="DrugConfigurationTable"></div>
    </div>
</div>

 

Index.Js

(function () {
    $(function () {

        var _$dcTable = $('#DrugConfigurationTable');
        var _drugConfigurationService = abp.services.app.drugConfiguration;

        var _permissions = {
            create: abp.auth.hasPermission('Pages.Administration.DrugConfiguration.Create'),
            edit: abp.auth.hasPermission('Pages.Administration.DrugConfiguration.Edit'),
            'delete': abp.auth.hasPermission('Pages.Administration.DrugConfiguration.Delete')
        };

        var _createModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Mpa/DrugConfiguration/CreateModal',
            scriptUrl: abp.appPath + 'Areas/Mpa/Views/DrugConfiguration/_CreateModal.js',
            modalClass: 'CreateDrugConfigurationModal'
        });

        var _editModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Mpa/DrugConfiguration/EditModal',
            scriptUrl: abp.appPath + 'Areas/Mpa/Views/DrugConfiguration/_EditModal.js',
            modalClass: 'EditDrugConfigurationModal'
        });

        _$dcTable.jtable({

            title: app.localize('DrugConfiguration'),
            paging: true, //是否显示分页控件
            actions: {
                listAction: {
                    method: _drugConfigurationService.getAllDrugConfiguration
                }
            },

            fields: {
                id: {
                    key: true,
                    list: false
                },
                actions: {
                    title: app.localize('Actions'),
                    width: '30%',
                    display: function (data) {
                        var $span = $('<span></span>');

                        if (_permissions.edit) {
                            $('<button class="btn btn-default btn-xs" title="' + app.localize('Edit') + '"><i class="fa fa-edit"></i></button>')
                                .appendTo($span)
                                .click(function () {
                                    _editModal.open({ id: data.record.id });
                                });
                        }

                        if (_permissions.delete) {
                            $('<button class="btn btn-default btn-xs" title="' + app.localize('Delete') + '"><i class="fa fa-trash-o"></i></button>')
                                .appendTo($span)
                                .click(function () {
                                    deleteRole(data.record);
                                });
                        }

                        return $span;
                    }
                },
                groupName: {
                    title: app.localize('DrugConfigurationGroupName'),
                    width: '30%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.groupName + " &nbsp; ");
                        return $span;
                    }
                },
                code: {
                    title: app.localize('DrugConfigurationCode'),
                    width: '20%',
                    display: function (data) {
                        var $span = $('<span></span>');

                        $span.append(data.record.code + " &nbsp; ");
                        return $span;
                    }
                },
                value: {
                    title: app.localize('DrugConfigurationValue'),
                    width: '20%',
                    display: function (data) {
                        var $span = $('<span></span>');
                        $span.append(data.record.value + " &nbsp; ");
                        return $span;
                    }
                }
            }
        });

        function deleteRole(dc) {
            abp.message.confirm(
                app.localize('DrugConfigurationDeleteWarningMessage', dc.groupName, dc.code, dc.value),
                function (isConfirmed) {
                    if (isConfirmed) {
                        _drugConfigurationService.deleteDrugConfiguration({
                            id: dc.id
                        }).done(function () {
                            getDrugConfiguration();
                            abp.notify.success(app.localize('SuccessfullyDeleted'));
                        });
                    }
                }
            );
        };

        $('#CreateNewDrugConfigurationButton').click(function () {
            _createModal.open();
        });

　　　　 //刷新
        function getDrugConfiguration() {
            _$dcTable.jtable('load');
        }

        abp.event.on('app.createOrEditDrugConfigurationModalSaved', function () {
            getDrugConfiguration();
        });

        getDrugConfiguration();
    });
})();

_CreateModal.cshtml

@using Abp.Organizations
@using MedicalSystem.Web.Areas.Mpa.Models.Common.Modals
@model MedicalSystem.Web.Areas.Mpa.Models.Doctor.Common.CreateDrugConfigurationModalViewModel

@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("CreateDrugConfiguration")))

<div class="modal-body">
    <form name="DrugConfigurationForm" role="form" novalidate class="form-validation">
        <input type="hidden" name="Id" value="@Model.Id" />
        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <input class="form-control" type="text" name="GroupName" required maxlength="@OrganizationUnit.MaxDisplayNameLength">
            <label>@L("DrugConfigurationGroupName")</label>
        </div>
        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <input class="form-control" type="text" name="Code" required maxlength="@OrganizationUnit.MaxDisplayNameLength">
            <label>@L("DrugConfigurationCode")</label>
        </div>
        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <input class="form-control" type="text" name="Value" required maxlength="@OrganizationUnit.MaxDisplayNameLength">
            <label>@L("DrugConfigurationValue")</label>
        </div>
    </form>
</div>

@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")

 

_CreateModal.js

(function() {
    app.modals.CreateDrugConfigurationModal = function () {

        var _modalManager;
        var _drugConfigurationService = abp.services.app.drugConfiguration;
        var _$form = null;

        this.init = function(modalManager) {
            _modalManager = modalManager;

            _$form = _modalManager.getModal().find('form[name=DrugConfigurationForm]');
            _$form.validate({ ignore: "" });
        };

        this.save = function() {
            if (!_$form.valid()) {
                return;
            }

            var drugConfiguration = _$form.serializeFormToObject();

            _modalManager.setBusy(true);
            _drugConfigurationService.createDrugConfiguration(
                drugConfiguration
            ).done(function(result) {
                abp.notify.info(app.localize('SavedSuccessfully'));
                _modalManager.setResult(result);
                _modalManager.close();
                abp.event.trigger('app.createOrEditDrugConfigurationModalSaved');
            }).always(function() {
                _modalManager.setBusy(false);
            });
        };
    };
})();

 

红色部门代表是Appliation方法，WebAPi

 

分页的写法：

   public async Task<PagedResultOutput<DrugConfigurationListDto>> GetAllDrugConfiguration(GetDrugConfigurationInput input)
        {
            var query = _drugCRepository.GetAll();
            var userCount = await query.CountAsync();
            var users = await query
                .OrderBy(p => p.Code)
                .PageBy(input)
                .ToListAsync();

            var userListDtos = users.MapTo<List<DrugConfigurationListDto>>();
            return new PagedResultOutput<DrugConfigurationListDto>(
                userCount,
                userListDtos
                );
        }