bootstrap-table操作使用
2016-10-10 18:27
375 查看
js文件：
var jmz = {};
jmz.GetLength = function(str) {
var realLength = 0, len = str.length, charCode = -1;
for (var i = 0; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128) realLength += 1;
else realLength += 2;
}
return realLength;
};
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
function getFormatDateByLong(l, pattern) {
return getFormatDate(new Date(l), pattern);
}
function getFormatDate(date, pattern) {
if (date == undefined) {
date = new Date();
}
if (pattern == undefined) {
pattern = "yyyy-MM-dd hh:mm:ss";
}
return date.format(pattern);
}
function operateFormatterEvaTime(value,row,index){
return getFormatDateByLong(value, "yyyy-MM-dd hh:mm:ss");
}
var $table = $('#table'),
$remove = $('#remove'),
$canShow = $('#canShow'),
$canHide = $('#canHide'),
selections = [];
function operateFormatter2(value, row, index) {
if(row.status==0){
return [
'<a class="show" href="#" title="显示">显示</a> | ',
'<span class="remove" style="color:blue;cursor:pointer;">删除</span>'
].join('');
}else if(row.status==1){
return [
'<a class="close" href="#" title="关闭">关闭</a> | ',
'<span class="remove" style="color:blue;cursor:pointer;">删除</span>'
].join('');
}
}
function operateFormatterStatus(value, row, index){
if(value==0){
return ['关闭'].join('');
}else if(value==1){
return ['显示'].join('');
}else{
return [''].join('');
}
}
window.operateEvents = {
'click .show': function (e, value, row, index) {
if(confirm("确认显示吗?")){
$.ajax({
url:ctx+'/evaMainContent/updateEvaMainContent.do',
data:{
json:JSON.stringify(row.mainContentId)
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
},
'click .close': function (e, value, row, index) {
if(confirm("确认关闭吗?")){
$.ajax({
url:ctx+'/evaMainContent/updateEvaMainContent.do',
data:{
json:JSON.stringify(row.mainContentId)
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
},
'click .remove': function (e, value, row, index) {
if(confirm("确认删除吗?")){
$table.bootstrapTable('remove', {
field: 'mainContentId',
values: [row.mainContentId]
});
$.ajax({
url:ctx+'/evaMainContent/deleteEvaMainContent.do',
data:{
json:JSON.stringify(row.mainContentId)
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
}
};
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
// save your data, here just save the current page
selections = getIdSelections();
// push or splice the selections if you want to save all data selections
});
//1 点击工具栏删除按钮
$remove.click(function () {
var ids = getIdSelections();
if(ids.length==0){
alert("请选择数据");
return;
}
if(confirm("确认删除吗?")){
$table.bootstrapTable('remove', {
field: 'mainContentId',
values: ids
});
$.ajax({
url:ctx+'/evaMainContent/deleteEvaMainContent.do',
data:{
json:JSON.stringify(ids)
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
});
//2 点击工具栏显示按钮
$canShow.click(function () {
var ids = getIdSelections();
if(ids.length==0){
alert("请选择数据");
return;
}
if(confirm("确认允许显示吗?")){
$.ajax({
url:ctx+'/evaMainContent/updateEvaMainContent.do',
data:{
json:JSON.stringify(ids),
status:'1'
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
});
//3 点击工具栏隐藏按钮
$canHide.click(function () {
var ids = getIdSelections();
if(ids.length==0){
alert("请选择数据");
return;
}
if(confirm("确认禁止显示吗?")){
$.ajax({
url:ctx+'/evaMainContent/updateEvaMainContent.do',
data:{
json:JSON.stringify(ids),
status:'0'
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
});
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.mainContentId;
});
}
/**
* 列表筛选
* @param params
* @returns {___anonymous2470_2595}
*/
function queryParamsForEva(params){
var productName=$("#productName").val();
var brandName=$("#brandName").val();
var businessName=$("#businessName").val();
var nparams={
"productName":productName,
"brandName":brandName,
"businessName":businessName,
"pagesize":params.limit,
"pageno": (params.offset/params.limit)+1
};
return nparams;
}
/**
* 信息加载
*/
function loadEvaList(){
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
url:ctx+"/evaMainContent/searchEvaMainContentList.do",
sidePagination:"server",
pagination:"true",
pageList:"[5, 10, 20, 50]",
queryParams:"queryParamsForEva",
responseHandler:"res",
queryParamsType:"limit"
});
$('#table').bootstrapTable('hideColumn', 'mainContentId');
}
/**
* bootstrap.table分页参数返回
* @param res
* @returns {___anonymous275_329}
*/
function res(res) {
return {
"total":res.total,
"rows":res.list
};
}
loadEvaList();
-----jsp 文件---
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-select.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-table.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/reset.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/evaMainContent/evaMainContent-list.css">
<jsp:include page="/WEB-INF/view/common/include.jsp"></jsp:include>
</head>
<body>
<h1><!-- 评论管理 --><span>评论列表</span></h1>
<div class="head">
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<i>商品名称</i>
<input type="text" id="productName" class="form-control">
</div>
<div class="col-md-4">
<i>品牌商名称</i>
<input type="text" id="brandName" class="form-control">
</div>
<div class="col-md-4">
<i>分销商名称</i>
<input type="text" id="businessName" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-8">
<i>评论时间</i>
<input type="text" class="form-control" id="startTime" name="startTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" readonly/>
至
<input type="text" class="form-control" id="endTime" name="endTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" readonly/>
</div>
<div class="col-md-4">
<i>状态</i>
<select name="" id="" class="selectpicker" data-live-search="true">
<option value="">全部</option>
<option value="0">关闭</option>
<option value="1">显示</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3">
<a href="#"><button type="button" onclick="loadEvaList();" class="btn btn-info">搜索</button></a>
</div>
</div>
</form>
</div>
<div class="row container" style="margin-bottom:-13px;margin-top:20px;">
<div class="col-md-6">
<button type="button" class="btn btn-info" id="remove" >删除</button>
<a href="#"><button type="button" id="canShow" class="btn btn-info">允许显示</button></a>
<a href="#"><button type="button" id="canHide" class="btn btn-info">禁止显示</button></a>
</div>
</div>
<div class="row table1" style="margin-bottom:50px;width:98%;margin:0 auto;">
<table id="table" class="tablesorter"
data-toggle="table"
data-toolbar="#toolbar"
data-page-list="[5, 10, 20, 50, 100, 200]"
data-pagination="true"
data-query-params="queryParamsForEva"
data-striped="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-checkbox="true" ></th>
<th data-field="mainContentId">Id</th>
<th data-field="productName">商品名称</th>
<th data-field="brandName">品牌商</th>
<th data-field="businessName">分销商</th>
<th data-field="content">评论内容</th>
<th data-field="evaTime" data-formatter="operateFormatterEvaTime">评论时间</th>
<th data-field="status" data-formatter="operateFormatterStatus" >状态</th>
<th data-field="operation" data-formatter="operateFormatter2" data-events="operateEvents">操作</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-select.min.js"></script>
<script src="${pageContext.request.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/evaMainContent/evaMainContentList.js"></script>
</body>
</html>
var jmz = {};
jmz.GetLength = function(str) {
var realLength = 0, len = str.length, charCode = -1;
for (var i = 0; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128) realLength += 1;
else realLength += 2;
}
return realLength;
};
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
function getFormatDateByLong(l, pattern) {
return getFormatDate(new Date(l), pattern);
}
function getFormatDate(date, pattern) {
if (date == undefined) {
date = new Date();
}
if (pattern == undefined) {
pattern = "yyyy-MM-dd hh:mm:ss";
}
return date.format(pattern);
}
function operateFormatterEvaTime(value,row,index){
return getFormatDateByLong(value, "yyyy-MM-dd hh:mm:ss");
}
var $table = $('#table'),
$remove = $('#remove'),
$canShow = $('#canShow'),
$canHide = $('#canHide'),
selections = [];
function operateFormatter2(value, row, index) {
if(row.status==0){
return [
'<a class="show" href="#" title="显示">显示</a> | ',
'<span class="remove" style="color:blue;cursor:pointer;">删除</span>'
].join('');
}else if(row.status==1){
return [
'<a class="close" href="#" title="关闭">关闭</a> | ',
'<span class="remove" style="color:blue;cursor:pointer;">删除</span>'
].join('');
}
}
function operateFormatterStatus(value, row, index){
if(value==0){
return ['关闭'].join('');
}else if(value==1){
return ['显示'].join('');
}else{
return [''].join('');
}
}
window.operateEvents = {
'click .show': function (e, value, row, index) {
if(confirm("确认显示吗?")){
$.ajax({
url:ctx+'/evaMainContent/updateEvaMainContent.do',
data:{
json:JSON.stringify(row.mainContentId)
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
},
'click .close': function (e, value, row, index) {
if(confirm("确认关闭吗?")){
$.ajax({
url:ctx+'/evaMainContent/updateEvaMainContent.do',
data:{
json:JSON.stringify(row.mainContentId)
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
},
'click .remove': function (e, value, row, index) {
if(confirm("确认删除吗?")){
$table.bootstrapTable('remove', {
field: 'mainContentId',
values: [row.mainContentId]
});
$.ajax({
url:ctx+'/evaMainContent/deleteEvaMainContent.do',
data:{
json:JSON.stringify(row.mainContentId)
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
}
};
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
// save your data, here just save the current page
selections = getIdSelections();
// push or splice the selections if you want to save all data selections
});
//1 点击工具栏删除按钮
$remove.click(function () {
var ids = getIdSelections();
if(ids.length==0){
alert("请选择数据");
return;
}
if(confirm("确认删除吗?")){
$table.bootstrapTable('remove', {
field: 'mainContentId',
values: ids
});
$.ajax({
url:ctx+'/evaMainContent/deleteEvaMainContent.do',
data:{
json:JSON.stringify(ids)
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
});
//2 点击工具栏显示按钮
$canShow.click(function () {
var ids = getIdSelections();
if(ids.length==0){
alert("请选择数据");
return;
}
if(confirm("确认允许显示吗?")){
$.ajax({
url:ctx+'/evaMainContent/updateEvaMainContent.do',
data:{
json:JSON.stringify(ids),
status:'1'
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
});
//3 点击工具栏隐藏按钮
$canHide.click(function () {
var ids = getIdSelections();
if(ids.length==0){
alert("请选择数据");
return;
}
if(confirm("确认禁止显示吗?")){
$.ajax({
url:ctx+'/evaMainContent/updateEvaMainContent.do',
data:{
json:JSON.stringify(ids),
status:'0'
},
dataType:'json',
success:function(data) {
alert(data.resultInfo);
}
});
}
});
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.mainContentId;
});
}
/**
* 列表筛选
* @param params
* @returns {___anonymous2470_2595}
*/
function queryParamsForEva(params){
var productName=$("#productName").val();
var brandName=$("#brandName").val();
var businessName=$("#businessName").val();
var nparams={
"productName":productName,
"brandName":brandName,
"businessName":businessName,
"pagesize":params.limit,
"pageno": (params.offset/params.limit)+1
};
return nparams;
}
/**
* 信息加载
*/
function loadEvaList(){
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
url:ctx+"/evaMainContent/searchEvaMainContentList.do",
sidePagination:"server",
pagination:"true",
pageList:"[5, 10, 20, 50]",
queryParams:"queryParamsForEva",
responseHandler:"res",
queryParamsType:"limit"
});
$('#table').bootstrapTable('hideColumn', 'mainContentId');
}
/**
* bootstrap.table分页参数返回
* @param res
* @returns {___anonymous275_329}
*/
function res(res) {
return {
"total":res.total,
"rows":res.list
};
}
loadEvaList();
-----jsp 文件---
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-select.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-table.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/reset.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/evaMainContent/evaMainContent-list.css">
<jsp:include page="/WEB-INF/view/common/include.jsp"></jsp:include>
</head>
<body>
<h1><!-- 评论管理 --><span>评论列表</span></h1>
<div class="head">
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<i>商品名称</i>
<input type="text" id="productName" class="form-control">
</div>
<div class="col-md-4">
<i>品牌商名称</i>
<input type="text" id="brandName" class="form-control">
</div>
<div class="col-md-4">
<i>分销商名称</i>
<input type="text" id="businessName" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-8">
<i>评论时间</i>
<input type="text" class="form-control" id="startTime" name="startTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" readonly/>
至
<input type="text" class="form-control" id="endTime" name="endTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" readonly/>
</div>
<div class="col-md-4">
<i>状态</i>
<select name="" id="" class="selectpicker" data-live-search="true">
<option value="">全部</option>
<option value="0">关闭</option>
<option value="1">显示</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3">
<a href="#"><button type="button" onclick="loadEvaList();" class="btn btn-info">搜索</button></a>
</div>
</div>
</form>
</div>
<div class="row container" style="margin-bottom:-13px;margin-top:20px;">
<div class="col-md-6">
<button type="button" class="btn btn-info" id="remove" >删除</button>
<a href="#"><button type="button" id="canShow" class="btn btn-info">允许显示</button></a>
<a href="#"><button type="button" id="canHide" class="btn btn-info">禁止显示</button></a>
</div>
</div>
<div class="row table1" style="margin-bottom:50px;width:98%;margin:0 auto;">
<table id="table" class="tablesorter"
data-toggle="table"
data-toolbar="#toolbar"
data-page-list="[5, 10, 20, 50, 100, 200]"
data-pagination="true"
data-query-params="queryParamsForEva"
data-striped="false"
data-show-pagination-switch="false">
<thead>
<tr>
<th data-checkbox="true" ></th>
<th data-field="mainContentId">Id</th>
<th data-field="productName">商品名称</th>
<th data-field="brandName">品牌商</th>
<th data-field="businessName">分销商</th>
<th data-field="content">评论内容</th>
<th data-field="evaTime" data-formatter="operateFormatterEvaTime">评论时间</th>
<th data-field="status" data-formatter="operateFormatterStatus" >状态</th>
<th data-field="operation" data-formatter="operateFormatter2" data-events="operateEvents">操作</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-select.min.js"></script>
<script src="${pageContext.request.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/evaMainContent/evaMainContentList.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap-table的使用及如何给单元格添加功能按钮和事件等操作！
- Bootstrap-table的使用及如何给单元格添加功能按钮和事件等操作！
- SQL使用游标遍历多层table获取每行的数据进行操作
- 使用jquery操作table元素：增加或删除一行
- 使用nodejs，express，mysql，Bootstrap开发采购招标网站(三）Bootstrap-table实现Ajax删除数据
- ios TableView那些事（三十 五）TableView 单选操作使用Autolayout实现UITableView的Cell动态布局和高度动态改变
- 使用jQuery操作HTML的table表格的实例解析
- JavaScript学习笔记（2） 使用DOM编写浏览器兼容的Table操作
- bootstrap-table + JSON + springmvc使用
- Qt使用 QSqlTableModel 模型操作数据库
- bootstrap_table使用总结
- JS组件Bootstrap Table使用方法详解
- 使用EventData()捕获操作对象(包括：新建/修改/删除 Table/Sp/View/Fn)动作
- Hibernate属性中 @JoinColumn与@JoinTable、是否使用ForeignKey的操作数据库的效率区别
- 使用css如何操作Table没有外边框只有内边框
- Bootstrap3 框架下 使用 Bootstrap-table 结合 Bootstrap- file input 上传文件 并显示进度条
- [ios开发基础之 Core Data[3]]如何使用NSFetchedResultsController 来集成TableView操作
- 使用watir操作table中指定的项
- JS组件Bootstrap Table使用方法详解
- bootstrap-table组件使用说明