1.Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到

这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值 
当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了。

$.map(data,function(item,index){return XXX})
使用的总结:把一个数组,按照新的方式进行组装返回,和原来的数组不一样。遍历data数组中的每个元素,并按照return中的计算方式 形成一个新的元素,放入返回的数组中var b = $.map( [55,1,2], function( item,index ){  return { "label": item,"value": index }});alert(b[0].label +"  "+ b[0].value);  输出为  55 0   

2.后台呢,我返回的数据和格式不是按照BootStrap中的格式有点差别吧,反正就是不一样

{"success": true,"message": null,"data": {"pageSize": 15,"rows": [{"userName": "333","userType": 333,"password": "333","id": 11,"indexcode": "333"},{"userName": "3","userType": 333,"password": "333","id": 5,"indexcode": "33333"}.......],"total": 17,"totalPage": 2,"page": 0,"hasPreviousPage": true,"hasNextPage": true,"lastPage": false,"firstPage": false}
}

主要是这里我是用了统一的返回接口 ActionResult,这样比较方便书写格式,统一后端

*** Created by JetWang on 2016/10/1.*/
public class ActionResult {private boolean success;private String message;private Object data;public ActionResult(){}public ActionResult(boolean success){this(success, null, null);}............}

来看看前端的效果吧

前端的页面

<%@ include file="./common/common.jsp"%> //什么公用的bootstrapt ,JQuery啊之类的引用放进去处理了
<script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.js" type="text/javascript"></script>
<script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table-locale-all.js" type="text/javascript">
</script>
<link rel="stylesheet" href="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.css" type="text/css">
//这里就是容器中放置table的
<div class="container"><table id="table"data-url="/cms/UserInfo/userInfoPage">//使用的路径,后台请求的URL</table>
</div>

比较重要的JS代码的说明

jQuery(document).ready(function() {//这里你可以使用各种法师,也可以使用seajs前端模块化工具下面放置我们的js代码就好了
});

下面的配置文件和一些事件的重写呢,你可以查看文档,或者自己去看看你源码 
这里你可以进行重写哦~~ ,extentd进行重新的覆盖!

BootstrapTable.DEFAULTS = {classes: 'table table-hover',locale: undefined,height: undefined,undefinedText: '-',sortName: undefined,sortOrder: 'asc',sortStable: false,striped: false,columns: [[]],data: [],dataField: 'rows',method: 'get',url: undefined,ajax: undefined,cache: true,contentType: 'application/json;charset=UTF-8',//这里我就加了个utf-8dataType: 'json',ajaxOptions: {},queryParams: function (params) {//这个是设置查询时候的参数,我直接在源码中修改过,不喜欢offetset 我后台用的                    是pageNo. 这样处理就比较的满足我的要求,其实也可以在后台改,麻烦!return params;},queryParamsType: 'limit', // undefined (这里是根据不同的参数,选择不同的查询的条件)responseHandler: function (res) {//这里我查看源码的,在ajax请求成功后,发放数据之前可以对返回的数据进行处理,返回什么部分的数据,比如我的就需要进行整改的!return res;},pagination: false,onlyInfoPagination: false,sidePagination: 'client', // client or servertotalRows: 0, // server side need to setpageNumber: 1,pageSize: 10,pageList: [10, 25, 50, 100],paginationHAlign: 'right', //right, leftpaginationVAlign: 'bottom', //bottom, top, bothpaginationDetailHAlign: 'left', //right, leftpaginationPreText: '&lsaquo;',paginationNextText: '&rsaquo;',search: false,searchOnEnterKey: false,strictSearch: false,searchAlign: 'right',selectItemName: 'btSelectItem',showHeader: true,showFooter: false,showColumns: false,showPaginationSwitch: false,//展示页数的选择?showRefresh: false,showToggle: false,buttonsAlign: 'right',smartDisplay: true,escape: false,minimumCountColumns: 1,idField: undefined,uniqueId: undefined,cardView: false,detailView: false,detailFormatter: function (index, row) {return '';},trimOnSearch: true,clickToSelect: false,singleSelect: false,toolbar: undefined,toolbarAlign: 'left',checkboxHeader: true,sortable: true,silentSort: true,maintainSelected: false,searchTimeOut: 500,searchText: '',iconSize: undefined,buttonsClass: 'default',iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)icons: {paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',refresh: 'glyphicon-refresh icon-refresh',toggle: 'glyphicon-list-alt icon-list-alt',columns: 'glyphicon-th icon-th',detailOpen: 'glyphicon-plus icon-plus',detailClose: 'glyphicon-minus icon-minus'},customSearch: $.noop,customSort: $.noop,rowStyle: function (row, index) {return {};},rowAttributes: function (row, index) {return {};},footerStyle: function (row, index) {return {};},onAll: function (name, args) {return false;},onClickCell: function (field, value, row, $element) {return false;},onDblClickCell: function (field, value, row, $element) {return false;},onClickRow: function (item, $element) {return false;},onDblClickRow: function (item, $element) {return false;},onSort: function (name, order) {return false;},onCheck: function (row) {return false;},onUncheck: function (row) {return false;},onCheckAll: function (rows) {return false;},onUncheckAll: function (rows) {return false;},onCheckSome: function (rows) {return false;},onUncheckSome: function (rows) {return false;},onLoadSuccess: function (data) {return false;},onLoadError: function (status) {return false;},onColumnSwitch: function (field, checked) {return false;},onPageChange: function (number, size) {return false;},onSearch: function (text) {return false;},onToggle: function (cardView) {return false;},onPreBody: function (data) {return false;},onPostBody: function () {return false;},onPostHeader: function () {return false;},onExpandRow: function (index, row, $detail) {return false;},onCollapseRow: function (index, row) {return false;},onRefreshOptions: function (options) {return false;},onRefresh: function (params) {return false;},onResetView: function () {return false;}};

function initTable() {$table.bootstrapTable({striped: true,  //表格显示条纹pagination: true, //启动分页pageSize: 15,  //每页显示的记录数pageNumber:1, //当前第几页pageList: [10, 15, 20, 25],  //记录数可选列表search: false,  //是否启用查询showColumns: true,  //显示下拉框勾选要显示的列showRefresh: true,  //显示刷新按钮sidePagination: "server", //表示服务端请求//设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder//设置为limit可以获取limit, offset, search, sort, orderresponseHandler:function(res){//远程数据加载之前,处理程序响应数据格式,对象包含的参数: 我们可以对返回的数据格式进行处理//在ajax后我们可以在这里进行一些事件的处理return res.data;},queryParamsType : "undefined",queryParams: function queryParams(params) {   //设置查询参数var param = {//这里是在ajax发送请求的时候设置一些参数 params有什么东西,自己看看源码就知道了pageNo: params.pageNumber,pageSize: params.pageSize};return param;},onLoadSuccess: function(data){  //加载成功时执行alert("加载成功"+data);},onLoadError: function(){  //加载失败时执行layer.msg("加载数据失败", {time : 1500, icon : 2});},height: getHeight(),columns: [{field: 'state',checkbox: true,align: 'center',valign: 'middle'}, {title: 'ID',field: 'id',align: 'center',valign: 'middle'},{field: 'userName',title: 'UserName',sortable: true,footerFormatter: totalNameFormatter,align: 'center'}, {field: 'userType',title: 'UserType',sortable: true,align: 'center'},{field: 'password',title: 'UserPass',sortable: true,align: 'center'},{field: 'indexcode',title: 'Indexcode',sortable: true,align: 'center'},{field: 'operate',title: 'Item Operate',align: 'center',events: operateEvents,formatter: operateFormatter}]});

上面的 footerFormatter 和 formatter 都是对于当前列的显示进行处理的事件,文档中如下 
formatter: 
The context (this) is the column Object. The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index. 
footerFormatter : 
The context (this) is the column Object. The function, take one parameter: 
data: Array of all the data rows. the function should return a string with the text to show in the footer cell. 
都是对于当前列进行处理显示

如下就是增加了两个按钮在一个单元格中

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

也可以在这里就增加事件的处理

<%--{title: '操作',field: 'id',align: 'center',formatter:function(value,row,index){var e = '<a href="#" mce_href="#" οnclick="edit(\''+ row.id + '\')">编辑</a> ';var d = '<a href="#" mce_href="#" οnclick="del(\''+ row.id +'\')">删除</a> ';return e+d;也可以这样处理事件的}}--%

官方中文档说的处理事件可以像下面这里处理

The cell events listener when you use formatter function, take four parameters: event: the jQuery event. value: the field value. row: the row record data. index: the row index. 
Example code:

{field: 'operate',title: 'Item Operate',align: 'center',events: operateEvents,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="remove" href="javascript:void(0)" title="Remove">','<i class="glyphicon glyphicon-remove"></i>','</a>'].join('');}window.operateEvents = {'click .like': function (e, value, row, index) {alert('You click like action, row: ' + JSON.stringify(row));},'click .remove': function (e, value, row, index) {$table.bootstrapTable('remove', {field: 'id',values: [row.id]});}};

处理系统中存在的事件的处理,文档中有说

$('#table').bootstrapTable({onEventName: function (arg1, arg2, ...) {// ...}
});$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {// ...
});
这个名字文档中很多!
onAll   all.bs.table    name, args  Fires when all events trigger, the parameters contain: name: the event name, args: the event data.

  1. 处理一些方法,比如当前选择了多少行,全选等等
  2. The calling method syntax: $('#table').bootstrapTable('method', parameter);1 当前选择选的框框的id
    getSelections   none    Return selected rows, when no record selected, an empty array will return.2.全选
    getAllSelections    none    Return all selected rows contain search or filter, when no record selected, an empty array will return.$table.on('all.bs.table', function (e, name, args) {console.log(name, args);});
    3.删除 前台的数据,不需要从后台重新加载
    remove  params  Remove data from table, the params contains two properties:
    field: the field name of remove rows.
    values: the array of values for rows which should be removed.
    .....很多很多的东西!

    一个删除的按钮,删除所有的选择的事件!是不是很好呢!

  3. function getIdSelections() {return $.map($table.bootstrapTable('getSelections'), function (row) {return row.id});}$remove.click(function () {var ids = getIdSelections();$table.bootstrapTable('remove', {field: 'id',values: ids});$remove.prop('disabled', true);});

转载于:https://www.cnblogs.com/telwanggs/p/8665623.html

Bootstrap Table的使用小结相关推荐

  1. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  2. 一、bootstrap table 初体验

    http://blog.csdn.net/yin767833376/article/details/52153487 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法 ...

  3. ABP+AdminLTE+Bootstrap Table权限管理系统一期

      初衷    学而时习之,不亦说乎,温顾温知新,可以为师矣.           看懂远不如动手去做,动手做才能发现很多自己不懂的问题,不断的反思和总结,"乐于分享是一种境界的突破&quo ...

  4. bootstraptable 汇总_JS组件系列——表格组件神器:bootstrap table

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  5. Bootstrap table表格

    Bootstrap table 使用类 Class="table" 既可让table美化样式 table 相关的Class 隔行换色      :   table-striped ...

  6. vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题

    在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2 ...

  7. bootstrap Table API和一些简单使用方法

    官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...

  8. php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】

    本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...

  9. bootstrap table 表头与内容不对齐问题解决

    bootstrap table 表头与内容不对齐问题解决 参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...

最新文章

  1. SDUT OJ 数据结构实验之排序一:一趟快排
  2. 互联网的双刃剑效应与视频监控的信息安全
  3. Email 之父去世:他让邮件有了 @
  4. Centos下 ffmpeg 和opencv一起配合处理视频
  5. 智能循迹小车_智能机器人之循迹小车——循迹原理
  6. 如何在Java应用里集成Spark MLlib训练好的模型做预测
  7. er图转为数据流程图_「数据架构」实体关系模型介绍
  8. 使用Java VisualVM分析您的应用程序
  9. 数学思想 —— 简化问题
  10. C语言:用条件运算符的嵌套完成此题。学习成绩=90分的学生用A表示,70-89的学生用B表示,60-79的学生用表示,低于60分的学生用D表示
  11. Sql Server2005安装图解
  12. Voxengo音频插件合集:Voxengo Total Bundle for Mac
  13. RabbitMQ 实现RPC
  14. 批处理调用devcon确保虚拟驱动设备只存在安装一次
  15. 【新知实验室 腾讯云TRTC实时音视频体验】
  16. 原始套接字 发送 TCP SYN 包
  17. 【UE5】使用快捷键切换编辑器中英文设置
  18. ArcGIS面矢量挖洞
  19. android发布市场,TWS耳机集中发布,安卓阵营搅动市场
  20. 基于FFmpeg的视频播放器之十一:倍速播放

热门文章

  1. python数据可视化代码_Python实现简单的数据可视化
  2. JDK1.8 IdentityHashMap
  3. (41)VHDL实现移位寄存器(方法3)
  4. (07)FPGA基本组成单元
  5. (06)System Verilog 数组类型示例
  6. (17)FPGA面试题永久防止亚稳态发生
  7. (25)二分频verilog与VHDL编码(学无止境)
  8. java main传入参数_Main方法中传入参数
  9. java性能最好的mvc框架_详解Spring MVC的异步模式(高性能的关键)
  10. 实验大作业c语言实现简单ftp,C 语言实现 FTP 服务器