就今天！阿里黑科技来了：不排队结账_拿了东西就走人！

布满荆棘的人生 2022-04-06 09:26 132阅读 0赞

原文链接：\[url\]http://click.aliyun.com/m/23848/\[/url\]  
摘要： Bootstrap Table使用和扩展  
  
一.使用  
导包：  
1.Jquery  
2.bootstrap组件（js+css）  
3.bootstrap table组件及中文包（js+css+js）  
8a8f44c5ef9635e1b418427c6b993da7cdc95184  
代码：  
例一：  
<table id="table"></table>  
<script>  
$(function () \{  
  
//1.初始化Table  
var oTable = new TableInit();  
oTable.Init();  
  
//2.初始化Button的点击事件  
var oButtonInit = new ButtonInit();  
oButtonInit.Init();  
  
\});  
  
  
var TableInit = function () \{  
var oTableInit = new Object();  
//初始化Table  
oTableInit.Init = function () \{  
$('\#table').bootstrapTable(\{  
url: '/Home/GetDepartment', //请求后台的URL（\*）  
method: 'get', //请求方式（\*）  
toolbar: '\#toolbar', //工具按钮用哪个容器  
striped: true, //是否显示行间隔色  
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（\*）  
pagination: true, //是否显示分页（\*）  
sortable: false, //是否启用排序  
sortOrder: "asc", //排序方式  
queryParams: oTableInit.queryParams,//传递参数（\*）  
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（\*）  
pageNumber:1, //初始化加载第一页，默认第一页  
pageSize: 10, //每页的记录行数（\*）  
pageList: \[10, 25, 50, 100\], //可供选择的每页的行数（\*）  
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大  
strictSearch: true,  
showColumns: true, //是否显示所有的列  
showRefresh: true, //是否显示刷新按钮  
minimumCountColumns: 2, //最少允许的列数  
clickToSelect: true, //是否启用点击选中行  
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度  
uniqueId: "ID", //每一行的唯一标识，一般为主键列  
showToggle:true, //是否显示详细视图和列表视图的切换按钮  
cardView: false, //是否显示详细视图  
detailView: false, //是否显示父子表  
columns: \[\{  
checkbox: true  
\}, \{  
field: 'Name',  
title: '部门名称',  
align: 'center',  
valign: 'middle',  
width: '100px',  
\}, \{  
field: 'ParentName',  
title: '上级部门',  
\}, \{  
field: 'Level',  
title: '部门级别'  
\}, \{  
field: 'Desc',  
title: '描述'  
\}, \]  
\});  
\};  
  
//得到查询的参数  
oTableInit.queryParams = function (params) \{  
var temp = \{ //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的  
limit: params.limit, //页面大小  
offset: params.offset, //页码  
departmentname: $("\#txt\_search\_departmentname").val(),  
statu: $("\#txt\_search\_statu").val()  
\};  
return temp;  
\};  
return oTableInit;  
\};  
  
  
var ButtonInit = function () \{  
var oInit = new Object();  
var postdata = \{\};  
  
oInit.Init = function () \{  
//初始化页面上面的按钮事件  
\};  
  
return oInit;  
\};  
</script>  
例二：  
<table id="table"></table>  
<style>  
\#table\{  
table-layout: fixed;  
\}  
</style>  
<script type="text/javascript">  
var $table = $("\#table");  
var selections = \[\];  
window.lockEvents = \{  
'click .lock':function (e, value, row, index) \{  
$.ajax(\{  
type:"post",  
url:"/copartner/trade/supplier/lock.do",  
async:true,  
dataType:"json",  
data:\{  
id: row.id,  
isEnable : row.isEnable  
\},  
success: function(data) \{  
if(data.msg != null) \{  
alert(data.msg);  
\}  
\},  
error:function(jqXHR)\{  
alert(jqXHR.status);  
\}  
\});  
initTable();  
\}  
\};  
function initTable() \{  
$table.bootstrapTable('destroy');  
$table.bootstrapTable(\{  
height: getHeight(),  
toolbar: "\#toolbar",  
//search: true,  
//searchAlign: "left",  
//showRefresh: true,  
//showToggle: true,  
showColumns: true,  
//showExport: true,  
//exportDataType: "all",  
//detailView: true,  
//detailFormatter: detailFormatter,  
//minimumCountColumns: 2,  
idField: 'id',  
showFooter: false,  
/\*与后台交互\*/  
method: 'post',  
contentType: "application/x-www-form-urlencoded",  
dataType: "json",  
cache: false,  
striped: true,  
pagination: true,  
//showPaginationSwitch: true,  
pageNumber: 1,  
pageSize: 20,  
pageList: \[10, 20, 50, 100\],  
url: "/copartner/tradeOrderInfo/list.do",  
//dataField: "rows",  
clickToSelect: true,  
queryParamsType: '',  
queryParams: function queryParams(params) \{  
var param = \{  
pageNumber: params.pageNumber,  
pageSize: params.pageSize,  
vagueInfo: $(".vagueInput").val(),  
\}  
return param;  
\},  
sidePagination: "server",//client  
/\* onLoadSuccess: function(data)\{ //加载成功时执行  
alert("加载成功"+data);  
\},  
onLoadError: function()\{ //加载失败时执行  
alert("加载失败"+data);  
\}, \*/  
/\*列\*/  
columns: \[  
\{  
checkbox: true,  
align: 'center',  
valign: 'middle'  
\}, \{  
title: 'id',  
field: 'id',  
align: 'center',  
valign: 'middle',  
//sortable: true  
width: '100px'  
\}, \{  
title: '订单编号',  
field: 'alias',  
align: 'center',  
valign: 'middle',  
width: '100px',  
formatter: openFormatter  
\}, \{  
title: '电话',  
field: 'phone',  
align: 'center',  
valign: 'middle',  
width: '100px',  
formatter: function (value, row, index) \{  
return "<a class=\\"editPhone\\" href=\\"\\" name=\\"phone\\" data-type=\\"text\\" data-pk=\\""+row.Id+"\\" data-title=\\"电话\\">" + value + "</a>";  
\}  
\}, \{  
title: '是否售后',  
field: 'isAftersales',  
align: 'center',  
valign: 'middle',  
width: '100px',  
formatter: afterSalesFormatter  
\}, \{  
title: '操作',  
field: 'detail',  
align: 'center',  
valign: 'middle',  
width: '100px',  
formatter: detailFormatter  
\}, \{  
title: '是否启用',  
field: 'isEnable',  
align: 'center',  
valign: 'middle',  
width: '100px',  
events: lockEvents,  
formatter: lockFormatter  
\}  
\],  
onClickRow: function (row, $element) \{  
curRow = row;  
\}  
onLoadSuccess: function (aa, bb, cc) \{  
$("\#table .rowEditable").editable(\{  
url: function (params) \{  
var column = $(this).attr("name");  
curRow\[column\] = params.value;  
\},  
type: 'text'  
\});  
$("\#table .editPhone").editable(\{  
url: function (params) \{  
var sPhone = $(this).attr("name");  
curRow\[sPhone\] = params.value;  
$.ajax(\{  
type: 'POST',  
url: "/copartner/trade/supplier/editPhone.do",  
data: curRow,  
dataType: 'JSON',  
success: function (data, textStatus, jqXHR) \{  
initTable();  
if(data.msg != null) \{  
alert(data.msg);  
\}  
\},  
error:function(jqXHR)\{  
alert(jqXHR.status);  
\}  
\});  
\},  
type: 'text'  
\});  
\}  
\});  
$table.bootstrapTable('hideColumn', 'id');  
function afterSalesFormatter(value, row, index) \{  
var state = '';  
var color = '\#000';  
var color\_red = '\#c00';  
var color\_blue = '\#0066ff';  
var color\_green = '\#5cb85c';  
if(value == 0) \{  
state = '否';  
color = color;  
\} else if(value == 1) \{  
state = "是";  
color = color\_green;  
\}  
return \[  
'<span style="color: '+ color +'">' + state + '</span>'  
\].join('');  
\}  
function openFormatter(value, row, index) \{  
return value;  
\}  
function detailFormatter(value, row, index) \{  
return \[  
'<a class="aliasNum" href="orderDetailInfoNew.html?id=' + row.id + '" title="进入明细">',  
'<span style="">详情</span>',  
'</a>'  
\].join('');  
\}  
function lockFormatter(value, row, index) \{  
var state = '--';  
var color = '\#000';  
var color\_red = '\#c00';  
var color\_blue = '\#0066ff';  
if(value == 0) \{  
state = '已关闭';  
color = color\_red;  
\} else if(value == 1) \{  
state = "已启用";  
color = color\_blue;  
\}  
return \[  
'<a class="lock" href="javascript:void(0)" title="切换状态">',  
'<span style="color: '+ color +'">' + state + '</span>',  
'</a>'  
\].join('');  
\}  
function editReturnCountFormatter(value, row, index) \{  
return "<a class=\\"rowEditable\\" href=\\"\\" name=\\"returnCount\\" data-type=\\"text\\" data-pk=\\""+row.Id+"\\" data-title=\\"投诉数量\\">" + value + "</a>";  
\}  
function editReturnPriceFormatter(value, row, index) \{  
return "<a class=\\"rowEditable\\" href=\\"\\" name=\\"returnPrice\\" data-type=\\"text\\" data-pk=\\""+row.Id+"\\" data-title=\\"投诉金额\\">" + value + "</a>";  
\}  
function editReturnReasonFormatter(value, row, index) \{  
return "<a class=\\"rowEditable\\" href=\\"\\" name=\\"returnReason\\" data-type=\\"text\\" data-pk=\\""+row.Id+"\\" data-title=\\"售后原因\\">" + value + "</a>";  
\}  
// sometimes footer render error  
/\*setTimeout(function() \{  
$table.bootstrapTable('resetView');  
\}, 200);\*/  
/\*$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  
\});  
$table.on('expand-row.bs.table', function (e, index, row, $detail) \{  
if (index % 2 == 1) \{  
$detail.html('Loading from ajax request...');  
$.get('LICENSE', function (res) \{  
$detail.html(res.replace(/\\n/g, '<br>'));  
\});  
\}  
\});  
$table.on('all.bs.table', function (e, name, args) \{  
console.log(name, args);  
\});\*/  
$(window).resize(function()\{  
$table.bootstrapTable('resetView',\{  
height: getHeight()  
\});  
\});  
\}  
function getIdSelections() \{  
return $.map($table.bootstrapTable('getSelections'), function (row) \{  
return row.id  
\});  
\}  
function getData() \{  
return $.map($table.bootstrapTable('getData'), function (row) \{  
return row.id+"---"+row.returnCount+"---"+row.returnPrice+"---"+row.returnReason+"---"+row.saleCount;  
\});  
\}  
function getHeight() \{  
return document.body.clientHeight\*0.88;  
\}  
/\*function detailFormatter(index, row) \{  
var html = \[\];  
$.each(row, function (key, value) \{  
html.push('<p><b>' + key + ':</b> ' + value + '</p>');  
\});  
return html.join('');  
\}\*/  
$(document).ready(function() \{  
initTable();  
\});  
</script>  
  
二.扩展  
行内编辑 Table Editable  
表格导出 Table Export  
原文链接：\[url\]http://click.aliyun.com/m/23848/\[/url\]