bootStrap高级进阶表格合并可编辑删除添加行监听事件在onclick $element.blur(function(

最新推荐文章于 2024-06-21 10:45:22 发布

飘然生

最新推荐文章于 2024-06-21 10:45:22 发布

阅读量737

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/weixin_44635157/article/details/103684952

版权

java 专栏收录该内容

260 篇文章 4 订阅

订阅专栏

下拉框

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('&nbsp;<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'));

飘然生

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
bootStrap高级进阶表格合并可编辑删除添加行监听事件在onclick $element.blur(function(

一。有框线 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&...
复制链接

扫一扫