bootstrapTable mergeCells

  • question
    ref

    make the some content merge by the remark

  • resolution

    • index.html
    
<html>
<head>
    <title>title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./bootstrap-table/bootstrap-table.min.css">
head>
<body>
    <h1>tableh1>

    <table id="table"
               data-toggle="table"
               data-toolbar="#toolbar"
               data-height="400"
               data-url="../json/data1.json">
            <thead>
            <tr>
                <th data-field="id">IDth>
                <th data-field="name">Item Nameth>
                <th data-field="price">Item Priceth>
            tr>
            thead>
            <tbody>
            <tr>
                <td>1td><td>1td><td>1td>
            tr>
            <tr>
                <td>1td><td>1td><td>1td>
            tr>   
            <tr>
                <td>3td><td>3td><td>3td>
            tr>
            <tr>
                <td>3td><td>3td><td>3td>
            tr>
            <tr>
                <td>3td><td>3td><td>3td>
            tr>
        tbody>
        table>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">script>
    <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js">script>
    <script type="text/javascript" src="./bootstrap-table/bootstrap-table.min.js">script>
    <script type="text/javascript" src="./index.js">script>
body>
html>
  • index.js
  $(document).ready(function(){
    var columnName="name";
    mergeTable(columnName);

});
function mergeTable(field){
    $table=$("#table");
    var obj=getObjFromTable($table,field);

     for(var item in obj){  
        $("#table").bootstrapTable('mergeCells',{
        index:obj[item].index,
        field:field,
        colspan:1,
        rowspan:obj[item].row,
        });
      }


}

function getObjFromTable($table,field){
    var obj=[];
    var maxV=$table.find("th").length;

    var columnIndex=0;
    var filedVar;
    for(columnIndex=0;columnIndex$table.find("th").eq(columnIndex).attr("data-field");
        if(filedVar==field) break;

    }
    var $trs=$table.find("tbody > tr");
    var $tr;
    var index=0;
    var content="";
    var row=1;
    for (var i = 0; i <$trs.length;i++)
    {   
        $tr=$trs.eq(i);
        var contentItem=$tr.find("td").eq(columnIndex).html();
        //exist
        if(contentItem.length>0 && content==contentItem ){
            row++;
        }else{
            //save
            if(row>1){
                obj.push({"index":index,"row":row});
            }
            index=i;
            content=contentItem;
            row=1;
        }
    }
    if(row>1)obj.push({"index":index,"row":row});
    return obj; 
}
  • img
    这里写图片描述

你可能感兴趣的:(前端)