ABP入门系列应用BootstrapTable表格插件

ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。

ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板。

ABP的官方网站 : http://www.aspnetboilerplate.com

ABP在Github上的开源项目:https://github.com/aspnetboilerplate

1. 引言

之前的文章ABP入门系列之分页功能的实现讲解了如何进行分页展示,但其分页展示仅适用于前台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入门系列之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" rel="external nofollow" >
@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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Like">',
 '<i class="glyphicon glyphicon-heart"></i>',
 '</a>',
 ' <a class="edit" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Edit">',
 '<i class="glyphicon glyphicon-edit"></i>',
 '</a>',
 ' <a class="remove" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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参数的配置和几个注意事项。其中有很多功能并未讲到,具体请自行查询文档。

(0)

相关推荐

  • bootstrap Table插件使用demo

    最近研究bootstrap,它仅提供视觉效果,对于数据列表之类的并未涉及,网上找了一下,找到一个Table插件. 名为bootstrapTable. 官方地址:http://bootstrap-table.wenzhixin.net.cn/examples/ github:https://github.com/wenzhixin/bootstrap-table 因为英文差,研究了半天,做了一个demo,将就看 HTML: <table class="table" id="

  • 使用bootstraptable插件实现表格记录的查询、分页、排序操作

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行.移动列位置等一些特殊的功能,插件可

  • 值得分享的轻量级Bootstrap Table表格插件

    基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JS

  • bootstrap table插件的分页与checkbox使用详解

    今天需要实现这样一个功能,有checkbox列表可供选择,要选择不分页之间的行并保存 最终实现的功能如图:(图片来自网上) 具体实现 首先,来看具体的代码,这里只截取实现功能所需代码 var selectionIds =[],selectionNames=[]; var curd = { init:function(){ this._getCheckParam(); }, /** * 初始化 * @private */ /** * 表格操作 */ //表格分页之前处理多选框数据 _respons

  • BootStrap中Table分页插件使用详解

    分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • 使用contextMenu插件实现Bootstrap table弹出右键菜单

    如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中,其中"开发高效,设备兼容"的特点表现得非常明显.再加上它默认的美观的UI组件,简直就是很多前端的大爱啊!!! 今天在这里跟大家分享Bootstrap table弹出右键菜单的实现方法. 最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstra

  • bootstrap table表格插件使用详解

    bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, paginationLoop: false, classes: 'table tabl

  • ABP入门系列应用BootstrapTable表格插件

    ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站 : http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate 1. 引言 之前的文章ABP入门系列之分页

  • ABP入门系列之Json格式化

    讲完了分页功能,这一节我们先不急着实现新的功能.来简要介绍下Abp中Json的用法.为什么要在这一节讲呢?当然是做铺垫啊,后面的系列文章会经常和Json这个东西打交道. 一.Json是干什么的 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成.JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)

  • ABP入门系列之分页功能的实现

    完成了任务清单的增删改查,咱们来讲一讲必不可少的的分页功能. 首先很庆幸ABP已经帮我们封装了分页实现,实在是贴心啊. 来来来,这一节咱们就来捋一捋如何使用ABP的进行分页吧. 1. 分页请求DTO定义 数据传输对象(Data Transfer Objects)用于应用层和展现层的数据传输. 展现层传入数据传输对象(DTO)调用一个应用服务方法,接着应用服务通过领域对象执行一些特定的业务逻辑并且返回DTO给展现层.这样展现层和领域层被完全分离开了.在具有良好分层的应用程序中,展现层不会直接使用领

  • BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl

  • ABP(现代ASP.NET样板开发框架)系列之二、ABP入门教程详解

    ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate ABP 的由来 "DRY--避免重复

  • 在ABP框架中使用BootstrapTable组件的方法

    一.关于ABP ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称,它是一个成熟的开源框架,基于DDD+Repository模式,自带Zero权限和认证模块,避免了从零开始搭建框架的烦恼.关于ABP的框架优势就此打住,因为这样说下去要说三天三夜,脱离文本主题. 关于ABP的入门,博主不想说太多,园子里面tkb至简和阳光铭睿有很多入门级的文章,有兴趣的可以了解下,还是给出它的官网和开源地址. ABP官方网站:http://www.aspn

  • D3.js进阶系列之CSV表格文件的读取详解

    前言 之前在入门系列的教程中,我们常用 d3.json() 函数来读取 json 格式的文件.json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件,因为简单易懂,容易编辑. Microsoft Excel 通常会保存为 xls 格式, OpenOffice Calc 通常会保存为 ods 格式.这些格式作为表格文件来说都很强大,但要读取它们是有些麻烦的,D3 中也没有提供这样的方法.但是表格软

随机推荐