boottstrap-table 조합 헤더 의 실현 방법

최근 에 표 스타일 을 만들어 야 합 니 다.표 머리 를 조합 해 야 합 니 다.지금 만 든 것 을 공유 하 겠 습 니 다.
 1.효과 도

2.html 코드

 <table id="table"></table> 

3.javascript 코드

$("#table").bootstrapTable({
      dataType: "json",
      method: 'get',
      contentType: "application/x-www-form-urlencoded",
      cache: false,
      url:"../data/mergeData.json",
      columns:[

        [
          {
            "title": "      ",
            "halign":"center",
            "align":"center",
            "colspan": 5
          }
        ],
        [
          {
            field: 'name',
            title: "    ",
            valign:"middle",
            align:"center",
            colspan: 1,
            rowspan: 2
          },
          {
            title: "  ",
            valign:"middle",
            align:"center",
            colspan: 2,
            rowspan: 1
          },
          {
            title: "  ",
            valign:"middle",
            align:"center",
            colspan: 2,
            rowspan: 1
          }
        ],
        [
          {
            field: 'mideaNum',
            title: '  ',
            valign:"middle",
            align:"center"
          },
          {
            field: 'mideaPercent',
            title: '  ',
            valign:"middle",
            align:"center"
          },
          {
            field: 'panasonicNum',
            title: '  ',
            valign:"middle",
            align:"center"
          },
          {
            field: 'panasonicPercent',
            title: '  ',
            valign:"middle",
            align:"center"
          }
        ]
      ]
    })

columns 에 세 개의 배열 을 저장 합 니 다:
첫 번 째 그룹 은 표 의 제목 정 보 를 저장 합 니 다.그 중의 colspan 은 전체 표 의 모든 열 입 니 다.
두 번 째 그룹 은 표 의 두 번 째 줄 제목 을 저장 합 니 다.그 중에서 field 는 name 의 필드 에 대응 하 는 크로스 필드 입 니 다.이 필드 는 mergeData.json 의 name 과 대응 합 니 다.colspan 과 rowspan 은 이 필드 가 차지 하 는 열 수 와 줄 수 이 고 다른 필드 는 이와 유사 합 니 다.
세 번 째 그룹 은 표 의 세 번 째 줄 제목 을 저장 하고 mergeData.json 의 데이터 와 대응 합 니 다.
4、mergeData.json

 [
   {"name":"  ","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"},
   {"name":"  ","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"}
 ]

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.