JS組件系列——在ABP中封裝BootstrapTable

時間 2019-11-06

標籤組件系列 abp 封裝 bootstraptable 欄目 JavaScript 简体版

原文原文鏈接

前言：關於ABP框架，博主關注差很少有兩年了吧，一直遲遲沒有嘗試。一方面博主以爲像這種複雜的開發框架確定有它的過人之處，系統的穩定性和健壯性比通常的開源框架確定強不少，但是另外一方面往往想到它繁瑣的封裝和複雜的開發流程就望而卻步，就這樣遲遲沒有行動。最近在項目裏面用到了ABP框架，沒辦法，只有硬着頭皮上了。通過這一段時間的熟悉，算是對這個框架有了一個大概的瞭解。今天來分享下如何在ABP框架的模式裏面使用bootstrapTable組件。html

本文原創地址：http://www.cnblogs.com/landeanfen/p/7261651.html前端

1、關於ABP

ABP是「ASP.NET Boilerplate Project (ASP.NET樣板項目)」的簡稱，它是一個成熟的開源框架，基於DDD+Repository模式，自帶Zero權限和認證模塊，避免了從零開始搭建框架的煩惱。關於ABP的框架優點就此打住，由於這樣說下去要說三天三夜，脫離文本主題。git

關於ABP的入門，博主不想說太多，園子裏面tkb至簡和陽光銘睿有不少入門級的文章，有興趣的能夠了解下，仍是給出它的官網和開源地址。github

ABP官方網站：http://www.aspnetboilerplate.comajax

ABP開源項目：https://github.com/aspnetboilerplatejson

PS：若是你不肯意去看它的源碼，能夠直接查看ABP官網上面的演示地址：https://aspnetzero.com/?ref=abptmplpagebootstrap

點擊CREATE MY DEMO按鈕，系統會自動爲你生成演示地址api

進入對應的Demo URLapp

使用演示的用戶名和密碼登錄進去框架

能夠看到Zero模塊的實現效果。

2、jTable在ABP中的運用

若是你下載ABP的源碼，而且選擇的是混合開發模式（ABP提供了兩種開發模式，一種是基於MVVM的Angular.js的模式；另外一種就是MVC+jQuery的混合開發模式），以下圖：

當你Down下來源碼以後你就會發現，ABP的源碼裏面的UI部分的表格都是使用jTable去實現的。爲何會用jTable？緣由很簡單，jTable是ABP的做者kalkan寫的一款開源插件，本身寫的確定用本身的東西嘍。下面jTable的效果來一發。

來一個jtable的父子表：

若是是不帶父子表的簡單表格，其實jTable的效果其實還行，但是加上一些複雜的功能以後，那一片片藍色的區域不忍直視，而且jTable的api還有待完善，不少須要的功能都須要本身去實現，因而就接到了將全部的表格組件換成BootstrapTable的需求，纔有了今天的主題：在ABP中封裝BootstrapTable。

3、Bootstrap Table在ABP中的封裝

接到需求，博主各類百度、各類谷歌，都找不到Bootstrap Table組件在ABP中的封裝，有的只是在ABP的項目裏面簡單的用傳統的方式去初始化組件，這並非博主想要的。說到這裏不得不說一下，若是你使用ABP開發的過程當中遇到一些難題，你會發現很難從百度裏面搜索到相關答案，谷歌裏面有時能找到，但大部分都是英文社區，因此若是你英文較弱，在查找資料上面會很吃虧，有時一個簡單的配置問題須要折騰好久。

一、jTable在ABP項目裏面的初始化

首先來看看jTable在通常的ABP項目裏面是如何初始化的。好比咱們在Application裏面有一個以下的接口和實現

 public interface IRequisitionAppService : IApplicationService
    {
        Task<PagedResultDto<RequisitionListDto>> GetRequisitionListAsync(GetRequisitionListInput input);
    }

　　[AbpAuthorize(OrderAppPermissions.Pages_Order_Requisition)]
    public class RequisitionAppService : AbpZeroTemplateAppServiceBase, IRequisitionAppService
    {
        private readonly IRepository<Requisition, long> _requisitionRepository;
        public RequisitionAppService(IRepository<Requisition, long> requisitionRepository)
        {
            _requisitionRepository = requisitionRepository;
        }

　　　　 public async Task<PagedResultDto<RequisitionListDto>> GetRequisitionListAsync(GetRequisitionListInput input)
        {
            var query = _requisitionRepository.GetAll()
                                                    .WhereIf(input.Status != null, w => (int)w.Status == input.Status.Value)
                                                    .WhereIf(
                                                        !input.Filter.IsNullOrWhiteSpace(),
                                                        u =>
                                                            u.No.Contains(input.Filter) ||
                                                            u.Remark.Contains(input.Filter)
                                                    );

            var count = await query.CountAsync();

            var list = await query
            .OrderBy(input.Sorting)
            .PageBy(input)
            .ToListAsync();

            var dtos = list.MapTo<List<RequisitionListDto>>();
            return new PagedResultDto<RequisitionListDto>(
                count,
                dtos
                );
        }


    }

而後咱們前端有一個頁面的列表數據從這個接口GetRequisitionListAsync()獲取

<div class="portlet-body">
    <div id="dataListTable"></div>
</div>

(function () {
    $(function () {
        var _$dataListTable = $('#dataListTable');
        var _service = abp.services.app.requisition;
        _$dataListTable.jtable({
            paging: true,
            sorting: true,
            selecting: true,
            actions: {
                listAction: {
                    method: _service.getRequisitionListAsync
                }
            },
            fields: {
                id: {
                    key: true,
                    list: false
                },
                details: {
                    width: '1%',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (detailData) {
                        var $img = $('<img class="child-opener-image" src="/Common/Images/list_metro.png" title="申購明細" />');
                        $img.click(function () {
                            _$dataListTable.jtable('openChildTable',
                                $img.closest('tr'),
                                {
                                    title: "申購明細",
                                    showCloseButton: true,
                                    actions: {
                                        listAction: {
                                            method: _service.getRequisitionDetailListByIdAsync
                                        }
                                    },
                                    fields: {
                                        materialClassParentNameAndName: {
                                            title: app.localize('MaterialClassName'),
                                            width: '8%'
                                        },
                                        materialInfoTypeNo: {
                                            title: app.localize('TypeNo'),
                                            width: '5%'
                                        },
                                        materialInfoLengthDisplayName: {
                                            title: app.localize('LengthDisplayName'),
                                            width: '3%'
                                        },
                                        materialInfoWeight: {
                                            title: app.localize('Weight'),
                                            width: '5%',
                                            display: function (data) {
                                                return data.record.materialInfoMinWeight + '-' + data.record.materialInfoMaxWeight;
                                            }
                                        },
                                        materialInfoMouldTypeDisplayName: {
                                            title: app.localize('MouldTypeDisplayName'),
                                            width: '6%'
                                        },
                                        materialInfoProductionRemark: {
                                            title: app.localize('ProductionRemark'),
                                            width: '8%'
                                        },
                                        materialInfoBundleCountDisplayName: {
                                            title: app.localize('BundleCountDisplayName'),
                                            width: '3%'
                                        },
                                        materialInfoUnitDisplayName: {
                                            title: app.localize('UnitDisplayName'),
                                            width: '3%'
                                        },
                                        materialInfoProcessCost: {
                                            title: app.localize('ProcessCost'),
                                            width: '6%'
                                        },
                                        materialInfoProductRemark: {
                                            title: app.localize('ProductRemark'),
                                            width: '6%'
                                        },
                                        materialInfoRemark: {
                                            title: app.localize('Remark'),
                                            width: '6%'
                                        },
                                        count: {
                                            title: app.localize('申購數量'),
                                            width: '6%'
                                        },
                                        remark: {
                                            title: app.localize('申購備註'),
                                            width: '6%'
                                        }
                                    }
                                }, function (data) {
                                    data.childTable.jtable('load',
                                        { requisitionId: detailData.record.id }
                                    );
                                });
                        });
                        return $img;
                    }
                },
                no: {
                    title: "申購單號",
                    width: '20%'
                },
                creatorUserName: {
                    title: "申購人",
                    width: '20%'
                },
                creationTime: {
                    title: "申購時間",
                    width: '10%',
                    display: function (data) {
                        return moment(data.record.creationTime).format('YYYY-MM-DD HH:mm:ss');
                    }
                },
                sumCount: {
                    title: "總數",
                    width: '10%'
                },
                status: {
                    title: "狀態",
                    width: '20%',
                    display: function (data) {
                        if (data.record.status === app.order.requisitionAuditStatus.audit)
                            return '<span class="label label-info">' + app.localize('Autdit') + '</span>'
                        else if (data.record.status === app.order.requisitionAuditStatus.auditPass)
                            return '<span class="label label-success">' + app.localize('Pass') + '</span>'
                        else if (data.record.status === app.order.requisitionAuditStatus.auditReject)
                            return '<span class="label label-danger">' + app.localize('Reject') + '</span>'
                        else if (data.record.status === app.order.requisitionAuditStatus.delete)
                            return '<span class="label label-danger">' + app.localize('Abandon') + '</span>'
                        else
                            return '<span class="label label-danger">' + app.localize('Unknown') + '</span>'
                    }
                }
            }

        });
    });
})();

獲得以下效果：

代碼釋疑：

（1） var _service = abp.services.app.requisition; 這一句聲明當前頁面須要使用哪一個服務。

（2） _service.getRequisitionListAsync 這一句對應的是服務調用的方法，你會發如今後臺方法名是GetRequisitionListAsync()，而在js裏面卻變成了getRequisitionListAsync()，咱們暫且稱之爲「潛規則」。

二、bootstrapTable在ABP項目裏面的封裝

經過上述代碼你會發現，ABP在application層裏面定義的方法，最終會生成某一些js對應的function，這裏難點來了。咱們找遍了bootstrapTable組件的api，都沒有經過某一個function去獲取數據的啊。這可如何是好？爲這個問題，博主折騰了兩天。最開始博主想，function最終還不是要換成http請求的，咱們只要拿到http請求的url，而後將function轉換爲url不就好了麼：

咱們使用bootstrapTable組件初始化的時候聲明 {url:'/api/services/app/requisition/GetRequisitionListAsync'} 這樣不就好了麼？呵呵，通過測試，這樣確實能正確取到數據。可是不夠理想，由於這前面的前綴是ABP給咱們生成的，是否會變化咱們尚且不說，給每個url加上這麼一長串着實看着很不爽，因而進一步想，是否咱們的bootstrapTable也可使用function去初始化呢，組件沒有，難道咱們就不能給他擴展一個嗎？咱們不用url獲取數據，經過調用這個function取到數據，而後將數據渲染到組件不就好了。思路有了，那麼這裏有兩個難題：一是如何將原來url的方式變成這裏的調用function的方式呢？二是參數的封裝。通過查看組件的源碼發現，若是是服務端分頁，組件最終是進入到initServer()這個方法去獲取數據，而後渲染到頁面上面的，組件原始的initServer()方法以下：

BootstrapTable.prototype.initServer = function (silent, query) {
        var that = this,
            data = {},
            params = {
                pageSize: this.options.pageSize === this.options.formatAllRows() ?
                    this.options.totalRows : this.options.pageSize,
                pageNumber: this.options.pageNumber,
                searchText: this.searchText,
                sortName: this.options.sortName,
                sortOrder: this.options.sortOrder
            },
            request;

        if (!this.options.url && !this.options.ajax) {
            return;
        }

        if (this.options.queryParamsType === 'limit') {
            params = {
                search: params.searchText,
                sort: params.sortName,
                order: params.sortOrder
            };
            if (this.options.pagination) {
                params.limit = this.options.pageSize === this.options.formatAllRows() ?
                    this.options.totalRows : this.options.pageSize;
                params.offset = this.options.pageSize === this.options.formatAllRows() ?
                    0 : this.options.pageSize * (this.options.pageNumber - 1);
            }
        }

        if (!($.isEmptyObject(this.filterColumnsPartial))) {
            params['filter'] = JSON.stringify(this.filterColumnsPartial, null);
        }

        data = calculateObjectValue(this.options, this.options.queryParams, [params], data);

        $.extend(data, query || {});

        // false to stop request
        if (data === false) {
            return;
        }

        if (!silent) {
            this.$tableLoading.show();
        }
        request = $.extend({}, calculateObjectValue(null, this.options.ajaxOptions), {
            type: this.options.method,
            url: this.options.url,
            data: this.options.contentType === 'application/json' && this.options.method === 'post' ?
                JSON.stringify(data) : data,
            cache: this.options.cache,
            contentType: this.options.contentType,
            dataType: this.options.dataType,
            success: function (res) {
                res = calculateObjectValue(that.options, that.options.responseHandler, [res], res);

                that.load(res);
                that.trigger('load-success', res);
            },
            error: function (res) {
                that.trigger('load-error', res.status, res);
            },
            complete: function () {
                if (!silent) {
                    that.$tableLoading.hide();
                }
            }
        });

        if (this.options.ajax) {
            calculateObjectValue(this, this.options.ajax, [request], null);
        } else {
            $.ajax(request);
        }
    };

組件原始initServer()方法

代碼不難讀懂，解析參數，整合參數，獲得參數，發送ajax請求，在success事件裏面將獲得的數據渲染到界面。讀懂了這段代碼，咱們再來封裝function就容易多了。

最終咱們封裝的代碼以下：

(function ($) {
    'use strict';

    //debugger;
    //經過構造函數獲取到bootstrapTable裏面的初始化方法
    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _initData = BootstrapTable.prototype.initData,
        _initPagination = BootstrapTable.prototype.initPagination,
        _initBody = BootstrapTable.prototype.initBody,
        _initServer = BootstrapTable.prototype.initServer,
        _initContainer = BootstrapTable.prototype.initContainer;

    //重寫
    BootstrapTable.prototype.initData = function () {
        _initData.apply(this, Array.prototype.slice.apply(arguments));
    };

    BootstrapTable.prototype.initPagination = function () {
        _initPagination.apply(this, Array.prototype.slice.apply(arguments));
    };

    BootstrapTable.prototype.initBody = function (fixedScroll) {
        _initBody.apply(this, Array.prototype.slice.apply(arguments));
    };

    BootstrapTable.prototype.initServer = function (silent, query) {
        //構造自定義參數
        for (var key in this.options.methodParams) {
            $.fn.bootstrapTable.defaults.methodParams[key] = this.options.methodParams[key];
        }
        //若是傳了url，則走原來的邏輯
        if (this.options.url) {
            _initServer.apply(this, Array.prototype.slice.apply(arguments));
            return;
        }
        //若是定義了abpMethod，則走abpMethod的邏輯
        if (!this.options.abpMethod) {
            return;
        }
        var that = this,
            data = {},
            params = {
                pageSize: this.options.pageSize === this.options.formatAllRows() ?
                    this.options.totalRows : this.options.pageSize,
                pageNumber: this.options.pageNumber,
                searchText: this.searchText,
                sortName: this.options.sortName,
                sortOrder: this.options.sortOrder
            },
            request;

        
        //debugger;
        if (this.options.queryParamsType === 'limit') {
            params = {
                search: params.searchText,
                sort: params.sortName,
                order: params.sortOrder
            };
            if (this.options.pagination) {
                params.limit = this.options.pageSize === this.options.formatAllRows() ?
                    this.options.totalRows : this.options.pageSize;
                params.offset = this.options.pageSize === this.options.formatAllRows() ?
                    0 : this.options.pageSize * (this.options.pageNumber - 1);
            }
        }

        if (!($.isEmptyObject(this.filterColumnsPartial))) {
            params['filter'] = JSON.stringify(this.filterColumnsPartial, null);
        }

        data = $.fn.bootstrapTable.utils.calculateObjectValue(this.options, this.options.queryParams, [params], data);

        $.extend(data, query || {});

        // false to stop request
        if (data === false) {
            return;
        }

        if (!silent) {
            this.$tableLoading.show();
        }
        
        this.options.abpMethod(data).done(function (result) {
            result = $.fn.bootstrapTable.utils.calculateObjectValue(that.options, that.options.responseHandler, [result], result);
            that.load(result);
            that.trigger('load-success', result);
        });
        request = $.extend({}, $.fn.bootstrapTable.utils.calculateObjectValue(null, this.options.ajaxOptions), {
            type: this.options.method,
            url: this.options.url,
            data: this.options.contentType === 'application/json' && this.options.method === 'post' ?
                JSON.stringify(data) : data,
            cache: this.options.cache,
            contentType: this.options.contentType,
            dataType: this.options.dataType,
            success: function (res) {
                debugger;
                res = $.fn.bootstrapTable.utils.calculateObjectValue(that.options, that.options.responseHandler, [res], res);

                that.load(res);
                that.trigger('load-success', res);
            },
            error: function (res) {
                that.trigger('load-error', res.status, res);
            },
            complete: function () {
                if (!silent) {
                    that.$tableLoading.hide();
                }
            }
        });

        if (this.options.ajax) {
            $.fn.bootstrapTable.utils.calculateObjectValue(this, this.options.ajax, [request], null);
        } else {
            $.ajax(request);
        }
    }

    BootstrapTable.prototype.initContainer = function () {
        _initContainer.apply(this, Array.prototype.slice.apply(arguments));
    };

    abp.bootstrapTableDefaults = {
        striped: false,
        classes: 'table table-striped table-bordered table-advance table-hover',
        pagination: true,
        cache: false,
        sidePagination: 'server',
        uniqueId: 'id',
        showRefresh: false,
        search: false,
        method: 'post',
        //toolbar: '#toolbar',
        pageSize: 10,
        paginationPreText: '上一頁',
        paginationNextText: '下一頁',
        queryParams: function (param) {
            //$.fn.bootstrapTable.defaults.methodParams.propertyIsEnumerable()
            var abpParam = {
                Sorting: param.sort,
                filter: param.search,
                skipCount: param.offset,
                maxResultCount: param.limit
            };
            for (var key in $.fn.bootstrapTable.defaults.methodParams) {
                abpParam[key] = $.fn.bootstrapTable.defaults.methodParams[key];
            }
            return abpParam;
        },
        responseHandler: function (res) {
            if (res.totalCount)
                return { total: res.totalCount, rows: res.items };
            else
                return { total: res.result.totalCount, rows: res.result.items };
        },
        methodParams: {},
        abpMethod: function () { }
    };
    
    $.extend($.fn.bootstrapTable.defaults, abp.bootstrapTableDefaults);
})(jQuery);

代碼釋疑：增長兩個參數 methodParams: {},abpMethod: function () { } 來獲取abp的function和參數，而後獲取數據的時候若是定義了abpMethod，則經過function獲取數據，不然仍是走原來的邏輯。

而後咱們調用就簡單了

 //選取界面上要先數據的表格
        var _$SendOrdersTable = $('#SendOrdersTable');
        //獲取服務層方法
        var _SendOrderService = abp.services.app.sendOrder;

        _$SendOrdersTable.bootstrapTable({
            abpMethod: _SendOrderService.getSendOrderListAsync,
            detailView: true,
            onExpandRow: function (index, row, $detail) {
                var cur_table = $detail.html('<table></table>').find('table');
                $(cur_table).bootstrapTable({
                    showRefresh: false,
                    search: false,
                    pagination: false,
                    abpMethod: _SendOrderService.getSendOrderDetailListAsync,
                    methodParams: { SendOrderId: row.id },
                    columns: [
                        {
                            field: 'materialClassName',
                            title: app.localize('MaterialClassName'),
                            width: '8%'
                        },
                        {
                            field: 'typeNo',
                            title: app.localize('TypeNo'),
                            width: '8%'
                        }
                    ]
                });
            },
            columns: [{
                field: 'no',
                title: app.localize('SendOrderNO'),
                align: 'center'
            },
            {
                field: 'supplierName',
                title: app.localize('SupplierName'),
                align: 'center'
            },
            {
                title: app.localize('SendOrderTime'),
                align: 'center',
                field: 'createdDate',
                formatter: function (data) {
                    return moment(data).format('YYYY-MM-DD HH:mm:ss');
                }
            },

            {
                field: 'status',
                align: 'center',
                title: app.localize('SendOrderStatus'),
                formatter: function (data) {
                    var value = "";
                    if (data == 1) {
                        value = '<span class="label label-info">' + app.localize('Autdit') + '</span>';
                    }
                    else if (data == 2) {
                        value = '<span class="label label-success">' + app.localize('Pass') + '</span>';
                    }
                    else if (data == 3) {
                        value = '<span class="label label-default">' + app.localize('Reject') + '</span>';
                    }
                    else
                        value = '<span class="label label-default">' + app.localize('Abandon') + '</span>';
                    return value;
                }
            },

            {
                field: 'createName',
                align: 'center',
                title: app.localize('SendOrderCreator'),
            },


            {
                field: 'sumCount',
                align: 'center',
                title: app.localize('SendOrderTotalCount'),
            },
            ]
        });

獲得以下效果

4、總結

經過以上一個簡單的封裝，順利將bootstrapTable融入到了ABP的操做方式裏面。是否是很easy！在使用ABP的過程當中，博主還作了其餘一些封裝，之後有機會再來介紹，關於ABP的技術交流歡迎聯繫博主。這一篇就到這裏，歡迎交流。若是你以爲本文可以幫助你，能夠右邊隨意打賞博主，打賞後能夠得到博主永久免費的技術支持。

本文原創出處：http://www.cnblogs.com/landeanfen/

歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利