ABP入门系列（14）——应用BootstrapTable表格插

作者: 圣杰 | 来源:发表于2017-03-15 16:25 被阅读5228次

ABP入门系列目录——学习Abp框架之实操演练
 源码路径：Github-LearningMpaAbp

1. 引言

之前的文章ABP入门系列（7）——分页实现讲解了如何进行分页展示，但其分页展示仅适用于前台web分页，在后台管理系统中并不适用。后台管理系统中的数据展示一般都是使用一些表格插件来完成的。这一节我们就使用BootstrapTable进行举例说明。

最终效果图

2. BootstrapTable

基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

Bootstrap table是一个开源的轻量级功能非常丰富的前端表格插件。从命名来看就知道该表格样式由Bootstrap接手了，我们就不必纠结于样式的调整了。想对其有详细了解，可参考官方文档。

废话不多说，下面我们就直接上手演练。

3. 实操演练

因为使用BootstrapTable进行分页，主要的难点在插件的配置上，所以这一次我们直接对主要代码进行讲解，源码请自行前往Github上查看。

3.1. 添加BackendTasksController控制器

控制器中主要定义了列表、创建、编辑相关Action。其中最重要的方法是进行数据绑定的Aciton GetAllTasks，代码如下：

[DontWrapResult] 
public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status) {
    var sort = !string.IsNullOrEmpty(sortfiled) ? string.Format("{0} {1}", sortfiled, sortway) : "";
    TaskState currentState;
    if (!string.IsNullOrEmpty(status)) Enum.TryParse(status, true, out currentState);

    var filter = new GetTasksInput {
        SkipCount = offset,
        MaxResultCount = limit,
        Sorting = sort,
        Filter = search
    };

    if (!string.IsNullOrEmpty(status)) if (Enum.TryParse(status, true, out currentState)) filter.State = currentState;

    var pagedTasks = _taskAppService.GetPagedTasks(filter);

    return Json(new {
        total = pagedTasks.TotalCount,
        rows = pagedTasks.Items
    },
    JsonRequestBehavior.AllowGet);
}

下面来一一讲解下参数：

limit：分页参数，指定每页最多显示多少行；
offset：分页参数，指定偏移量；
sortField：排序参数，排序字段；
sortWay：排序参数，排序方式（升序or降序）；
search：过滤参数，指定过滤的任务名称；
status：过滤参数，指定过滤的任务状态

这里面要注意的是参数的命名和顺序必须和前端传参保持一致
细心的你可能发现Action使用了[DontWrapResult]特性进行修饰，这样返回的json结果就不会被Abp提供的AbpJsonResult包裹，了解AbpJsonResult可参考ABP入门系列（8）——Json格式化。

3.2. 添加List.cshtml进行列表展示

List.cshtml中主要的代码为：

@using Abp.Web.Mvc.Extensions
@{
    ViewBag.Title = L("BackendTaskList");
    ViewBag.ActiveMenu = "BackendTaskList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item
}

<!-- 加载bootstrap-tablel的样式 -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
@section scripts{
    @Html.IncludeScript("~/Views/backendtasks/list.js");
    <!-- 加载bootstrap-tablel的script脚本 -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>

    <!-- Latest compiled and minified Locales -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
}

<div class="row">
    <div class="panel-body">
        <!-- 过滤框 -->
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top: 15px">
                        <label class="control-label col-sm-1" for="txt-filter">任务名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt-filter">
                        </div>

                        <label class="control-label col-sm-1" for="txt-search-status">状态</label>
                        <div class="col-sm-3">
                            @Html.DropDownList("TaskStateDropdownList", null, new {id = "txt-search-status", @class = "form-control "})
                        </div>
                        <div class="col-sm-4" style="text-align: left;">
                            <button type="button" style="margin-left: 50px" id="btn-query" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- bootstrap-tablel指定的工具栏 -->
    <div id="toolbar" class="btn-group">
        <button id="btn-add" type="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn-edit" type="button" class="btn btn-success">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn-delete" type="button" class="btn btn-danger">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>

    <!--bootstrap-table表体-->
    <table id="tb-tasks"></table>
</div>

<!--通过初始加载页面的时候提前将创建任务模态框加载进来-->
@Html.Partial("_CreateTask")

<!--编辑任务模态框通过ajax动态填充到此div中-->
<div id="edit">
</div>

由于是demo性质，我直接使用的CDN来加载bootstrap table相关的css，js。
其中首先定义了过滤框，然后定义了bootstrap table专用的工具栏，其会在后续bootstrap table初始化指定。
接着使用<table id="tb-tasks"></table>来定义bootstrap-table表体。

3.3. 添加list.js初始化bootstrap table

初始化就是为bootstrap table指定数据来源进行数据绑定、列名定义、排序字段、分页，事件绑定等。
我们新建一个list.js来进行初始化：

$(function() {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();

});

var taskService = abp.services.app.task;
var $table = $('#tb-tasks');
var TableInit = function() {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function() {
        $table.bootstrapTable({
            url: '/BackendTasks/GetAllTasks', //请求后台的URL（*）
            method: 'get', //请求方式（*）
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            queryParams: oTableInit.queryParams, //传递参数（*）
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 5, //每页的记录行数（*）
            pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true, //是否显示所有的列
            showRefresh: true, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "Id", //每一行的唯一标识，一般为主键列
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            columns: [
                {
                    radio: true
                }, {
                    field: 'Title',
                    title: '任务名称',
                    sortable: true
                }, {
                    field: 'Description',
                    title: '任务描述'
                }, {
                    field: 'AssignedPersonName',
                    title: '任务分配'
                }, {
                    field: 'State',
                    title: '任务状态',
                    formatter: showState
                }, {
                    field: 'CreationTime',
                    title: '创建日期',
                    formatter: showDate
                }, {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    clickToSelect: false,
                    formatter: operateFormatter,
                    events: operateEvents
                }
            ]
        });
    };

这段JS中bootstrap table初始化配置的参数说明已经在代码中进行了注释。
下面对几个重要的参数进行讲解：

3.3.1. queryParams查询参数

初始化的时候我们指定了查询参数为：
queryParams: oTableInit.queryParams, //传递参数（*）
其中queryParams函数定义如下：

//指定bootstrap-table查询参数
oTableInit.queryParams = function(params) {
    var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        limit: params.limit,
        //页面大小
        offset: params.offset,
        //页码
        sortfiled: params.sort,
        //排序字段
        sortway: params.order,
        //升序降序
        search: $("#txt-filter").val(),
        //自定义传参-任务名称
        status: $("#txt-search-status").val() //自定义传参-任务状态
    };
    return temp;
};

和控制器中的Action的函数命名进行比较public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status)，其中参数命名的大小写以及顺序与js中定义的查询参数保持一致，这也是必须要注意的一点。

3.3.2. 数据绑定

数据绑定包括以下三个部分：

url：就是用来指定请求后台的URL；
uniqueid：用来绑定每一行的唯一标识列，一般为主键列
columns：用来绑定每一列要显示的数据。

针对columns参数，其中field必须与你请求返回的json数据的key大小写保持一致；
title就是显示的列名；
align指定列的水平对其方式；
valign指定列的垂直对齐方式；
formatter用来指定列如何进行格式化输出，如操作列中指定formatter: operateFormatter,用来显示统一格式的操作组；

//指定操作组
    function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="glyphicon glyphicon-heart"></i>',
            '</a>',
            ' <a class="edit" href="javascript:void(0)" title="Edit">',
            '<i class="glyphicon glyphicon-edit"></i>',
            '</a>',
            ' <a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }

events用来指定列的事件，比如操作列中指定events: operateEvents来指定每个操作对应的事件处理：

    //指定table表体操作事件
    window.operateEvents = {
        'click .like': function(e, value, row, index) {
            alert('You click like icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .edit': function(e, value, row, index) {
            editTask(row.Id);
        },
        'click .remove': function(e, value, row, index) {
            deleteTask(row.Id);
        }
    };

3.3.3. 工具栏事件绑定

工具栏是我们在List.cshtml定义的新增、编辑、删除三个按钮，表格初始化时，直接为toolbar参数指定工具栏对应的id即可，如本例toolba: '#toolbar'。那工具栏按钮的事件在哪绑定呢？直接上代码吧：

//bootstrap-table工具栏按钮事件初始化
var ButtonInit = function() {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function() {
        //初始化页面上面的按钮事件
        $("#btn-add")
            .click(function() {
                $("#add").modal("show");
            });

        $("#btn-edit")
            .click(function() {
                var selectedRaido = $table.bootstrapTable('getSelections');
                if (selectedRaido.length === 0) {
                    abp.notify.warn("请先选择要编辑的行！");
                } else {
                    editTask(selectedRaido[0].Id);
                }
            });

        $("#btn-delete")
            .click(function() {
                var selectedRaido = $table.bootstrapTable('getSelections');
                if (selectedRaido.length === 0) {
                    abp.notify.warn("请先选择要删除的行！");
                } else {
                    deleteTask(selectedRaido[0].Id);
                }
            });

        $("#btn-query")
            .click(function() {
                $table.bootstrapTable('refresh');
            });
    };
    return oInit;
};

该方法会在页面加载初被调用：
var oButtonInit = new ButtonInit(); oButtonInit.Init();

另外函数中使用了bootstrap table预置的2个比较实用的函数：

$table.bootstrapTable('getSelections')：获取表格选择项
$table.bootstrapTable('refresh')：刷新表格

4. 总结

本文主要讲解了如何使用bootstrap table进行后台分页的一般用法，讲解了bootstrap table参数的配置和几个注意事项。其中有很多功能并未讲到，具体请自行查询文档。
前端的插件用法，看似复杂，实则动手操作也还ok，所以重在动手实践。

ABP入门系列（14）——应用BootstrapTable表格插

1. 引言

2. BootstrapTable

3. 实操演练

3.1. 添加BackendTasksController控制器

3.2. 添加List.cshtml进行列表展示

3.3. 添加list.js初始化bootstrap table

3.3.1. queryParams查询参数

3.3.2. 数据绑定

3.3.3. 工具栏事件绑定

4. 总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

python

ABP

程序员

.NET