bootstrap table基本语法
bootstrap table 中文网 网址 ： https://www.bootstrap-table.com.cn/ 点击进入
HTML部分
<table id="puBmxqjh_table" ></table>
JS部分
var templateTableParams = {
classes: "table table-bordered table-hover",
url: "后台访问路经",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
height:600,
queryParams:function () {
var params = {
djh: $("#djh").val(),
jhlb: $("#jhlb").val(),
lxdh:$("#lxdh").val(),
orderNo:$("#orderNo").val(),
itemCode: $("#itemCode").val(),
itemName: $("#itemName").val(),
startDate:$('#startDate').val(),
endDate:$('#endDate').val()
};
return params;
},
columns: [
{
checkbox: true
},
{
title: '序号', halign: "center", align: 'center',
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: 'djh', title: '单据号',halign:"center"
},
{
field: 'jhlb', title: '计划类别', align:'center',halign:"center"
},
{
field: 'lrrname', title: '采购员',align:'center', halign:"center"
}
],
cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
trimOnSearch: true,
onlyInfoPagination:false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize:10, //每页记录数
pageList:[5,10,20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay:false,
onPostBody:function (data) {
//数据加载时执行
},
onDblClickRow: function (row) {
//双击行时执行
},
onLoadSuccess: function(data){
//数据加载完毕后执行
}
};
$('#puBmxqjh_table').bootstrapTable(templateTableParams);
页面效果
设置列宽
首先改变表格的样式，默认表格宽度为自适应，必须改为fixed
.table {
table-layout: fixed !important;
}
设置表格宽度后隐藏超出部分用..表示，添加如下代码
.table tbody tr td{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
然后设置列宽width
var templateTableParams = {
classes: "table table-bordered table-hover",
url: "后台访问路经",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
showFooter:true,//合计
queryParams:function () {
var params = {
maindjh: $('#maindjh').val()
};
return params;
},
columns: [
{ checkbox: true },
{ title: "序号", align:'center', halign:"center", width:'50px', formatter: function (value, row, index) { return index + 1; },
footerFormatter: function (value) {
return '合计';
}},
{ field: 'jhyc', title: "计划月次" , width:'70px',align:"center",halign:"center"},
{ field: 'lxdh', title:"计划单号",halign:"center", width:'100px', formatter :'paramsMatter'},
{ field: 'gyfl', title: "物资分类",halign:"center",align:"center" , width:'70px', formatter :'paramsMatter'},
{ field: 'itemCode', title: "物资编码",halign:"center", width:'100px',sortable:true, formatter :'paramsMatter' },
{ field: 'itemName', title: "物资名称",halign:"center" , width:'100px' , sortable:true,formatter :'paramsMatter'},
{ field: 'cz', title: "物资属性" ,halign:"center" , width:'120px', formatter :'paramsMatter' },
{ field: 'bz', title:"备注",halign:"center" , width:'100px', formatter :'paramsMatter' },
{ field: 'orderNo', title:"合同号" ,halign:"center" , width:'100px', formatter :'paramsMatter' },
{ field: 'mxid', title: "mxid", width:'100px', visible:false }
],
cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
onlyInfoPagination:false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize:10, //每页记录数
pageList:[5,10,20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay:false
};
页面效果展示
合并单元格
JS代码部分
var trueHeight = document.documentElement.clientHeight-document.body.offsetHeight;
var templateTableParams = {
classes: "table table-bordered table-hover",
url: "${ctx}/purchasePlan/infoList.z",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
showFooter:true,//合计
height:trueHeight,
queryParams:function () {
var params = {
djh: $("#djh").val(),
jhlb: $("#jhlb").val(),
lxdh:$("#lxdh").val(),
orderNo:$("#orderNo").val(),
itemCode: $("#itemCode").val(),
itemName: $("#itemName").val(),
startDate:$('#startDate').val(),
endDate:$('#endDate').val()
};
return params;
},
columns: [
{
checkbox: true
},
{
title: '序号',halign:"center", align:'center',
formatter: function (value, row, index) {
return index + 1;
}, width:'50px',
footerFormatter: function (value) {
return '合计';
}
},
{
field: 'djh', title: '单据号',halign:"center", width:'80px'
},
{
field: 'jhlb', title: '计划类别', align:'center',halign:"center", width:'80px'
},
{
field: 'lrrname', title: '采购员',align:'center', halign:"center", width:'80px'
},
{
field: 'rq', title: '计划日期', halign:"center", formatter :'paramsMatter', width:'140px'
},
{
field: 'cgbm', title: '采购部门', halign:"center", width:'100px'
},
{
field: 'jhyc', title: '计划月次', halign:"center", width:'70px'
},
{
field: 'lxdh', title: '路线单号', halign:"center", formatter :'paramsMatter', width:'100px'
},
{
field: 'gyfl', title: '物资类别', halign:"center", width:'100px'
},
{
field: 'itemCode', title: '物资编码', halign:"center",formatter :'paramsMatter', width:'150px',sortable:true
},
{
field: 'itemName', title: '物资名称', halign:"center", formatter :'paramsMatter', width:'100px',sortable:true
},
{
field: 'cz', title: '物资属性', halign:"center", formatter :'paramsMatter', width:'100px'
},
{
field: 'xqsl', title: '生产需求数量',halign:"center",align:'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) { count += value[i].xqsl; }
return count.toFixed(2); }, width:'100px'
},
{
field: 'jhsl', title: '生产计划数量',halign:"center",align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].jhsl; }
return count.toFixed(2);}, width:'100px'
},
{
field: 'cgsl', title: '采购计划数量',halign:"center",align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].cgsl; }
return count.toFixed(2); }, width:'100px'
},
{
field: 'kcsl', title: '计划时库存', halign:"center",align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].kcsl; }
return count.toFixed(2); }, width:'85px'
},
{
field: 'cgjg', title: '采购结果', halign:"center", width:'70px'
},
{
field: 'bz', title: '备注', halign:"center", formatter :'paramsMatter', width:'100px'
},{
field: 'orderNo', title: '销售合同编号', halign:"center", formatter :'paramsMatter', width:'100px'
}
],
cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
trimOnSearch: true,
onlyInfoPagination:false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize:10, //每页记录数
pageList:[5,10,20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay:false,
onPostBody:function (data) {
//data： table的所有数据 job_user：所要合并的列 1：colspan为1 $('#puBmxqjh_table') 表格对象
mergeCells(data,"djh",1,$('#puBmxqjh_table'));
}
};
//合并单元格
mergeCells = function(data, fieldName, colspan, target) {
var sort = Array();//记录每次需要合并的行数
var num = 1;
for (var i = 0; i < data.length - 1; i++) {
for ( var prop in data[i]) {
if (prop == fieldName) {//是否是需要合并的field
if (data[i][prop] == data[i + 1][prop]) {
//如果合并字段的值相等，与下一行合并
num++;
if (i == data.length - 2) {
sort.push(num);
}
} else {
//不需要与下一行合并
sort.push(num);
num = 1;
}
break;
}
}
}
var index = 0;
for (var j = 0; j < sort.length; j++) {
var count = sort[j];//需要合并的行数
$(target).bootstrapTable('mergeCells', {
index : index,
field : fieldName,
colspan : colspan,
rowspan : count
});
index += count;//下次需要合并的index的值
}
};
$('#puBmxqjh_table').bootstrapTable(templateTableParams);
页面效果展示
添加合计行
首先为表格添加showFooter: true属性
然后为列添加footerFormatter属性
var templateTableParams = {
classes: "table table-bordered table-hover",
url: "后台访问路经",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
showFooter:true,//合计
height:trueHeight,
queryParams:function () {
var params = {
djh: $("#djh").val(),
};
return params;
},
columns: [
{
checkbox: true
},
{
title: '序号',halign:"center", align:'center',
formatter: function (value, row, index) {
return index + 1;
}, width:'50px',
footerFormatter: function (value) {
return '合计';
}
},
{
field: 'djh', title: '单据号',halign:"center", width:'80px'
},
{
field: 'jhlb', title: '计划类别', align:'center',halign:"center", width:'80px'
},
{
field: 'lrrname', title: '采购员',align:'center', halign:"center", width:'80px'
},
{
field: 'gyfl', title: '物资类别', halign:"center", width:'100px'
},
{
field: 'itemCode', title: '物资编码', halign:"center",formatter :'paramsMatter', width:'150px',sortable:true
},
{
field: 'itemName', title: '物资名称', halign:"center", formatter :'paramsMatter', width:'100px',sortable:true
},
{
field: 'cz', title: '物资属性', halign:"center", formatter :'paramsMatter', width:'100px'
},
{
field: 'xqsl', title: '生产需求数量',halign:"center",align:'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) { count += value[i].xqsl; }
return count.toFixed(2); }, width:'100px'
},
{
field: 'jhsl', title: '生产计划数量',halign:"center",align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].jhsl; }
return count.toFixed(2);}, width:'100px'
},
{
field: 'cgsl', title: '采购计划数量',halign:"center",align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].cgsl; }
return count.toFixed(2); }, width:'100px'
},
{
field: 'kcsl', title: '计划时库存', halign:"center",align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].kcsl; }
return count.toFixed(2); }, width:'85px'
},
{
field: 'cgjg', title: '采购结果', halign:"center", width:'70px'
},
{
field: 'bz', title: '备注', halign:"center", formatter :'paramsMatter', width:'100px'
},{
field: 'orderNo', title: '销售合同编号', halign:"center", formatter :'paramsMatter', width:'100px'
}
],
cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
trimOnSearch: true,
onlyInfoPagination:false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize:10, //每页记录数
pageList:[5,10,20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay:false
};
页面效果展示
合计行单元格隐藏和列宽设置
在表格加载完成执行函数中添加调用的方法
var templateTableParams = {
classes: "table table-bordered table-hover",
url: "后台访问路经",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
showFooter:true,//合计
queryParams:function () {
var params = {
maindjh: $('#maindjh').val()
};
return params;
},
columns: [
{ checkbox: true },
{ title: "序号", align:'center', halign:"center", width:'50px', formatter: function (value, row, index) { return index + 1; },
footerFormatter: function (value) {
return '合计';
}},
{ field: 'jhyc', title: "计划月次" , width:'70px',align:"center",halign:"center"},
{ field: 'lxdh', title:"计划单号",halign:"center", width:'100px', formatter :'paramsMatter'},
{ field: 'gyfl', title: "物资分类",halign:"center",align:"center" , width:'70px', formatter :'paramsMatter'},
{ field: 'itemCode', title: "物资编码",halign:"center", width:'200px',sortable:true, formatter :'paramsMatter' },
{ field: 'itemName', title: "物资名称",halign:"center" , width:'100px' , sortable:true,formatter :'paramsMatter'},
{ field: 'cz', title: "物资属性" ,halign:"center" , width:'120px', formatter :'paramsMatter' },
{ field: 'dw', title: "计量<br/>单位" ,align:'center', width:'45px',halign:"center" },
{ field: 'xqsl', title: "需求数量",halign:"center", width:'70px',align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].xqsl; }
return count.toFixed(2); } },
{ field: 'jhsl', title: "计划数量",halign:"center", width:'70px',align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].jhsl; }
return count.toFixed(2); } },
{ field: 'kcsl', title: "实际库存" ,halign:"center", width:'70px',align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].kcsl; }
return count.toFixed(2); } },
{ field: 'kykc', title:"可用库存" ,halign:"center", width:'70px',align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].kykc; }
return count.toFixed(2); } },
{ field: 'zts', title: "可用在途",halign:"center", width:'70px',align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].zts; }
return count.toFixed(2); } },
{ field: 'orderQtyLastYear', title: "上一年消耗量", width:'100px',align:'right' },
{ field: 'cgsl', title:"采购数量",halign:"center", width:'70px',align:'right',
footerFormatter: function (value) {
var count = 0; for (var i in value) { count += value[i].cgsl*1; }
return count.toFixed(2); } },
{ field: 'xqrq', title:"需求日期",halign:"center" , width:'150px' ,sortable:true, formatter :'paramsMatter'},
{ field: 'cgjg', title: "采购结果", width:'90px' ,halign:"center",
formatter: function(value, row, index){
if(row.cgsl==0){
return '库存满足';
}else if (row.kykc>0){
return '部分采购';
}else {
return '采购计划';
}
}
},
{ field: 'bz', title:"备注",halign:"center" , width:'100px', formatter :'paramsMatter' },
{ field: 'orderNo', title:"合同号" ,halign:"center" , width:'100px', formatter :'paramsMatter' },
{ field: 'mxid', title: "mxid", width:'100px', visible:false }
],
cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
onlyInfoPagination:false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize:10, //每页记录数
pageList:[5,10,20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay:false,
onPostBody:function (data) {
merge_footer();
},
onLoadSuccess: function(data) {
if (data.length == 0) {
layer.msg("查询结果为空");
}
}
};
//设置合计列宽度
function merge_footer() {
//获取table表中footer 并获取到这一行的所有列
var footer_tbody = $('.fixed-table-footer table tbody');
var footer_tr = footer_tbody.find('>tr');
var footer_td = footer_tr.find('>td');
var footer_td_1 = footer_td.eq(0);
for(var i=0;i<footer_td.length-1;i++) {
footer_td.eq(i).hide();//隐藏单元格
if(i==1){
footer_td.eq(i).attr('width', "100px").show();//显示单元格并设置列宽
}
if(i==8){
footer_td.eq(i).attr('width', "690px").show();
}
if(i>8&&i<14){
footer_td.eq(i).attr('width', "70px").show();
}
if(i==14){
footer_td.eq(i).attr('width', "100px").show();
}
if(i==15){
footer_td.eq(i).attr('width', "70px").show();
}
}
//设置跨列
// footer_td_1.attr('colspan', 6).show();
//这里可以根据自己的表格来设置列的宽度 使对齐
// footer_td_1.attr('width', "50px").show();
}
页面效果展示
bootstrap 单元格内容悬框
JS代码
为columns[]中的对象添加formatter属性并指定调用方法
var templateTableParams = {
classes: "table table-bordered table-hover",
url: "后台访问路经",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
height:600,
queryParams:function () {
var params = {
djh: $("#djh").val(),
jhlb: $("#jhlb").val(),
lxdh:$("#lxdh").val(),
orderNo:$("#orderNo").val(),
itemCode: $("#itemCode").val(),
itemName: $("#itemName").val(),
startDate:$('#startDate').val(),
endDate:$('#endDate').val()
};
return params;
},
columns: [
{
checkbox: true
},
{
title: '序号', halign: "center", align: 'center',
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: 'djh', title: '单据号',halign:"center"
},
{
field: 'jhlb', title: '计划类别', align:'center',halign:"center"
},
{
field: 'lrrname', title: '采购员',align:'center', halign:"center",formatter :'paramsMatter'
}
],
cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
trimOnSearch: true,
onlyInfoPagination:false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize:10, //每页记录数
pageList:[5,10,20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay:false
};
//表格超出宽度鼠标悬停显示td内容
function paramsMatter(value,row,ind ex, field) {
var span=document.createElement('span');
span.setAttribute('title',value);
span.innerHTML = value;
return span.outerHTML;
}
页面效果如下
鼠标放到单元格上就会出现一个悬框展示单元格中的内容，悬框的宽度取决单元格的数据量
表头列名转行
首先为所有单元格添加样式保证单元格中内容水平居中
/*水平居中*/
th{
vertical-align: middle !important;
}
在需要转行的列名中添加<br/>标签
var templateTableParams = {
classes: "table table-bordered table-hover",
url: "后台访问路经",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
queryParams:function () {
var params = {
maindjh: $('#maindjh').val()
};
return params;
},
columns: [
{ checkbox: true },
{ title: "序号", align:'center', halign:"center", formatter: function (value, row, index) { return index + 1; }},
{ field: 'jhyc', title: "计划月次",align:"center",halign:"center"},
{ field: 'lxdh', title:"计划单号",halign:"center", formatter :'paramsMatter'},
{ field: 'gyfl', title: "物资分类",halign:"center",align:"center" , formatter :'paramsMatter'},
{ field: 'itemCode', title: "物资编码",halign:"center", sortable:true, formatter :'paramsMatter' },
{ field: 'itemName', title: "物资名称",halign:"center" , sortable:true,formatter :'paramsMatter'},
{ field: 'cz', title: "物资属性" ,halign:"center" , formatter :'paramsMatter' },
{ field: 'dw', title: "计量<br/>单位" ,align:'center',halign:"center" },
{ field: 'xqsl', title: "需求数量",halign:"center",align:'right'}
],
cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
onlyInfoPagination:false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize:10, //每页记录数
pageList:[5,10,20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay:false,
onPostBody:function (data) {
},
onLoadSuccess: function(data) {
}
};
页面效果展示
获取表格高度随电脑分辨率变化
var templateTableParams = {
classes: "table table-bordered table-hover",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
showFooter: true,//合计
columns: [
{
checkbox: true,
footerFormatter: function (value) {
return '合计';
}
},
{
title: "序号", field: 'id', halign: "center", width: '50px', formatter: function (value, row, index) {
return index + 1;
}
},
{field: 'jhyc', title: "计划月次", width: '70px', halign: "center", formatter: 'paramsMatter'},
{field: 'lxdh', title: "计划单号", width: '100px', halign: "center", formatter: 'paramsMatter'},
{field: 'gyfl', title: "物资分类", align: 'center', width: '100px', halign: "center"},
{
field: 'itemCode',
title: "物资编码",
width: '200px',
sortable: true,
halign: "center",
formatter: 'paramsMatter'
},
{
field: 'itemName',
title: "物资名称",
width: '100px',
sortable: true,
halign: "center",
formatter: 'paramsMatter'
},
{field: 'cz', title: "物资属性", width: '120px', halign: "center", formatter: 'paramsMatter'},
{field: 'dw', title: "计量<br/>单位", align: 'center', width: '45px', halign: "center"},
{
field: 'xqsl', title: "需求数量", width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].xqsl * 1;
}
return count.toFixed(2);
}
},
{
field: 'jhsl', title: "计划数量", width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].jhsl * 1;
}
return count.toFixed(2);
}
},
{
field: 'kcsl', title: "实际库存", width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].kcsl * 1;
}
return count.toFixed(2);
}
},
{
field: 'kykc', title: "可用库存", width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].kykc * 1;
}
return count.toFixed(2);
}
},
{
field: 'zts', title: "可用在途", width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].zts * 1;
}
return count.toFixed(2);
}
},
{field: 'orderQtyLastYear', title: "上一年消耗量", width: '100px', align: 'right', halign: "center"},
{
field: 'cgsl', title: "采购数量", width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].cgsl * 1;
}
return count.toFixed(2);
}
},
{field: 'xqrq', title: "需求日期", width: '150px', halign: "center", formatter: 'paramsMatter'},
{
field: 'cgjg', title: "采购结果", width: '70px', halign: "center",
formatter: function (value, row, index) {
if (row.cgsl == 0) {
return '库存满足';
} else if (row.kykc > 0) {
return '部分采购';
} else {
return '采购计划';
}
}
},
{field: 'bz', title: "备注", width: '100px', halign: "center", formatter: 'paramsMatter'},
{field: 'orderNo', title: "合同号", width: '100px', halign: "center", formatter: 'paramsMatter'},
{field: 'mxid', title: "mxid", width: '100px', visible: false}
],
cardView: (function () {
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
})(),
onlyInfoPagination: false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页记录数
pageList: [5, 10, 20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay: false,
onClickCell: function (field, value, row, $element) {
if (field === "orderQtyLastYear") {
itemCodes = row.itemCode;
orderOtyLastYearModal();
}
},
onPostBody: function (data) {
merge_footer();
}
}
var trueHeight = document.documentElement.clientHeight - 5;
var startHeight = document.body.offsetHeight;
templateTableParams.height = trueHeight - startHeight;
//表格初始化
$('#purchasePlanManage_table').bootstrapTable(templateTableParams);
获取表格所有数据
var rows=$('#xqjhDetails_table').bootstrapTable('getData')
获取选中的数据
var selected = $("#puBmxqjh_table").bootstrapTable('getSelections');
刷新表格数据
$('#scjhqt_table').bootstrapTable("refresh");
销毁表格
$('#scjhqt_table').bootstrapTable("destroy");
清空表格所有数据
$("#purchasePlanManage_table").bootstrapTable('removeAll')
删除行
var rows = $("#purchasePlanManage_table").bootstrapTable('getSelections');
$("#purchasePlanManage_table").bootstrapTable('remove',{
field:"itemCode",//每一行的唯一识别
values:[rows[0].itemCode]//删除条件数组
});
//例如：删除ID为3和4的数据行
$("#purchasePlanManage_table").bootstrapTable('remove',{
field:"ID",//每一行的唯一识别
values:[3,4]//删除条件数组
});
更新行数据
//修改第二行数据field为lxdh，xqsl，jhsl，cgsl的值
$('#purchasePlanManage_table').bootstrapTable('updateRow', {
index: 1,//index从0开始
row: {
lxdh: '33',
xqsl: '44',
jhsl: '55',
cgsl: '66'
}
});
扫一扫
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
