부트스트랩에서 테이블 데이터를 얻는 방법

부트스트랩이 테이블 데이터를 얻는 방법: 1. 테이블 매개변수 url을 통해 이를 얻습니다. 2. "$.get()" 메소드를 통해 작동하고 테이블 매개변수의 데이터를 사용하여 데이터 형식을 수신하는 방법을 사용자 정의합니다.

이 문서의 운영 환경: Windows 7 시스템, 부트랩 버전 3.3.7, DELL G3 컴퓨터

부트스트랩은 테이블 데이터를 어떻게 얻나요?

부트스트랩 테이블 데이터를 얻는 두 가지 방법

데이터 가져오기는 일반적으로 두 가지 유형이 있습니다. 하나는 테이블 매개변수 url을 통해 json 데이터를 가져오는 것이고, 다른 하나는 $.get()을 통해 가져오는 것입니다. 두 구현의 효과는 동일하지만 데이터를 받을 때입니다. 약간 다릅니다. 두 가지 방법의 차이점을 각각 소개하겠습니다

1. 테이블 매개변수 url을 통해 가져옵니다. 여기서 url은 백엔드 인터페이스의 주소입니다. 최종 반환된 데이터는 테이블에 직접 렌더링됩니다. 그러나 여기서 주의할 점이 있습니다. 즉, 인터페이스에서 반환되는 json 형식은 표에 정의된 형식과 일치해야 합니다. 다음 예에 따르면 json에서 반환되는 데이터 형식은 다음과 같습니다.

{
    "id": 1,
    "name": "张三",
    "price" : "100"
}

코드 스니펫은 다음과 같습니다.

<table  id= "table" ></table>
$ ( &#39;#table&#39; ). bootstrapTable ({
url :  &#39;data1.json&#39; ,
columns :  [{
field :  &#39;id&#39; ,
title :  &#39;Item ID&#39;
},  {
field :  &#39;name&#39; ,
title :  &#39;Item Name&#39;
},  {
field :  &#39;price&#39; ,
title :  &#39;Item Price&#39;
} ]
});

그러나 반환된 json 형식이 다음과 같은 경우 테이블을 직접 렌더링할 수 없으며 열 매개변수의 포맷터를 사용하여 메서드를 사용자 정의해야 합니다.

아래 json의 경우 ID, 이름, 가격에 대해 각각 맞춤 메소드를 구현해야 합니다. 프런트엔드와 백엔드가 완전히 분리된 개발 모델의 경우 이 방법을 사용하여 데이터를 조작하는 것은 분명히 최적이 아닙니다.

{
    "errcode": "OK",
    "data_list": [
                   {
                        "id": 1,
                                    "name": "张三",
                                    "price" : "100"
                    }
               ]
}

2. $.get()을 통해 작동하면 백그라운드에서 반환된 데이터를 보다 유연하게 작동할 수 있습니다. 여기서는 테이블 매개변수의 데이터를 사용하여 데이터를 수신하는 메서드의 형식을 사용자 정의합니다.

코드 조각

<table  id= "table" ></table>
$.get(&#39;/data/&#39;, function(data){
$ ( &#39;#table&#39; ). bootstrapTable ({
columns :  [{
field :  &#39;id&#39; ,
title :  &#39;Item ID&#39;
},  {
field :  &#39;name&#39; ,
title :  &#39;Item Name&#39;
},  {
field :  &#39;price&#39; ,
title :  &#39;Item Price&#39;
} ]
data: formatData(data)
});
})
// 格式化数据
var formatData = function (data) {
var l = [] ;
for ( var i = 0 ; i < data.data_list.length ; i++) {
           var m = data.data_list[i]
var d = {
&#39;id&#39;: m. id ,
&#39;name&#39;: m. name ,
&#39;price&#39;: m. price ,
}
l. push(d)
}
return l
} ;

추천 학습: "부트스트랩 사용 튜토리얼"

위 내용은 부트스트랩에서 테이블 데이터를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!