Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据,但是我只需要id这一个 值,这个时候进行操作就非常的简单了。
rush:js;">
var b = $.map( [55,1,2],function( item,index )
{
return {
"label": item,"value": index
}
});
alert(b[0].label +" "+ b[0].value);
rush:js;">
**
* 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);
}
............
}
rush:js;">
<%@ include file="./common/common.jsp"%> //什么公用的bootstrapt ,JQuery啊之类的引用放进去处理了
dist/bootstrap-table.css" type="text/css">
//这里就是容器中放置table的
后台请求的URL
比较重要的JS代码 的说明
rush:js;">
jQuery(document).ready(function() {
//这里你可以使用各种法师,也可以使用seajs前端模块化工具
下面放置我们的js
代码 就好了
});
下面的配置文件 和一些事件的重写呢,你可以查看文档,或者自己去看看你源码
这里你可以进行重写哦~~ ,extentd进行重新的覆盖!
rush:js;">
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-8
dataType: 'json',ajaxOptions: {},queryP
ara ms: function (p
ara ms) {//这个是设置
查询 时候的参数,我直接在源码中
修改 过,不喜欢offetset 我
后台 用的 是pageNo. 这样处理就比较的满足我的要求,其实也可以在
后台 改,麻烦!
return p
ara ms;
},queryP
ara msType: 'limit',// undefined (这里是根据不同的参数,选择不同的
查询 的条件)
responseHandler: function (res) {//这里我查看源码的,在ajax请求成功后,发放数据之前可以对返回的数据进行处理,返回什么部分的数据,比如我的就需要进行整改的!
return res;
},pagination: false,onlyInfoPagination: false,sidePagination: 'client',// client or server
totalRows: 0,// server side need to set
pageNumber: 1,pageSize: 10,
Pagelist : [10,25,50,100],paginationHAlign: 'right',//right,left
paginationVAlign: 'b
ott om',//b
ott om,top,both
paginationDetailHAlign: 'left',left
paginationPreText: '‹',paginationNextText: '›',search: false,searchOnEnterKey: false,strictSearch: false,searchAlign: 'right',selectItemName: 'btSelectItem',showHeader: true,showFooter: false,showColumns: false,showPaginationSwitch: false,//展示页数的选择?
showRefresh: false,showToggle: false,buttonsAlign: 'right',smart
dis play: 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,toolb
ara lign: 'left',check
Box Header: true,sortable: true,silentSort: true,maintainSelected: false,searchTimeOut: 500,searchText: '',iconSize: undefined,buttonsClass: 'default',ico
nspr efix: '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,footerStyle: function (row,onAll: function (name,args) {
return false;
},onClickCell: function (field,value,row,$element) {
return false;
},onDblClickCell: function (field,onClickRow: function (item,onDblClickRow: function (item,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,$detail) {
return false;
},onCollapseRow: function (index,row) {
return false;
},onRefreshOptions: function (options) {
return false;
},onRefresh: function (p
ara ms) {
return false;
},onResetView: function () {
return false;
}
};
看看上面的自己也基本上晓得怎么去,书写了!其实之前我根本不敢这么玩,只不过之前实习过程中导师教过我怎么去玩,所以我才敢,我相信,我可以好好的 玩好这些东西的!
rush:js;">
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,order
responseHandler:function(res){
//远程数据加载之前,处理程序响应数据格式,对象包含的参数: 我们可以对返回的数据格式进行处理
//在ajax后我们可以
在这里 进行一些事件的处理
return res.data;
},queryP
ara msType : "undefined",queryP
ara ms: function queryP
ara ms(p
ara ms) { //设置
查询 参数
var p
ara m = {
//这里是在ajax发送请求的时候设置一些参数 p
ara ms有什么东西,自己看看源码就知道了
pageNo: p
ara ms.pageNumber,pageSize: p
ara ms.pageSize
};
return p
ara m;
},onLoadSuccess: function(data){ //加载成功时执行
alert("加载成功"+data);
},onLoadError: function(){ //加载失败时执行
layer.msg("加载数据失败",{time : 1500,icon : 2});
},height: getHeight(),columns: [
{
field: 'state',check
Box : true,align: 'center',valign: 'middle'
},{
title: 'ID',field: 'id',{
field: 'userName',title: 'UserName',footerFormatter: totalNameFormatter,align: 'center'
},{
field: 'userType',title: 'UserType',{
field: 'password',title: 'UserPass',{
field: 'indexcode',title: 'Indexcode',{
field: 'operate',title: 'Item Operate',events: operateEvents,formatter: operateFormatter
}
]
});
上面的 footerFormatter 和 formatter 都是对于当前列的显示 进行处理的事件,文档中如下
formatter:
rush:js;">
The context (this) is the column Object. The cell formatter function,take three p
ara meters: 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 p
ara meter:
data: Array of all the data rows. the function should return a string with the text to show in the footer cell.
都是对于当前列进行处理显示
如下就是增加 了两个按钮在一个 单元格中
rush:js;">
function operateFormatter(value,index) {
return [
'
',' ','
',' '
].join('');
}
也可以在这里 就增加 事件的处理
官方中文 档说的处理事件可以像下面这里处理
The cell events listener when you use formatter function,take four para meters: event: the jQuery event. value: the field value. row: the row record data. index: the row index.
Example code:
rush:js;">
{
field: 'operate',formatter: operateFormatter
}
function operateFormatter(value,''
].join('');
}
window.operateEvents = {
'click .like': function (e,index) {
alert('You click like action,row: ' + JSON.stringify(row));
},'click .remove': function (e,index) {
$table.bootstrapTable('remove',{
field: 'id',values: [row.id]
});
}
};
处理系统中存在的事件的处理,文档中有说
rush:js;">
$('#table').bootstrapTable({
onEventName: function (arg1,arg2,...) {
// ...
}
});
$('#table').on('event-name.bs.table',function (e,arg1,...) {
// ...
});
这个名字文档中很多!
rush:js;">
onAll all.bs.table
name,args
Fires when all events trigger,the p
ara meters contain:
name: the event name,args: the event data.
处理一些方法 ,比如当前选择了多少行,全选等等
rush:js;">
The calling method
Syntax : $('#table').bootstrapTable('method',p
ara meter);
1 当前选择选的框框的id
rush:js;">
getSelections none Return selected rows,when no record selected,an empty array will return.
2.全选
rush:js;">
getAllSelections none Return all selected rows contain search or filter,an empty array will return.
$table.on('all.bs.table',name,args) {
console.log(name,args);
});
3.删除 前台 的数据,不需要从后台 重新加载
rush:js;">
remove p
ara ms Remove data from table,the p
ara ms contains two properties:
field: the field name of remove rows.
values: the array of values for rows which should be removed.
.....很多很多的东西!
一个 删除 的按钮,删除 所有的选择的事件!是不是很好呢!
rush:js;">
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'),function (row) {
return row.id
});
}
$remove.click(function () {
var ids = getIdSelections();
$table.bootstrapTable('remove',values: ids
});
$remove.prop('
dis abled',true);
});
以上所述是小编给大家介绍的Bootstrap Table的使用总结。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享 给好友!感谢支持 。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。