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

一。有框线 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>
二。合并 在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'));
<div class="modal fade" id="colorModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
        <div class="modal-dialog" style="wi...
                                    今天运用了bootstrap的switch的控件，然后我想当点击switch的时候，会有一些dom的操作，但是我看了官方文档，里面的js拿过来使用的时候，是没有任何效果的
我的switch写法：
class="checkbox checkbox-switch">
label>
input
id="mySwitch"
type="checkbox"
data-on-t
                                    [size=medium][color=darkred]show.bs.modal  [/color]       
show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的relatedTarget 属性进行访问。    
[color=darkred]shown.bs.modal [/color]   
此事件在模态框已经显示出来（并且同时在 CS...
                                    一、问题描述：bootstrap table中每行有一个input框，要对每个input进行检查数值是否在1~10之间（可保留小数点后一位）的数值，每次bind事件之前没有解绑事件，造成点击alert事件次数逐次递增，最后死循环
二、解决方案：每次绑定事件之前进行解绑
//判断输入值为1与10之间，可保留小数点一位
            $("input[name='Self...
                                    今天就bootstrap-table行添加、修改、删除及取值作出一点小分析和自己的实际运用经验：效果：html：    &lt;div class="eui-sqd-title" style="margin-top:20px;"&gt;
   &lt;b&gt;携带介质&lt;/b&gt;
   &lt;div class="rfloat" id="medium_toolbar&am
                                    BootStrap作为目前比较流行的一款前端框架，平时开发中也用到的很多，之前在写项目页面用的Bootstrap，数据展示用的BootStrap Table。因为项目需求，需要对表格中某些字段可以直接在表格中编辑保存。
对于BootStrap Table表格内编辑这里整理了两种方法。想了解BootStrap Table的小伙伴可以移步到Bootstrap Table数据表格的使用指南。
第一种方法
通过contenteditable属性设置元素的内容是可编辑。
优点：简单，代码量少。
缺点：由于BootSt
@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, 
    <meta charset="UTF-8">
    <title>CN_TEST1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
一。有框线 class=“table-bordered”

二。合并在onLoadSucess

三可编辑并保存

四新增删除一行

五获取数据

一。有框线 class=“table-bordered”

二。合并 在onLoadSucess

三 可编辑并保存

四 新增删除一行

五 获取数据

二。合并在onLoadSucess

三可编辑并保存

四新增删除一行

五获取数据
