表格数据组件
<h4>1.表格数据组件相关代码</h4>
<h5>1.1.表格</h5>
<p>文件上传除了基础的bootstrap、jq的相关js、css外，需要引入如下的相关文件</p>
<ul>
<li>css文件引入：
<pre><code class="language-java"><link rel="stylesheet" href="/css/plugins/bootstrap-table/bootstrap-table.min.css">
<!--导出-->
<link rel="stylesheet" href="https://cdn.staticfile.org/TableExport/5.2.0/css/tableexport.min.css"></code></pre></li>
<li>js文件引入：
<pre><code class="language-java"><script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="https://cdn.staticfile.org/TableExport/5.2.0/js/tableexport.min.js"></script>
<!--在客户端保存生成的导出文件-->
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->
<script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>
<!--以PNG格式导出表格-->
<!--对于IE支持包括 html2canvas 之前的 es6-promise-->
<script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<!--将表导出为PDF文件-->
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script></code></pre></li>
</ul>
<p>html代码：</p>
<pre><code class="language-java"><div class="row" style="margin:10px 30px;">
<div id="toolbar">
<button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>
<div class="btn btn-primary" onclick="javascript:alert('添加记录')" data-toggle="modal" data-target="#addModal">添加记录</div>
</div>
<table id="mytab" class="table table-hover"></table>
</div></code></pre>
<p>js代码（渲染表格）：</p>
<pre><code class="language-java"><script>
// 渲染表格
$(function() {
// 渲染表格
$('#mytab').bootstrapTable({
url: "/front/provideData/list",//数据源
// dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
height: tableHeight(),//高度调整
showExport: true,
exportDataType:"all",
search: true,//是否搜索
editable:true,//是否编辑
pagination: true,//是否分页
pageSize: 3,//单页记录数
pageList: [3, 8, 12, 50],//分页步进值
sidePagination: "client",//服务端分页
contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
dataType: "json",//期待返回数据类型
method: "get",//请求方式
searchAlign: "left",//查询框对齐方式
queryParamsType: "limit",//查询参数组织方式
queryParams: function getParams(params) {
//params obj
params.other = "otherInfo";
return params;
},
responseHandler:function(res){
//动态渲染表格之前获取有后台传递的数据时,用于获取出除去本身渲染所需的数据的额外参数
//详见此函数参数的api
console.log("res:",res);
return res;
},
rowAttributes:true,//行属性
theadClasses: "thead-dark",
detailView: true,
showFullscreen:true,
searchOnEnterKey: false,//回车搜索
showRefresh: true,//刷新按钮
showColumns: true,//列选择按钮
buttonsAlign: "left",//按钮对齐方式
toolbar: "#toolbar",//指定工具栏
toolbarAlign: "right",//工具栏对齐方式
rowStyle:rowStyle,
showExport: true,//工具栏上显示导出按钮
exportDataType: $(this).val(),//显示导出范围
exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//导出格式
exportOptions: {//导出设置
fileName: 'Tablexxx',//下载文件名称
},
columns: [
{
title: "全选",
field: "select",
checkbox: true,
width: 20,//宽度
align: "center",//水平
valign: "middle"//垂直
},
{
title: "ID",//标题
field: "goodsId",//键名
// 前端排序，若需要组合排序或者后端排序，需要结合传参后台处理
sortable: true,//是否可排序
order: "desc"//默认排序方式
},
{
title: "name",
field: "goodsName",
// sortable: true,
//
// titleTooltip: "this is name"
},
{
title: "price",
field: "price",
// sortable: true,
},
{
title: "operation",
field: "info",
formatter: function (value, row, index) {
var s = '<button class = "edit btn-warning btn btn-xs" >编辑</button>';
var d = '<button class = "remove btn-danger btn btn-xs">删除</button>';
var t = '<button class = "ShowAll btn btn-primary btn-xs">查看详情</button>';
return s + ' ' + d + ' ' + t;
},
events: 'operateEvents'
}
],
// 点击行触发事件
onClickRow: function(row, $element) {
console.log(row);
//$element是当前tr的jquery对象
//$element.css("background-color", "green");
},//单击row事件
locale: "zh-CN", //中文支持
detailView: false, //是否显示详情折叠
});
})
</script></code></pre>
<h5>1.2.行内编辑</h5>
<p>文件上传除了基础的bootstrap、jq的相关js、css外，需要引入如下的相关文件</p>
<ul>
<li>css文件引入：
<pre><code class="language-java"><link href="https://cdn.bootcdn.net/ajax/libs/x-editable/1.5.1/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"></code></pre></li>
<li>js文件引入：
<pre><code class="language-java"><script src="https://cdn.bootcdn.net/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table-editable.js"></script></code></pre></li>
</ul>
<p>html代码：</p>
<pre><code class="language-java"><table id="myEditTab" class="table"></table></code></pre>
<p>js代码（渲染表格）：</p>
<pre><code class="language-java">$(function () {
$("#myEditTab").bootstrapTable({
// toolbar: "#toolbar",
idField: "Id",
pagination: true,
showRefresh: false,
search: false,
clickToSelect: false,
queryParams: function (param) {
return {};
},
url: "/front/provideData/list",//数据源
columns: [
{
checkbox: true,
},
{
title: "ID",//标题
field: "goodsId",//键名
},
{
title: "name",
field: "goodsName",
editable: {
type: 'text',
title: '用户名',
validate: function (v) {
if (!v) return '用户名不能为空';
}
}
},
{
title: "price",
field: "price",
}
],
onEditableSave: function (field, row, oldValue, $el) {
console.log(row,"{}{}{}{}");
$.ajax({
type: "post",
url: "/front/data/edit",
data: row,
// dataType: 'JSON',
success: function (data, status) {
if (status == "success") {
alert('提交数据成功');
}
},
error: function () {
alert('编辑失败');
},
complete: function () {
}
});
}
});
});</code></pre>
<h4>2.其他</h4>
<p>表格数据参数说明：<a href="http://www.itxst.com/bootstrap-table-methods/tutorial.html">http://www.itxst.com/bootstrap-table-methods/tutorial.html</a></p>