下拉框
https://www.jb51.net/article/119929.htm
一。有框线 class=“table-bordered”
<div class="col-sm-12 select-table table-bordered">
<table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap;"></table>
</div>
二。合并 在onLoadSucess
onLoadSuccess : function(data) {
var data = $('#bootstrap-table').bootstrapTable('getData', true);
//合并单元格
mergeTable(data, "#bootstrap-table“);
}
//mergeTable改两处列 mergeCell改一处
/*bootStrapTable合并表格*/
var projNameCount="";
var subProjNameCount="";
var phaseCount="";
function mergeTable(datas,tableId){
//每次合并表格前 都要将全局变量清空
projNameCount="";
subProjNameCount="";
phaseCount="";
mergeCells(datas,0,datas.length,"name",$('#'+tableId));
mergeCells(datas,0,datas.length,"firstIndicator",$('#'+tableId));
mergeCells(datas,0,datas.length,"secondIndicator",$('#'+tableId));
//对projName,subProjName,phase的次数进行分割
//去掉末尾的逗号 有时候也可以不用去掉 还是去掉了我这里
projNameCount = projNameCount.substring(0,projNameCount.length-1);
subProjNameCount = subProjNameCount.substring(0,subProjNameCount.length-1);
phaseCount = phaseCount.substring(0,phaseCount.length-1);
//console.log(projNameCount+"+"+subProjNameCount+"+"+phaseCount);
var strArr1 = projNameCount.split(",");
var strArr2 = subProjNameCount.split(",");
var strArr3 = phaseCount.split(",");
//根据次数进行表格合并
//合并projName
var index = 0;
for(var i=0;i<strArr1.length;i++){
var count = strArr1[i] * 1;
$('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"name", colspan: 1, rowspan: count});
index += count;
}
//合并subProjName
var index = 0;
for(var i=0;i<strArr2.length;i++){
var count = strArr2[i] * 1;
$('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"firstIndicator", colspan: 1, rowspan: count});
index += count;
}
//合并phaseName
var index = 0;
for(var i=0;i<strArr3.length;i++){
var count = strArr3[i] * 1;
$('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"secondIndicator", colspan: 1, rowspan: count});
index += count;
}
}
//排序后紧挨在一起 进行同名合并
/**
* 对于表格合并,首先要进行排序,即将同名的属性的记录排序紧挨在一起,这样才能最好的显示出合并想要的效果。
* 因为此方法是拿第一个数据与后面的数据依次比较,
* 例如,第一条记录的projName与第二条记录的projName来进行比较,两者相同,则继续第一条记录的projName与第三条记录的projName来进行比较,
* 当不相同时,记录下此projName对应的值出现的次数,然后再开始从第三条记录的projName与第四条记录的projName来进行比较,依次循环下去,记
* 录下相同内容的值出现的次数,到时候,再根据这些次数来进行合并
*
* 此方法主要是先拿到每个同名属性的值的相等次数,把次数利用全局变量存下来
*
* @param datas --表格数据,一般为表格的rows数据
* @param startIndex --开始下标
* @param size --从开始下标起,到size结束,遍历合并多少个
* @param fieldName --计算算哪个列
* @param target --table表格对象
*/
function mergeCells(datas,startIndex,size,fieldName,target) {
//console.log("startIndex:"+startIndex+"size:"+size+"---合并列:"+fieldName)
//声明一个数组计算相同属性值在data对象出现的次数和
//这里不能使用map,因为如果涉及到排序后,相同的属性并不是紧挨在一起,那么后面的次数会覆盖前面的次数,故这里用数组
/*1.拼装数组sortArr*/
var sortArr = new Array();
for (var i = startIndex; i < size ; i++) {
for (var j = i + 1; j < size; j++) {
if (datas[i][fieldName] != datas[j][fieldName]){
//相同属性值不同
if (j - i > 1) {
sortArr.push(j - i);
i = j - 1;
//如果是最后一个元素 把最后一个元素的次数也装进去
if(i == size-1-1){
sortArr.push(1);
}
}else{
sortArr.push(j - i);
//如果j是最后一个元素 把最后一个元素的次数装进去
if(j == size - 1){
sortArr.push(1);
}
}
break;
}else {
//相同属性值相同 直到最后一次的时候才会装 否则在他们的值不同时再装进去
if (j == size - 1) {
sortArr.push(j - i+1);
//这里的赋值感觉有点多余 算了现就这个样子吧 不影响功能
i = j;
}
}
}
}
/*2.拼装字符串projNameCount*/
//遍历数组,将值装追加到对应的字符串后面
for(var prop in sortArr){
/*这里在ie8上运行的时候 出现坑 最好遍历数组不要用for in 这里我用了就懒得换了
下面加上如果prop是indexOf就停止 就解决了ie8出现的问题*/
if(prop == "indexOf"){
continue;
}
if(fieldName == "name"){
var count = sortArr[prop] * 1;
projNameCount += count +",";
}
if(fieldName == "firstIndicator"){
var count = sortArr[prop] * 1;
subProjNameCount += count +",";
}
if(fieldName == "secondIndicator"){
var count = sortArr[prop] * 1;
phaseCount += count +",";
}
}
/*3.啥玩意*/
/*for(var prop in sortArr){
if(prop == "indexOf"){
continue;
}
if(fieldName == "name"){
//console.log("进入projName--此时开始index-"+startIndex+"--结束index--"+(startIndex+sortArr[prop])*1);
startIndex = 0;
//subProjName每次进去的startIndex为前面次数的和
if(subProjNameCount.length>0){
//console.log("subProjNameCount-"+subProjNameCount);
var temp = subProjNameCount.substring(0,subProjNameCount.length-1);
var strArr1 = temp.split(",");
for(var i=0;i<strArr1.length;i++){
var count = strArr1[i] * 1;
startIndex += count;
}
}
if(sortArr[prop] >1){
mergeCells(datas,startIndex,startIndex+sortArr[prop],"firstIndicator",target);
}else{
//当projName的次数为1就不进入循环
subProjNameCount +=1+",";
phaseCount +=1+",";
}
}
if(fieldName == "firstIndicator"){
startIndex = 0;
if(phaseCount.length>0){
//console.log("phaseCount-"+phaseCount);
var temp = phaseCount.substring(0,phaseCount.length-1);
//phaseCount = phaseCount + ",";
var strArr1 = temp.split(",");
for(var i=0;i<strArr1.length;i++){
var count = strArr1[i] * 1;
startIndex += count;
}
}
if(sortArr[prop] >1){
//console.log("进入subProj--此时开始index-"+startIndex+"--结束index--"+(startIndex+sortArr[prop])*1);
mergeCells(datas,startIndex,startIndex+sortArr[prop],"secondIndicator",target)
}else{
phaseCount +=1+",";
}
}
}*/
}
三 可编辑并保存
onClickCell: function(field, value, row, $element) {
if ($element.html() == "-") {
$element.html("")
}
$element.attr('contenteditable', true);
$element.blur(function() {
var index = $element.parent().data('index');
var tdValue = $element.html();
$('#bootstrap-table').bootstrapTable('updateCell', {
index: index,
field: field,
value: tdValue
});
var datas = $('#bootstrap-table').bootstrapTable('getData', true);
mergeTable2(datas,"bootstrap-table");
});
},
四 新增删除一行
//按钮
{
title : '操作',
formatter:function (value, row, index) {
var actions = [];
actions.push('<i style="color:red;vertical-align: middle" οnclick="deleteRow2(\'bootstrap-table\',' + index + ')" class="glyphicon glyphicon-trash"></i>');
actions.push(' <i style="color:green;vertical-align: middle" οnclick="insertRow2(\'bootstrap-table\',' + index + ')" class="glyphicon glyphicon-plus-sign"></i></div>');
return actions;
}
}
/*添加行方式一 */
function insertRow(index){
$("#bootstrap-table").bootstrapTable('insertRow', {
index: index + 1,
row: {}
});
};
/*添加行方式二 带有值*/
function insertRow(index){
$("#bootstrap-table").bootstrapTable('insertRow', {
index: 0,
row: {
id: '',
name: '',
price: ''
}
});
}
/*添加行方式三 splice*/
var datas = $("#" + tableId).bootstrapTable(('getData'));
datas.splice(index, 0,value); //index表示插入的位置 0表示不删除 value表示新增元素
$("#" + tableId).bootstrapTable('load', datas);
//删除行
//方式一 field value
function deleteRow(tableId,field,value){
$('#' + tableId).bootstrapTable('remove', {
field:field,
values: [value]
});
};
//方式二 主键
$('#exampleTable').bootstrapTable('removeByUniqueId', value);
//方式三 splice删除数组元素方法
var datas = $("#" + tableId).bootstrapTable(('getData'));
datas.splice(index, 1);
$("#" + tableId).bootstrapTable('load', datas);
五 获取数据
var data = $("#" + tableId).bootstrapTable(('getData'));