1. 부트 스트랩 테이블의 도입
부트 스트랩 테이블의 도입과 관련하여 일반적으로 두 가지 방법이 있습니다.
1. 소스 코드를 직접 다운로드하여 프로젝트에 추가하십시오.
부트 스트랩 테이블은 부트 스트랩의 구성 요소이므로 부트 스트랩에 따라 다릅니다. 먼저 부트 스트랩에 대한 참조를 추가해야합니다.
2. 우리의 마법 같은 너겟을 사용하십시오
Nuget을 열고이 두 패키지를 검색하십시오
부트 스트랩은 이미 최신 3.3.5이므로 직접 설치할 수 있습니다.
부트 스트랩 테이블의 버전은 실제로 0.4로 너무 사기입니다. 따라서 블로거는 부트 스트랩 테이블 패키지가 소스 코드에서 직접 다운로드 할 것을 제안합니다. 부트 스트랩 테이블의 최신 버전은 1.9.0 인 것 같습니다.
이 기사의 배경이 소개됩니다.
최근 고객은 수요를 높이고 휴대 전화를 통해 잘 표시 될 수있는 원래 관리 시스템을 최적화하기를 원했습니다. 그는 두 가지 해결책을 생각했습니다.
A 계획 : 원래 페이지를 유지하고 휴대 전화에 적합한 새로운 페이지 세트를 설계하십시오. 휴대폰에 액세스 할 때 M.ZHY.com (모바일 페이지)을 입력하고 PC 장치에 액세스 할 때 www.zhy.com (PC Page)을 입력하십시오.
솔루션 B : 부트 스트랩 프레임 워크를 사용하여 원본 페이지를 교체하고 휴대 전화, 태블릿 및 PC 장치에 자동으로 적응합니다.
솔루션 A를 사용하려면 인터페이스 세트를 설계하고 페이지에 적합한 인터페이스를 다시 작성해야합니다. 시간과 비용 문제를 고려 하여이 프로젝트는 솔루션 B를 채택합니다.
2. 효과 디스플레이
2. 부트 스트랩 테이블에 대한 간단한 소개
부트 스트랩 테이블은 ajax를 사용하여 JSON 형식의 데이터를 얻는 가벼운 테이블 플러그인입니다. 페이지 매김 및 데이터 충전은 매우 편리하며 국제화를 지원합니다.
3. 사용 방법
1. JS 및 CSS를 소개합니다
<!! src = "js/bootstrap/jquery-1.12.0.min.js"type = "text/javaScript"> </script> <script src = "js/bootstrap/bootstrap.min.js"> </script> <script src = "js/bootstrap/bootstrap-table.js"> </script> src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table-zh-cn.js"> </script>
2. 테이블 데이터 충전
부트 스트랩 테이블에서 데이터를 얻는 두 가지 방법이 있습니다. 하나는 테이블의 Data-URL 속성을 통해 데이터 소스를 지정하고 다른 하나는 JavaScript를 통해 테이블을 초기화하여 데이터를 얻을 때 URL을 지정하는 것입니다.
<테이블 데이터-토글 = "테이블"> <tead> ... </tead> </table> ...
$ ( '#table'). 부트 스트랩 가능 ({url : 'data.json'});두 번째 방법은 첫 번째 방법보다 복잡한 데이터를 처리 할 때 더 유연합니다. 일반적으로 두 번째 방법은 테이블 데이터를 채우는 데 사용됩니다.
$ (function () {// 1. 초기화 테이블 var otable = new tableInit (); otable.init (); // 2. 초기화 버튼의 클릭 이벤트/ * var obuttoninit = new buttoninit (); obuttoninit.init (); */}); var tableInit = function () {var otableInit = new Object (); // 테이블 초기화 otableInit.init = function () {$ ( '#tradeList'). bootStraptable ({url : '/vendermanager/tradeList', // 요청 url (*) 메소드 : 'post', // 요청 메소드 (*) 도구의 '#ToolBar', // 도구 : // strue, // when 캐시, 기본값은 사실이므로 일반적 으로이 속성을 설정해야합니다 (*) Pagination : True, // PAGIGE (*) SORMOLE : // SORT SORMORDER : "ASC", // 정렬 방법 QueryParams : otableInit.queryparams, // Pageation 매개 변수 (*) SidePagination : // Page Method : // Server PagePination (*). // 하위로드 할 첫 페이지 초기화, 기본 첫 페이지 페이지 : 50, // 페이지 당 기록 된 행 수 : [*) Pagelist : [10, 25, 50, 100], // 선택할 페이지 당 행 수 : true, clicktoselect : true, true, // line height, // line height, // 라인 높이가 자동으로 설정되어 있지 않은지. 레코드의 수, "ID", // 각 행의 고유 식별은 일반적으로 주요 키 열차 CardView입니다. 거짓, // 세부 사항보기 세부 사항 : // 부모 및 자식 테이블 열을 수행합니다. 필드 : '영수증', 'transaction time'}, {field : 'price', title : 'monder'}, {field : 'coin_credit', 제목 : '입력 코인'}, {field : 'bill_credit', 제목 : '입력 banknote'}, {field : 'changes', {transport ', {tradetype' }, {field : 'goodmachineid', 제목 : 'Freighter Number'}, {field : 'inneridName', 제목 : 'Cargo Lane Number'}, {field : 'goodsname', 제목 : '제품 이름'}, {field : 'changestatus', 'payment'}, 'sendstatus', plip : '}); }; // 쿼리 매개 변수를 가져옵니다. 이 변경이 변경되면 컨트롤러도 동일한 한계로 변경해야합니다. params.limit, // 페이지 크기 오프셋 : params.offset, // page number sdate : $ ( "#strattime"). val (), edit : $ ( "#endtime"). val (), sellerid : $ ( "#sellerId"), orderD : $ ( "#val (") $ ( "#cardnumber"). val (), maxrows : params.limit, pageindex : params.pagenumber, portid : $ ( "#portid"). val (), cardnumber : $ ( "#cardnumber"). val (), tradetype : $ ( 'input : radio [name = "pradetype"]. val ()). 성공 : $ ( 'input : radio [name = "success"] : checked'). val (),}; 반환 온도; }; otableInit을 반환합니다. };필드 필드는 데이터가 표시되기 전에 서버가 반환 한 필드에 해당해야합니다.
3. 백그라운드에서 데이터를 가져옵니다
에이. 서블릿은 데이터를 얻습니다
bufferedReader bufr = new bufferedReader (new inputStreamReader (request.getInputStream (), "utf-8"); StringBuilder sbuilder = new StringBuilder ( ""); 문자열 temp = ""; while ((temp = bufr.readline ())! = null) {sbuilder.append (temp); } bufr.close (); 문자열 json = sbuilder.toString (); jsonobject json1 = jsonobject.fromobject (json); String sdate = json1.getString ( "sdate"); //이 방법을 통해 프론트 엔드 데이터를 가져옵니다 ...비. SpringMVC 컨트롤러의 해당 방법은 데이터를 얻습니다
public jsonresult getDepartment (int limit, int offset, string orderid, String sellerid, portid, cardnumber, success, maxrows, tradetype) {...}4. Pagination (가장 많은 문제에 직면하는 페이지)
Pagination을 사용하면 서버 측에서 반환 된 데이터에는 행과 총계가 포함되어야하며 코드는 다음과 같습니다.
... <br> gblst = sqlado.gettradelist (sql, pageindex, maxrows); jsonarray jsondata = new jsonarray (); jsonobject jo = null; for (int i = 0, len = gblst.size (); i <len; i ++) {tradebean tb = gblst.get (i); if (tb == null) {계속; } jo = new JsonObject (); jo.put ( "id", i+1); jo.put ( "liushuiid", tb.getliushuiid ()); jo.put ( "price", string.format ( "%1.2f", tb.getPrice ()/100.0)); Jo.put ( "Mobilephone", tb.getMobilephone ()); jo.put ( "채권", Toolbox.getymdhms (tb.getReceivetime ())); jo.put ( "상인 타입", clsconst.trade_type_des [tb.getTradetype ()]); jo.put ( "changestatus", (tb.getchangestatus ()! = 0)? "성공": "실패"); jo.put ( "changestatus", (tb.getchangestatus ()! = 0)? "성공": "실패"); jo.put ( "sendstatus", (tb.getSendStatus ()! = 0)? "성공": "실패"); jo.put ( "Bill_credit", String.format ( "%1.2f", tb.getbill_credit ()/100.0)); jo.put ( "Changes", String.format ( "%1.2f", tb.getchanges ()/100.0)); jo.put ( "goodroadid", tb.getgoodroadid ()); jo.put ( "smscontent", tb.getsmscontent ()); jo.put ( "OrderId", tb.getOrderId ()); jo.put ( "goodsname", tb.getgoodsname ()); jo.put ( "InneridName", tb.getInnerIdName ()); jo.put ( "xmlstr", tb.getxmlstr ()); jsondata.add (Jo); } int totalcount = sqlado.getTraderOwsCount (SQL); jsonobject jsonobject = new jsonobject (); jsonObject.put ( "행", JSONDATA); // jsonArray jsonObject.put ( "Total", TotalCount); // Total Records Out (jsonObject.ToString ()); <br> ...5. Pagination 인터페이스의 내용 소개
프론트 엔드는 PAGED 데이터를 가져오고 코드는 다음과 같습니다.
... <br> otableInit.queryparams = function (params) {var temp = {// 여기의 키 이름과 컨트롤러 변수 이름은 항상이어야합니다. 이 변경이 변경되면 컨트롤러도 동일한 한계로 변경해야합니다. Params.limit, // 오프셋의 레코드 수 반환 온도; }; <br> ...백엔드는 PAGED 데이터를 가져오고 코드는 다음과 같습니다.
... <br> int pageIndex = 0; int offset = thoombox.filterInt (json1.getString ( "Offset")); int limit = toolbox.filterint (json1.getString ( "limit")); if (Offset! = 0) {pageIndex = Offset/Limit;} pageIndex+= 1; // 몇 페이지 <br> ...4. 다른
Bootstrap3은 IE8 브라우저와 호환됩니다! 기사를보십시오 : //www.vevb.com/article/83366.htm
충분히 배우지 못했다면 여기를 클릭하여 배우고 멋진 주제를 첨부 할 수 있습니다 : 부트 스트랩 학습 자습서
위는이 기사에 관한 것입니다. JS 테이블 구성 요소 아티팩트 부트 스트랩 테이블을 더 잘 배우는 데 도움이되기를 바랍니다.