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的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...
随机推荐
- Docker用途 & 和tomcat的区别
两者不是同一种类型.1.docker 是容器,tomcat是jsp应用服务器2.tomcat可以安装在物理机上,虚拟机上,也可以安装在Docker上.所以从这个角度讲,Docker也可以看做是一种超轻 ...
- [MySQL] 中 Schema和Database的区别
在MySQL中,schema和database是同义词. CREATE SCHEMA和CREATE DATABASE是等效的. 但是其他的数据库产品(几乎所有数据库)有所不同.在oracle数据库产品 ...
- 开机出现grub界面(待尝试)
开机出现grub界面 试一下这个命令: grub> rootnoverify (hd0,0) grub> chainloader +1 grub> boot 这样就可以进入到wind ...
- (转) 6 ways of mean-centering data in R
6 ways of mean-centering data in R 怎么scale我们的数据? 还是要看我们自己数据的特征. 如何找到我们数据的中心? Cluster analysis with K ...
- 8.2 DRAM和SRAM
计算机组成 8 存储层次结构 8.2 DRAM和SRAM SRAM比较快,DRAM比较慢:SRAM比较贵,DRAM比较便宜.记住这些结论是很容易的,但是比是什么更重要的是为什么.那在这一节我们就从电路 ...
- php求取时间范围并传入数据库，页面上显示几天几月几年
$startTime = $_GPC['h_time']['start']; $endTime = $_GPC['h_time']['end']; echo $startTime.'<hr> ...
- 小程序模板中data传值有无...
A:<template is="gemSelectColor" data="{{optionData}}" />B:<template is= ...
- mysql存储引擎的对比
- CentOS6.8下实现配置配额
CentOS6.8下实现配置配额 Linux系统是支持多用户的,即允许多个用户同时使用linux系统,普通用户在/home/目录下均有自己的家目录,在默认状态下,各个用户可以在自己的家目录下任意创建文 ...
- SQL SERVER select，update，delete使用表别名
[SELECT] select * from 表名 表别名 [UPDATE] update 表别名 set 表别名.列=值 from 表名 表别名 where 条件 [DELETE] delete 表 ...