bootstrapTable 学习使用
<input type="button" id="btn_searcher" value="查询" class="btn btn-primary"></input>
<input type="reset" id="btn_reset" class="btn btn-reset"></input>
#1.初始化列表
$(function() {
$('#redeploymentTable')
.bootstrapTable(
{
url : 'redeploymentList.json', //请求后台的URL（*）
method : 'post', //请求方式（*）
dataType:'json',
contentType : "application/x-www-form-urlencoded",
toolbar : '#toolbar', //工具按钮用哪个容器
// undefinedText: "", //当数据为 undefined 时显示的字符
striped : true, //是否显示行间隔色
cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination : true, //是否显示分页（*）
pageSize : 5, //每页显示的记录数
pageNumber : 1, //当前第几页
pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表
sortable : false, //是否启用排序
sortOrder : "asc", //排序方式
sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
//查询参数,每次调用是会带上这个参数，可自定义
queryParams : queryParams,
// search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
// strictSearch: true,
// showColumns: true, //是否显示所有的列
// showRefresh: true, //是否显示刷新按钮
minimumCountColumns : 2, //最少允许的列数
responseHandler : responseHandler,
clickToSelect : true, //是否启用点击选中行
// height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId : "id", //每一行的唯一标识，一般为主键列
// showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
detailView : false, //是否显示父子表
columns : [
{
checkbox : true
},
{
field : "contract",
title : "合同名称",
align : 'center'
},
{
field : "company",
title : "用户单位名称",
align : 'center'
},
{
field : "website",
title : "网站/系统名称",
align : 'center'
},
{
field : "technologyName",
title : "技术联系人姓名",
align : 'center'
},
{
field : "technologyPhone",
title : "技术联系人电话",
align : 'center'
},
{
field : "sdeployDate",
title : "变更部署时间",
align : 'center'
},
{
field : "content",
title : "变更服务内容",
align : 'center'
},
{
title : '操作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {
var id = row.id;
var e;
e = '<a href ="#" title="修改"><span class="fa fa-wrench" onclick="edit(\''
+ id
+ '\')"></span></a> '
+ '<a href ="#" title="删除"><span class="fa fa-times" onclick="dele(\''
+ id + '\')"></span></a> ';
return e;
},
} ]
}); }); #2.设置查询条件，把分页，查询条件，排序等信息拼接成一个models字符串对象传递至后台
function queryParams(params) {
var searchTerm = $("#formSearch").serializeObject();
var str = {
"page" : this.pageNumber,
"pageSize" : this.pageSize,
"filter" : {
"filters" : [ {
"field" : "company",
"value" : searchTerm.company
}, {
"field" : "contract",
"value" : searchTerm.contract
}, {
"field" : "content",
"value" : searchTerm.content
}, {
"field" : "sdeployDate",
"value" : searchTerm.sdeployDate
} ]
}
};
var baseData = JSON.stringify(str);
var param = {
models : baseData
}
return param;
}
//查询
$("#btn_searcher").click(function() {
searchFuntable();
});
function searchFuntable() {
var opt = {
url : 'redeploymentList.json'
}
$('#redeploymentTable').bootstrapTable('refresh', opt);
};
#3.返回查询列表数据
function responseHandler(res) {
if (res) {
return {
"rows" : res.list,
"total" : res.total
};
} else {
return {
"rows" : [],
"total" : 0
};
}
}
#4.行修改、删除
//编辑
function edit(id) {
$('#myModal').load('redeploymentEdit?id=' + id);
} //批量删除
$('#remove').click(function() {
deleteReployDate();
});
function deleteReployDate() {
//获取行id
var rows = $('#redeploymentTable').bootstrapTable('getSelections');
var ids = "";
for (var i = 0; i < rows.length; i++) {
ids += rows[i]['id'] + ",";
}
ids = ids.substring(0, ids.length - 1);
//alert(ids+"-----ids-------");
if (rows.length > 0) {
layer.confirm('您确认删除选中记录？', {
btn : [ '删除' ]
//按钮
}, function() {
delcfm(ids)
});
} else {
layer.msg("请选择删除项", {
icon : 2
});
return;
}
} //删除-单条
function dele(id) {
layer.confirm('您确认删除选中记录？', {
btn : [ '删除' ]
//按钮
}, function() {
delcfm(id);
});
}
//删除
function delcfm(ids) {
$.ajax({
url : 'redeploymentDelete.json',
data : 'ids=' + ids,
type : 'post',
success : function(data, textStatus, jqXHR) {
layer.msg('删除成功', {
icon : 1
});
$('#redeploymentTable').bootstrapTable('refresh');
},
error : function(jqXHR, textStatus, errorThrown) {
layer.msg(textStatus, {
icon : 2
});
}
});
}
----------------------------------------
1.其他方法备注:
$('#tableId').bootstrapTable('destroy');//刷新必须要添加这个销毁，否则新增、修改、查看数据可能加载出现问题。
var str =$("#tableId").bootstrapTable('getData');//获取表格的所有内容行
$('#tableId').bootstrapTable('refresh'); //重置后刷新
var rows = $('#tableId').bootstrapTable('getSelections');//获取选中行数据 $('#adjustedOAId').selectpicker('val', ''); //bootstrap 多选下拉框置空 selectpicker
$("#adjustedOAId").empty();//bootstrap 多选下拉框置空 selectpicker
$('#tableId').bootstrapTable('hideColumn', 'Id'); //隐藏Id列 2.获取单元格内容(操作)
formatter : function(value, row, index) {
var id = row.batchId;
var e;
e ='<a href ="#" title="同意" class="taskagent_agreen"><span onclick="agree(\''+id+ '\',\''+index+ '\')">同意</span></a> '
+ '<a href ="#" title="拒绝" class="taskagent_reject"><span onclick="reject(\''+id+ '\',\''+index+ '\')">拒绝</span></a> ';
return e;
},
function agree(id,index){
//获取index下的意见信息
var yj=$("#taskTableId tr[data-index='"+index+"']").find("td a[data-name='content']").html();
/*if( yj=="" || yj=="undefined" || yj==" "){
alert("请先填写审批意见！");
return;
} */
// layer.msg("请稍等...", {icon: 6,time: 3000});
$.ajax({
type:'post',
url:'taskAgentsController/processPass.json',
data:{"id":id,"yj":yj},
success : function(result) {
layer.msg(result.ajaxResultJson.msg, {icon: 6,time: 3000});
$("#taskTableId").bootstrapTable('refresh');
},
error : function( e){
alert("系统异常！");
}
});
}
相关链接 : http://blog.csdn.net/rickiyeat/article/details/56483577
BootstrapValidator详细教程: https://blog.csdn.net/u013938465/article/details/53507109
bootstrapTable 学习使用的更多相关文章
- bootstrap-table学习
参考学习 http://bootstrap-table.wenzhixin.net.cn/getting-started/ 包括Bootstrap库(如果你的项目没有使用它)和bootstrap-t ...
- bootstraptable学习(2)分页
1.分页需要配置一些参数 function init() { $('#bootstrapModel').bootstrapTable({ url: "../Listing.ashx" ...
- bootstraptable学习(1)数据展示
最近工作用到bootstraptable,并且一些功能需要很了解这个插件,那么我们便来看看这个东西 1.css与js的引入,顺序肯定是有讲究的,在这里不细说了 2.数据的引入与呈现,我们来看一下官网的 ...
- Bootstrap-table学习笔记
| 引入CSS文件 <link rel="stylesheet" href="bootstrap.min.css"> <link rel=&q ...
- Bootstrap-table学习笔记（二）——前后端分页模糊查询
在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1,前端分页 2,后端分页 3,模糊查询 前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. ...
- Bootstrap-table学习笔记（一）
第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题. =================== | 引入CSS文件 <link rel="styleshe ...
- Vue2学习结合bootstrapTable遇到的问题
Vue2学习 项目中在使用bootstrapTable的时候,在table里面会有操作结合vue使用过程中点击相应的操作不会起作用 解决办法 1.把事件绑定到父元素上即可,但要判断什么样的需要点击,用 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（二）
前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...
随机推荐
- 雷林鹏分享：C# 可空类型（Nullable）
C# 可空类型(Nullable) C# 可空类型(Nullable) C# 提供了一个特殊的数据类型,nullable 类型(可空类型),可空类型可以表示其基础值类型正常范围内的值,再加上一个 nu ...
- javascript获取id元素
function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法.... function $(id){ return doc ...
- 常用音频协议介绍&&有关音频编码的知识与技术参数
(转载)常用音频协议介绍 会议电视常用音频协议介绍及对比白皮书 一.数字化音频原理:声音其实是一种能量波,因此也有频率和振幅的特征,频率对应于时间轴线,振幅对应于电平轴线.通常人耳可以听到的频率在20 ...
- 使用VisualStudio进行脚本|样式文件压缩
在vs的Optimization中有个Bundle是专门用来压缩样式和脚本文件 .他有两个继承:StyleBundle.ScriptBundle,从名字上就可看出,StyleBundle专门压缩样式文 ...
- ssd制作数据和训练
1.在/data/VOCdevkit下建立自己的数据集名称如MyDataSet,在MyDataSet目录下需包含Annotations.ImageSets.JPEGImages三个文件夹: 2.Ima ...
- Vue.js总结 [2017.6.5]
<head> <script src="https://unpkg.com/vue/dist/vue.js"></script> </he ...
- python面向对象之 类
内容梗概: 1. 类的成员 2. 类的成员-变量 3. 类的成员-方法 4. 类的成员-属性 5. 私有 1.类的成员class 类名: 方法 def __init__(self, 参数1, 参数2. ...
- 『OpenCV3』Mat简介
Mat属性方法介绍:OpenCV2:Mat属性type,depth,step 推荐一套OpenCV入门博客:OpenCV探索 一.Mat Mat类用于表示一个多维的单通道或者多通道的稠密数组.能够用来 ...
- 笔记react router 4（二）
上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...
- python 小练习 7
有一楼梯共n级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第n级,共有多少种走法? 这其实是fibonacci数列,记走法为f(n),在n-1和n-2时你都可以直接跨上去.因此 f(n) = ...