우선, 간단한 페이지 양식입니다. 테이블을 그리는 일반적인 방법으로 HTML 테이블을 작성한 다음 JS를 통해 특수 스타일 및 기타 작업을 제어 할 수 있습니다 (이점은 테이블이 더 직관적이며 테이블 스타일을 조정하는 것이 편리하며 속도가 빠릅니다).
물론 페이지에 테이블 태그를 넣을 수 있으며 모든 후속 데이터와 스타일을 JS를 통해 제어 할 수 있습니다. 나중에 말할 것입니다.
PS : 영어 API 및 예제가 포함 된 플러그인의 공식 웹 사이트입니다. http://bootstrap-table.wenzhixin.net.cn/zh-cn/
또한 사용하기 전에 Bootstrap의 관련 CSS, JS, JQuery 및 Bootstrap-Table CSS, JS 이상을 소개하십시오.
1. HTML 양식 방법
예 1 : 요구 사항, 간단한 테이블 데이터 프리젠 테이션, 헤더는 두 행이며 위아래로 떠 다니는 화살표가 있습니다.
분석 : 매우 간단합니다. 구현하려면 HTML 만 있으면됩니다. 일반 테이블에 따라 그리고 부트 스트랩 테이블의 고유 한 사용자 정의 속성을 추가하십시오. JS를 사용하지 않으면 초기 테이블 태그에 데이터 토글을 추가하십시오.
HTML 코드 :
<div> <table data-toggle = "table"data-height = "268"id = "tablel01"> <thead> <tr> <th data-field = "lhc"data-rowspan = "2"data-align = "center"data-valign = "middle"> 소비 </th> <th data-field = "dr."data-colspan = "data-align ="Menter " data-valign = "middle">이 날 </th> <th data-field = "bz"data-colspan = "3"data-align = "middle-valign ="middle "> 이번 주 </th> <th data-field ="에 의해 "data-colspan ="3 "data-align ="center "data-valign ="middle "> data-align = "center"data-valign = "middle">이 문제 </th> <th data-field = "drtb"data-align = "center"data-valign = "middle"> weance </th> <th data-field = "drhb"data-align = "center"data-valign = "middle"> moon-month </th> <th data-field ""bzb "" ""BzB "" " data-valign = "middle">이 문제 </th> <th data-pield = "bztb"data-align = "center"data-valign = "middle"> 년 연말 </th> <th data-align = "bzhb"data-align = "center"data-valign = "middle"> moon "> moon"> th data-field = "data-align ="center " data-valign = "middle">이 문제 </th> <th data-field = "bytb"data-align = "center"data-valign = "middle"> 1 년도 </th> <th data-align = "byhb"data-align = "center"data-valign = "middle"> moq </th> </tread> <tbod> <td> coal 볼륨 </td> <td> 21341 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 0.31 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-up'> 0.21 </td> <td> 334322 </td> class = 'Glyphicon Glyphicon-Arrow-down'> </i> 1.13 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'Glyphicon Glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-up '> </i> 2.94 </td> </tr> <tr> <td> 수신 석탄 볼륨 </td> <td> 76573 </td> <td> <i class = glyphicon Glyphicon-Arrow-Down '> </i> 4.21 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 4.21 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-up '> 1.45 </td> <td> </td> class = 'Glyphicon Glyphicon-Arrow-down'> </i> 4.35 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-up'> </i> 2.75 </td> <td> 44225 </td> <td> <i class = 'Glyphicon Glyphicon-arrow-down '> </i> 0.74 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-up '> </i> 3.45 </td> </tr> <tr> <td> 석탄 소비 </td> <td> 43363 </td> <td> <class = i class = i class ='glyphicon Glyphicon-arrow-down '> </i> 0.31 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-up '> </i> 0.21 </td> <td> 32422 </td> <td> <i class ='glyphicon glyphicon-arrow down '> 1.13 </td> class = 'Glyphicon Glyphicon-Arrow-down'> </i> 1.13 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-up'> </i> 4.21 </td> <td> 13345 </td> <td> <i class = 'Glyphicon Glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-up '> </i> 2.94 </td> </tr> <tr> <td> 수 들어되는 석탄 볼륨 </td> <td> 34624 <td> <td> <i class = glyphicon Glyphicon-arrow-down '> </i> 4.35 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-up '> </i> 1.23 </td> <td> 452346 </td> <td> <i class ='Glyphicon glyphicon-arrow down '> </td> </td> class = 'Glyphicon Glyphicon-Arrow-Up'> </i> 0.05 </td> <td> 94524 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 2.21 </td> <td> <i class = 'Galphicon Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> 석탄 소비 </td> <td> 21341 </td> <td> <i class ='Glyphicon-Arrow-Down '> </i> 0.31 </td> <td> <i class ='Glyphicon Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <i class ='Glyphicon glyphicon-arrow down '> 1.13 </td> Class = 'Glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 2.21 </td> <td> <i class = 'Galphicon Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> 석탄 소비 </td> <td> 21341 </td> <td> <i class ='Glyphicon-Arrow-Down '> </i> 0.31 </td> <td> <i class ='Glyphicon Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class ='Glyphicon glyphicon-arrow down '> 2.21 </td> Class = 'Glyphicon Glyphicon-arrow-up'> </i> 2.94 </td> </tr> <tr> <td> 석탄 소비 </td> <td> 21341 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> 0.31 </td> <td> Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <i class ='Glyphicon glyphicon-arrow down '> 1.13 </td> Class = 'Glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 2.21 </td> <td> <i class = 'Galphicon Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> 석탄 소비 </td> <td> 21341 </td> <td> <i class ='Glyphicon-Arrow-Down '> </i> 0.31 </td> <td> <i class ='Glyphicon Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class ='Glyphicon glyphicon-arrow down '> 2.21 </td> Class = 'Glyphicon Glyphicon-arrow-up'> </i> 2.94 </td> </tr> <tr> <td> 석탄 소비 </td> <td> 21341 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> 0.31 </td> <td> Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <i class ='Glyphicon glyphicon-arrow down '> 1.13 </td> Class = 'Glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'Glyphicon Glyphicon-Arrow-Down'> </i> 2.21 </td> <td> <i class = 'Galphicon Glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> 석탄 소비 </td> <td> 21341 </td> <td> <i class ='Glyphicon-Arrow-Down '> </i> 0.31 </td> <td> <i class ='Glyphicon Glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 1.13 </td> <td> <i class ='Glyphicon Glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Down '> </i> 2.21 </td> <td> <i class ='Glyphicon Glyphicon-Arrow-Up '> </i> 2.94 </td> </tbody> </table> </div>
예제 2 : 요구 사항 : 두 번째 테이블 이후 진행 상황을 표시하는 사용자 정의 셀이 있으며 첫 번째 행에는 총 통계 디스플레이가 필요합니다. 이 두 기능은 사용자 지정 행과 열을 설정하기 위해 JS를 사용해야합니다.
HTML 코드 :
<div> <table data-toggle = "table"data-height = "268"id = "tablel02"> <thead> <tr> <th data-field = "id"data-align = "center"data-valign = "middle"> serial number </th> <th data-field = "gys"data-align = "matevalign ="<th> <th> <th> <th> <th> <th> <th> <th>. data-align = "center"data-valign = "middle"> Variety </th> <th data-field = "rz"data-align = "center"data-valign = "middle"> carbon value </th> <th data-field = "mj"data-align = "center"data-valign = "middle"> coal price </th> <th data-field = "bmdj" "Center" Data-Valign = "Middle"> Unit Coal </th> <th data-field = "drlm"data-align = "center"data-valign = "middle"> 누적 석탄 </th> <th data-align = "ljlm"data-align = "center"data-valign = "Middle"> 누적 석탄 </th> <th data-field = "yjhl"data-align = "Center" data-valign = "middle"> 월간 계획 볼륨 </th> <th data-field = "yjhjd"data-align = "center"data-valign = "middle"data-formatter = "progress"> 월간 계획 완료 진행 </td> <td> 2 </td> <td> shuangxin 채굴 </td> <td> 저 술 푸르 석탄 </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 <td> 22%</td> </tr> <td> 3 </td> <td> yitai co. Ltd 석탄 </td> <td> </td> <td> </td> <td> </td> <td> 20041.86 </td> <td> 90000 </td> <td> 100%</td> </td> <td> aidi angern </td> <td> <td> 석탄 </td> <td> </td> <td> </td> <td> </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0%</td> </tr> <td> 6 <td> hengtai coal </td> Medium> Medium and High Sulpuer 석탄 </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 18265.56 </td> <td> 0 </td> <td> 22%</td> </td> <td> 7 7 7 </td> </td> 유황 석탄 </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 채굴 </td> <td> 저 술 푸르 석탄 </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22%</td> <tt> <td> 9 <td> <td> 채굴 </td> <td> 저-설파 석탄 </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 <td> 22%</td> </td> </td> </td> </td> </td> </td> </td>
JS 코드 :
// 총 (축적 된 석탄, 월간 계획)을 계산하는 데 사용되는 변수를 선언합니다 var yjharr = []; var ljlmarr = []; // 사용자 정의 열 함수 진행 (값, 행) {var width = parseint (row.yjhjd); var red = '#e63737'; blue = ' #b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'height : 20px; 테두리 : 1px solid #b6ccf4;'> '> <span style ='display; float : 왼쪽; width :"+width+"%; (width> = 100? red : blue)+"; '>"> "+value+"</span> </div> "} // 총 값 함수를 계산하는 메소드 yjhtotal () {var subyjh = 0; var sublm = 0; var row = []; for (for) i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} j = 0; 1, gys : 'total', pz : ', rz :', ', mj :', bmdj : '', drlm : ', ljlm : ljlm : audljlm.tofixed (2), yjhl : subyjh, yjhjd :'107%'}); 열}분석 : 사용자 정의 행과 열은 데이터 포름라는 데이터를 추가해야합니다.
둘 : JS 방법
이 방법을 통해 테이블의 매개 변수를 설정하는 것이 매우 편리합니다.이 방법은 특히 요청 메소드 및 주소를 설정할 때 데이터를 처리하는 데 매우 편리합니다. 그러나이 프로젝트는 당분간 정적 페이지 일뿐입니다. 향후 데이터를 작성하십시오.
예 1 : 위와 동일합니다
HTML :
<div> <table id = "tabel01"> </table> </div>
JS :
// 테이블 플러그인 (표 1)은 $ ( '#tableL01')를 시작합니다. 부트 스트랩 가능 ({height : 268, // 시뮬레이션 된 데이터 열 : [{align : 'center', valign : 'middle :'lhc ','lhc ','sucume ', rowspan : 2},'center ','middle : ', 제목 :', 제목 : ', 제목' 'Day', Colspan : 3}, {Align : 'Center', 'Center', 'Middle', Field : 'BZ', 'BZ', 'BZ', '이번 주', '이번 주', ColSpan : 3}, {Align : 'Center', 'Middle :'Field : 'By', 'The The Month', Colspan : 3}], [valign : 'Middle', 'Middle', '', 'Middle' ressue '},'center ', valign :'middle ', field :'drtb ','drtb ', 제목 :'연도 ', 포맷터 : 트렌드}, {align :'center ', valign :'middle : 'drhb', 제목 : 'momentum', formatter : elign : 'valign :'middle ', title', ', indrues' {Align : 'Center', 'Middle', Field : 'BZTB', 제목 : '연도', Formatter : Trend}, {Align : 'Center', Valign : 'Middle', Field : 'BZHB', 'BZHB', 'Moon-Month', Formatter : 'Center', 'Centre', 'Middle', this ressue '}, {align :'center ', valign :'middle ', field :'bytb ','bytb ', 제목 :'연도 ', 포맷터 : 트렌드}, {align :'center ', valign :'middle : 'bytb', 제목 : '연도', formatter : valign : 'middle', 'middle', title ', the hhb', valign : 'middle', 'middle', 'middle', 'middle': 'Mono-Month', Formatter : Trend}]], 데이터 : [{id : 1, lhc : 'coming Stock ', Drbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb :'1.59 ', {id : 2, lhc : 스톡 ', drbq :'21341 ', drtb :'0.21 ', d rhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', 바이트 바이트 :'42613 ', bytb :'2.78 ', byhb :'1.59 ', int} 스톡 ', drBq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', 바이트 바이트 :'42613 ', bytb :'2.78 ', byhb :'1.59 ', {id : 4 : 4 : 4 : 4. 스톡 ', drbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb :'1.59 ', {id : 5, lhc 스톡 ', drbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq ::::'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb : 1.59'}, {6, <6, 스톡 ', drbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb :'1.59 ', {i d : 7, lhc :' Stock ', Drbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb :'1.59 ', {id : 89' Stock ', Drbq :'21341 ', Drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'3.16 ', bybq :'42613 ', bytb :'2.78 ' 스톡 ', drbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb :'1.59 ', {id : lhc :' 스톡 ', d rbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb :'1.59 '}, {id : lhc :' Stock ', Drbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb :'1.59 ', {id : lhc :' 스톡 ', drbq :'21341 ', drtb :'0.21 ', drhb :'0.33 ', bzbq :'35624 ', bztb :'1.62 ', bzhb :'3.16 ', bybq :'42613 ', bytb :'2.78 ', byhb :'1.59 ');////////////////////// 위아래로 플로팅 화살표 스타일 트렌드 (값, 행) {var trendicon = row.id%2 === 0? 'Glyphicon Glyphicon-Arrow-Down': 'Glyphicon Glyphicon-Arrow-up'; return "<i class = '+Trendicon+"'> "+Value end}.분석 : $ ( '#tableL01'). 부트 스트랩 가능 ({})은 플러그인의 시작 부분에있는 플래그, 테이블 매개 변수를 추가 한 다음 데이터에 다음과 같이 표시되며 열 매개 변수 및 테이블 데이터가 설정된 장소입니다. 이 항목의 대표적인 것은 테이블 헤더가 두 부분으로 나뉘어져 있으므로 두 개의 배열이 열 [{}] 및 [{}]에 추가되어야한다는 것입니다. 그들 모두는 이전에 배열로 작성되었으며 소스 코드는 열 길이를 가로 지르 셨습니다.
Example 2:
동일한 HTML에는 ID가있는 테이블 태그 만 필요합니다.
JS :
// 테이블 플러그인 (표 2) 시작 // 총 (축적 된 석탄, 월간 계획) var yjharr = []; var ljlmarr = []; $ ( '#tablel02'). 부트 스트랩 가능 ({height : 268, // 시뮬레이션 된 데이터 열 : [{align : 'center', 'id', 'id', 'id', 'id', 'id', ',' {Align : 'Center', 'middle', field : 'gys', 제목 : '공급자'}, {elign : 'center', valign : 'middle :'middle : 'pz', title :: 'Variety'}, {align : 'center', 'middle', 'rz', 'rz', 'caloric value', 'caloric value', 'caloric value', 'caloric value', 'MJ', 'Coal Price'}, {Align : 'Center', 'Center', 'Middle', 'Middle', Field : 'Bmdj', '표준 석탄 단위'}, '표준 석탄 단위'}, {Align : 'Center', 'Middle', 'Field :'Drlm ','Coal to the Day ', {Align :'Middle ','ljlm ','ljlm ' Day '}, {Align :'Center ', Valign :'Middle ', Field :'ljlm ','ljlm ', 제목 :'누적 석탄오고 '}, {align :'center ', valign :'middle ', field :'yjhl ', 제목 :'월간 계획 볼륨 '}, {valign :'valign : 'yjhjd', field : Progress ', Formatter : Progress}], 데이터 : [{id : 2, gys :'shuangxin mining ', pz :'낮은 황 Coal ', Rz :' ', MJ :' ', Bmdj :' ', drlm :', ljlm : '6686.08', yjhl : '30000', yjhjd : '22%'}, {id : 3, gys :'yitai co., ltd : '엔지니어링 Coal ', Rz :', MJ : '', Bmdj : '', d rlm : ', ljlm :'51888.72 ', yjhl :'70000 ', yjhjd : '74%'}, {id : 4, gys : 'jiayuan company', pz : 'medium and high sulfur Coal ', Rz :' ', MJ :', Bmdj : '', drlm : '', ljlm : '20041.86', yjhl : '90000', yjhjd : '100%'}, {id : 5, gys : 'Aidi 에너지', pz : '낮은 황', Rz : ', m j : '', bmdj : '', drlm : '', ljlm : '5191.08', yjhl : ', yjhjd :'0%'}, {id : 6, gys :'hengtai coal ', pz :'중간 고속 유황 Coal ', Rz :' ', MJ :' ', Bmdj :' ', drlm :', ljlm : '18265.56', yjhl : ', yjhjd :'0%'}, {id : 6, gys :'hengtai coal ', pz :'중간 고조의 석탄 ', Rz :', mj : '', bmdj : ',', drlm : ', ljlm :'18265.56 ', yjhl :', yjhjd : '0%'}, {id : 6, gys : 'hengtai coal', pz : '중간 고속 유황 Coal ', Rz :' ', MJ :' ', Bmdj :' ', drlm :' ', ljlm :'18265.56 ', yjhl :' ', yjhjd :'0%'}]}); // 시뮬레이션 데이터 종료 // 진행 막대 진행 상황 (valth = 행) {var width = parseint (Row.yjhjd); red = '#e63737'; var blue = '#b6ccf4'; yjharr.push (row.yjhl); ljlmarr.push (row.ljlm); return "<div style = 'height : 20px; 테두리 : 1px solid#b6ccf4; '> <span 스타일 = 'display : float : 왼쪽; 너비 : "+width+"%; 높이 : 높이 : 100%; 배경색 : "+(너비> = 100? 빨간색 : 파란색)+";'> "+value+"</span> </div)} // 전체 값을 계산하는 메소드 yjhtotal () {var subyjh = 0; var jlm = [var jlm = [for Row = (for Subyjh = 0; var awnjh = 0; Var awnlm). i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} i = 0; i <yjharr.length; i ++) {if (yjharr [i] == "") {yjharr [i] = 0;} subyjh+= parsefloat (yjharr [i]);} j = 0; h ({id : 1, gys : 'total', pz : ', rz :', mj : ', bmdj :', drlm : '', ljlm : subljlm, yjhl : subyjh, yjhjd : '107%'}); return 열}이것은 실제로 첫 번째 방법과 크게 다르지 않으며, 데이터에 사용자 정의 열을 넣고 설정하는 것입니다. 이해하기가 더 쉽습니다. 다른 매개 변수는 공식 웹 사이트를 참조하십시오. 데이터는 동적이며 온라인으로 추가하는 방법입니다. .BootStraptable ({})에 배치되는 한 많은 예가 있습니다.
위는 편집기가 소개 한 부트 스트랩 테이블 플러그인의 적응 형 고정 테이블 헤더입니다 (매우 유용함). 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!