棋牌网站搭建平台,wordpress 地区联动,上海徽与章网站建设宗旨,oray免费域名注册1. 引言 之前的文章ABP入门系列#xff08;7#xff09;——分页实现讲解了如何进行分页展示#xff0c;但其分页展示仅适用于前台web分页#xff0c;在后台管理系统中并不适用。后台管理系统中的数据展示一般都是使用一些表格插件来完成的。这一节我们就使用BootstrapTab…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 relstylesheet hrefhttp://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 srchttp://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js/script!-- Latest compiled and minified Locales --script srchttp://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js/script }div classrowdiv classpanel-body!-- 过滤框 --div classpanel panel-defaultdiv classpanel-heading查询条件/divdiv classpanel-bodyform idformSearch classform-horizontaldiv classform-group stylemargin-top: 15pxlabel classcontrol-label col-sm-1 fortxt-filter任务名称/labeldiv classcol-sm-3input typetext classform-control idtxt-filter/divlabel classcontrol-label col-sm-1 fortxt-search-status状态/labeldiv classcol-sm-3Html.DropDownList(TaskStateDropdownList, null, new {id txt-search-status, class form-control })/divdiv classcol-sm-4 styletext-align: left;button typebutton stylemargin-left: 50px idbtn-query classbtn btn-primary查询/button/div/div/form/div/div/div!-- bootstrap-tablel指定的工具栏 --div idtoolbar classbtn-groupbutton idbtn-add typebutton classbtn btn-primaryspan classglyphicon glyphicon-plus aria-hiddentrue/span新增/buttonbutton idbtn-edit typebutton classbtn btn-successspan classglyphicon glyphicon-pencil aria-hiddentrue/span修改/buttonbutton idbtn-delete typebutton classbtn btn-dangerspan classglyphicon glyphicon-remove aria-hiddentrue/span删除/button/div!--bootstrap-table表体--table idtb-tasks/table /div!--通过初始加载页面的时候提前将创建任务模态框加载进来-- Html.Partial(_CreateTask)!--编辑任务模态框通过ajax动态填充到此div中-- div idedit /div由于是demo性质我直接使用的CDN来加载bootstrap table相关的cssjs。 其中首先定义了过滤框然后定义了bootstrap table专用的工具栏其会在后续bootstrap table初始化指定。 接着使用table idtb-tasks/table来定义bootstrap-table表体。 3.3. 添加list.js初始化bootstrap table 初始化就是为bootstrap table指定数据来源进行数据绑定、列名定义、排序字段、分页事件绑定等。 我们新建一个list.js来进行初始化 $(function() {//1.初始化Tablevar 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();//初始化TableoTableInit.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就是用来指定请求后台的URLuniqueid用来绑定每一行的唯一标识列一般为主键列columns用来绑定每一列要显示的数据。 针对columns参数其中field必须与你请求返回的json数据的key大小写保持一致title就是显示的列名align指定列的水平对其方式valign指定列的垂直对齐方式formatter用来指定列如何进行格式化输出如操作列中指定formatter: operateFormatter,用来显示统一格式的操作组 //指定操作组function operateFormatter(value, row, index) {return [a classlike hrefjavascript:void(0) titleLike,i classglyphicon glyphicon-heart/i,/a, a classedit hrefjavascript:void(0) titleEdit,i classglyphicon glyphicon-edit/i,/a, a classremove hrefjavascript:void(0) titleRemove,i classglyphicon 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所以重在动手实践。 作者圣杰 链接https://www.jianshu.com/p/8ad141c30235 来源简书 著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。