집 > 기사 > 웹 프론트엔드 > Bootstrap Table API 중국어 버전(번역 문서)

Bootstrap Table API 중국어 버전(번역 문서)

angryTom원래의: 2019-08-20 14:57:526550검색

인터넷에 중국어 버전이 있지만 일부는 문자 그대로 번역되고 일부는 번역되지 않아 제가 직접 다시 번역할 예정입니다. 각 기사는 가능한 한 많은 정보로 번역될 것입니다. 내용은 영어 이상이며, 테이블 이름, 속성, 유형, 기본값은 번역되지 않습니다. 예: "class", "id" 등은 번역되지 않습니다. 잘못된 점을 신고해 주시면 시간이 지나면 수정하도록 하겠습니다. 감사합니다.

추천 튜토리얼: bootstrap 튜토리얼

1. "이름"은 $('#table').bootstrapTable({});의 중괄호 안에 쓸 수 있으며 원하는 값을 정의할 수 있습니다. , 예:

$("#realTime_Table").bootstrapTable({
		       search: true,
	            pagination: false,
	            pageSize: 15,
	            pageList: [5, 10, 15, 20],
	            showColumns: true,
	            showRefresh: false,
	            showToggle: true,
	            locale: "zh-CN",
	            striped: true
        });

2. "속성"은 다음과 같이 선언 테이블에 배치됩니다.

<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!>

 <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
      <thead>
          <tr >
              <th data-sortable="true" data-field="realTimeDate">日期</th>
              <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
              <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>

3. 정의를 반복하려면 선언 테이블에 이름을 쓰는 것보다 js에 속성을 쓰는 것이 더 간단합니다. 또는 그 반대의 경우도 있습니다(일부 속성은 반드시 작성해야 하며 해당 이름은 해당 속성을 활성화할지 여부를 나타냅니다)

테이블 옵션

jQuery.fn.bootstrapTable.defaults 파일에 정의됨

- 정의되지 않음 =>기본값은 기본 버튼 크기(btn)를 나타냅니다- xs =>초소형 버튼의 크기(btn-xs)
- sm =>작은 버튼의 크기 (btn-sm)
~ - 옵션은 기본, 위험, 경고 등입니다. - 작성 후 btn-기본(파란색), btn-위험(빨간색), btn-경고(노란색) 및 기타 형식으로 자동 변환되므로 사용하지 마세요. 이전에는 걱정하지 마세요. 기본값은 btn-default(흰색)입니다. - 초보자 튜토리얼을 참조하세요: iconsdata-icons 토글: 'glyphicon-list-alt 아이콘-목록-alt', 열: 'glyphicon-th icon-th', DetailOpen: 'glyphicon-plus icon-plus',}툴바, 페이징, 세부정보 보기에 사용되는 아이콘 정의Bootstrap 글꼴 아이콘Array - Bootstrap-table 사용량 확인data-Array - 즉, 서버에서 얻은 데이터는 "data.date/data.anything"과 같은 "." 연산자를 통해 얻은 다음 서버에서 보낸 필드 이름이 옵니다 dataFielddata- data-fieldStringrows 가져오기-예: {"name": "zz", "Age": 20}, 이름 및 Age가 키입니다. 이것이 서버에서 요청된 JSON인 경우 가능할 수도 있습니다. 각 열에 정의된 필드와 다르지만 모두 고유합니다ajaxdata-ajaxFunctionundefineㅋㅋㅋ true선언 체크박스가 있는 경우 헤더 행의 모두 선택 체크박스가 기본적으로 표시됩니다. 숨기려면 false로 설정하세요. (즉, 테이블의 첫 번째 행은 표시되지 않으며, 그 이후의 모든 항목은 표시되지 않습니다. 두 번째 줄이 표시됩니다) set 선택한 rowslientSort data-silent-sortBooleantrue전제 조건: sidePagination이 서버(서버)로 설정됨footerStyledata-footer- styleFunction{}바닥글 형식을 변경하려면 두 개의 매개변수가 필요합니다. 行-ROW: 이번 여행의 데이터-Index: 이번 여행의 인덱스 Function Rowstyle (Value, ROW, Index) {

Name Attribute Type 기본값 함수 설명

- data-toggle String table Jquery만 소개하면 됩니다. 트랩, 부트스트랩 테이블 패키지, 필요 없음 js에서 정의하여 사용할 수 있습니다
Data-toggle="table"은 기본적으로 작성됩니다. 일반적으로 사용되는 것에는 "tooltip, popover 등"이 포함됩니다. 여기서는 언급하지 않겠습니다

classes data-classes String table table-hover 테이블의 클래스 속성을 직접 정의하지 않은 경우 기본적으로 테두리가 생기며 해당 행 위에 마우스를 올리면 배경이 연한 회색으로 변합니다.

sortClass data-sort-class String undefine 테이블 td의 클래스 이름을 선언합니다. 이는 이 열 요소의 클래스 이름을 나타내며 정렬됩니다

height data-height Number undefine 테이블 높이

undefineText data-undefine-text String - 쓰기된 내용이 없을 때 기본 표시는 '-'

줄무늬입니다 data-striped Boolean false 기본값은 false입니다. true로 설정하면 테이블의 각 행 배경이 회색과 흰색으로 표시됩니다

sortName data-sort-name String undefine 정렬할 열 값을 정의하고 데이터 필드의 사용자 정의 이름을 작성합니다. 기본값은 정의되지 않습니다. 아래의 sortOrder와 함께 사용하면 열이 됩니다. 기본적으로 증가(asc)

sortOrder data-sort-order String asc 위와 함께 사용하면 기본적으로 해당 열이 증가됩니다(asc ; sort와 동일합니다) 부분적으로 차이점은 정렬 프로세스 중에 동일한 요소가 있으면 원래 순서가 변경되지 않는다는 것입니다. 원문에 또 다른 문장이 있습니다: (이 속성을 true로 설정한 경우) 이 줄에 '_position' 속성을 추가하겠습니다

iconsPrefix data-icons-prefix String glyphicon define 글꼴 라이브러리(FontAwesome의 경우 'Glyphicon' 또는 'fa'), "fa"를 사용할 때 FontAwesome을 참조하고 아이콘 속성과 협력하여 효과를 얻어야 합니다. Glyphicon은 Bootstrap에 통합되어 있으며 무료로 사용할 수 있습니다

iconSize data-icon-size String undefine 정의된 아이콘 크기:

Bootstrap 버튼 Object

{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down', paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up', 새로 고침: 'glyphicon-새로 고침 아이콘-새로 고침',

DetailClose: 'glyphicon-minus icon-minus' - 설명할 방법이 없습니다. 초보자 튜토리얼의 아이콘을 참조하세요: columns

- []기본 빈 배열은 JS, 필드에 정의되어 있습니다. 데이터 필드, 제목은 각 열의 이름 등입니다.

[]로드된 데이터를 참고하세요.

- 이름은 사용자가 정의한 각 열의 필드 이름이며, 이는 키를 통해서만 특정 행의 특정 열에 값을 할당할 수 있습니다.每-원본: 데이터 JSON의 각 줄에서 KEY

- ajax 메서드, jQuery의 ajax 메서드와 유사

method data-method String get 向服务器请求远程数据的方式，默认为'get'，可选'post'

url data-url String undefined 向服务器请求的url。
- 例如：server + "get_app_player"和server + 'get_channel_list'，两者都是向server（server是自己定义的，例如"http://kanshakan.nichousha.com/"）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息
下面看看原文：
- 向远程站点请求数据的URL
- 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：
Without server-side pagination（没有启用服务端分页 - data1.json）
With server-side pagination（启用服务端分页 - data2.json）

cache data-cache Boolean true 默认缓存ajax请求，设为false则禁用缓存

contentType data-content-type String application/json 请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。
- 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串

dataType data-data-type String json 期望从服务器获取的数据的类型，默认为json格式字符串

ajaxOptions data-ajax-options Object {} 向服务器请求ajax时的附加项，默认无附加
- 参考 jQuery.ajax()

queryParams

data-query-params

Function

function(params){
return params;}

当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。
      - queryParamsType="limit"，它的参数包括：limit，offset，search，sort，order Else
      - params包括：pageSize，pageNumber，searchText，sortName，sortOrder
      - 当return false，请求则终止

queryParamsType data-query-params-type String limit 默认"limit"，设置该属性用来发送符合RESTful格式的参数

responseHandler

data-response-handler

Function

function(res){
return res;}

在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）

pagination data-pagination Boolean false 默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示

paginationLoop data-pagination-loop Boolean true 默认true，分页条无限循环

onlyInfoPagination data-only-info-pagination Boolean false 前提：pagination设为true，启用了分页功能。
- 默认false，设为true显示总记录数

sidePagination data-side-pagination String client 设置在哪进行分页，默认"client"，可选"server"，如果设置 "server"，则必须设置url或者重写ajax方法
- 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：
Without server-side pagination（没有启用服务端分页）
With server-side pagination（启用服务端分页）

pageNumber data-page-number Number 1 前提：pagination设为true，启用了分页功能。
- 默认第1页，用于设置初始的页数

pageSize data-page-size Number 10 前提：pagination设为true，启用了分页功能。
- 기본적으로 페이지당 10개의 레코드가 표시되며, 이는 각 페이지에 표시되는 초기 레코드 수를 설정하는 데 사용됩니다

pageList data-page-list Array [10, 25, 50, 100 ] 전제 조건: 페이지 매김 페이징을 활성화하려면 true로 설정하세요.
- 기본값은 [10, 25, 50, 100]입니다. 즉, "페이지당 10/25/50/100 레코드 표시"를 선택하여 페이지당 표시되는 레코드 수를 설정할 수 있습니다.

selectItemName data -select-item-name String btSelectItem radio(라디오 버튼) 또는 checkbox(체크박스) 필드 이름

smartDisplay data-smart-display Boolean true 기본값은 다음과 같습니다. true, 촉각적으로(790bc03457618371a18929ef0b896705, ", `, '

search data-search Boolean false default false 상단에 검색창을 표시하지 않습니다. 검색창에 내용을 입력하면 검색이 시작됩니다

searchOnEnterKey data-search-on-enter-key Boolean false 기본값입니다. is false 활성화, true로 설정하면 활성화되며 기능이 위와 비교되어 검색 상자에 내용을 입력하고 Enter 키를 눌러 검색을 시작합니다

strictSearch data-strict-search Boolean false 정확한 검색을 활성화하려면 true로 설정하세요.

searchText data-search-text String "" 전제 조건: 검색이 true로 설정되고 검색 기능이 활성화되어 있습니다.
- 콘텐츠가 처음에 기본적으로 검색 상자에 표시됩니다.-검색 파일에 대한 시간 초과 설정(원문: 검색 화재에 대한 시간 초과 설정, 제가 잘못 쓴 것인지, 지식이 너무 좁은 것인지 모르겠습니다. "검색 화재"가 무엇을 의미합니까? 공식 API가 잘못된 것인가요?너무 혼란스러워요)

trimOnSearch data-trim-on-search Boolean true 기본값 true, 자동으로 공백 무시

showHeader data-show-header Boolean true 테이블 헤더를 표시하려면 기본값이 true이고, 숨기려면 false로 설정하세요.

showFooter data-show-footer Boolean false 기본값은 false로 테이블 바닥글을 숨깁니다. , 표시하려면 true로 설정하세요

showColumns data-show-columns Boolean false 열 드롭다운 메뉴를 숨기려면 기본값이 false이고, 표시하려면 true로 설정하세요

showRefresh data-show-refresh Boolean false 새로 고침 버튼을 숨기려면 기본값이 false이고,

showToggle data-show-toggle Boolean false을 표시하려면 true로 설정하세요. 보기 전환 버튼을 숨기려면 기본값은 false이고,

showPaginationSwitch data-show-pagination-switch Boolean false 을 표시하려면 기본값은 false입니다. 데이터 항목 수를 숨기려면 false입니다. 페이지 선택별로 true로 설정하여 표시

minimumCountColumns data-minimum-count-columns Number 1 열당 최소 드롭다운 메뉴 수

idField data-id -field String undefine 어떤 필드가 식별 필드인지 나타냅니다.

uniqueId data-unique-id String undefine 은 각 행의 고유 식별자를 나타냅니다.

카드뷰 data-card-view Boolean false 기본 false, 카드 보기(카드 보기)를 표시하려면 true로 설정

detailView data-card-view Boolean false 기본 false , 자세히 보기(세부 보기)를 표시하려면 true로 설정하세요

detailFormatter data-detail-formatter Function function(index, row, element){
return '';} 전제 조건: DetailView가 true로 설정되고 세부 정보 보기 표시가 활성화되어 있습니다.
– 세부정보 보기 형식 지정
- 세 번째 매개변수 요소를 통해 상세보기의 셀(특정 그리드)에 직접 추가되는 문자열을 반환합니다. 여기서 요소는 대상 셀의 jQuery 요소

searchAlign data-search-align 문자열 right 검색 상자의 위치, 기본값은 오른쪽(가장 오른쪽), 선택 사항은 왼쪽

buttonsAlign data-buttons-align String right 도구 모음 버튼의 위치 기본 오른쪽(가장 오른쪽), 선택 왼쪽

toolbarAlign data-toolbar-align String left 도구 모음 위치 사용자 정의, 기본 오른쪽(가장 오른쪽), 선택 왼쪽

paginationVAlign data-pagination-v-align String bottom 페이징 막대의 수직 위치, 기본 하단(하단), 선택적 상단, 둘 다(상단과 하단 모두 페이지 매김 막대가 있음)

paginationHAAlign data -pagination-h-align String right 페이징 막대의 가로 위치, 기본값은 오른쪽(가장 오른쪽), 선택 사항은 left

paginationDetailHAalign data-pagination-detail-h-align String left 해석이 너무 긴 경우 예를 들어 paginationDetail은 "1~8개 레코드 표시, 총 15개 레코드, 페이지당 8개 레코드 표시"이며 기본값은 왼쪽(가장 왼쪽), 선택 오른쪽

paginationPreText data-pagination-pre-text String 〈 예를 들어, 콘텐츠가 너무 많으면 하단의 가장 오른쪽 모서리에 다음과 같이 표시됩니다. "‹ 1 2 3 4 5 ›" 페이지 번호, 기본값은 가장 왼쪽 기호, 아래와 동일

paginationNextText data-pagination-next-text String > 위 항목 참조

clickToSelect data-click -to-select Boolean false 기본값 false는 응답이 없습니다. true로 설정하면 이 행의 아무 곳이나 클릭하면 이 행의 체크박스(체크박스) 또는 라디오박스(라디오 버튼)가 자동으로 선택됩니다.

singleSelect data-single-select Boolean false 기본값 false, true로 설정하면 확인란에서 행 하나만 선택할 수 있습니다

maintaintectioned

data-maintain-selected

boolean

false

sortable data-sortable의 상태를 유지하기 위해 true. Boolean true Default true, 모든 행 정렬을 비활성화하려면 false로 설정합니다(즉, 정렬 버튼이 각 열의 헤더에 표시되지 않습니다. data-sortable="true"에서 선언해야 합니다. , 활성화하기 위해 js로 작성됨)

- 기본값은 true, 자동으로 정렬하려면 false로 설정 data rowStyle

data-row-style🎜 🎜Function🎜🎜{}🎜🎜특정 줄의 형식을 변경하려면 두 개의 매개변수가 필요합니다. ㅋㅋㅋ - 행: 이 행의 데이터 🎜 - 색인: 이 행의 인덱스 🎜 클래스 및 CSS를 지원하며 사용법은 다음과 같습니다. 함수 rowStyle(행, 인덱스){🎜 return { 클래스: 'text-nowwrap 다른 클래스',🎜 CSS: {"color": "blue", "font-size": "50px"}🎜 }; }🎜🎜🎜🎜rowAttributes🎜🎜data-row-attributes🎜🎜Function🎜🎜{}🎜🎜 행의 속성을 변경하려면 두 개의 매개변수가 필요합니다. 🎜 - row: 이 행의 데이터 - index : 이 행의 인덱스 🎜 All 사용자 정의 속성이 지원됩니다. 🎜🎜🎜🎜customSearch🎜🎜data-custom-search🎜🎜Function🎜🎜$.noop🎜🎜사용자 정의 검색 기능(내장 검색 기능을 대체하는 데 사용됨)에는 하나의 매개변수가 필요합니다. 🎜 - 텍스트: 원하는 콘텐츠 🎜Usage 검색은 다음과 같습니다: 🎜function customSearch(text){🎜//데이터를 필터링하려면 'this.data'를 사용해야 합니다(데이터를 필터링하면 이 단어를 번역할 필요가 없는 것 같습니다). 'this.options.data'는 사용하지 마세요. }

customSort data-custom-sort Function $.noop 사용자 정의 정렬 기능(내장 정렬 기능을 대체하는 데 사용), 두 개의 매개변수 필요(이전 항목 참조 가능) :
sortName: 정렬이 필요한 열
- sortOrder: 정렬 방법
사용법: 위와 동일합니다. 걱정하지 마세요. 주석은 완전히 동일합니다.

locale data-locale String undefine 현지화(동사).
폴백을 허용하려면 현지화된 파일을 미리 로드해야 합니다. (간단히 말하면 사용할 파일을 사용할 수 없는 경우 경기장의 대체품 등 다른 것으로 대체할 수 있습니다. 대체품이 없는 경우, 누군가 부상을 입었을 경우 ; 그러면 짧은 지역 코드(예: 'fr-CA' 대신 'fr' 사용)
- 마지막은 남은 현지화 파일입니다(기본 파일은 로드할 파일이 없을 때 사용됩니다). )
나머지가 정의되지 않았거나 빈 문자인 경우 마지막으로 사용한 파일이 사용됩니다(현지화된 파일을 로드할 수 없는 경우 내장된 'en_US'가 사용됩니다)

CLASSSES 및 CSS를 지원하며 사용법은 다음과 같습니다.

Return { CSS: { "font-weight": "bold" } }; }

열 옵션(열 옵션)

은 jQuery.fn.bootstrapTable.columnDefaults 파일

에 정의되어 있습니다.data-fielddata-title- Bootstrap Tooltip 플러그인을 참조하세요. 이 열을 표시하려면 기본값은 true입니다. , 숨기려면 false로 설정하세요. switchabledata-switchableBooleantrue열을 표시하려면 기본값이 true이고, 열 항목의 탭을 비활성화하려면 false로 설정합니다. clickToSelectdata-click-to-selectBooleantrue기본값인 true는 응답하지 않습니다. false로 설정하면 이 행의 아무 곳이나 클릭해도 이 행의 확인란이 선택되지 않습니다. 자동으로 선택된(복잡한) 선택 윤곽) 또는 라디오박스(라디오 버튼) formatterdata-formatterFunctionundefine이 열이 필요한 개체입니다. ㅋㅋㅋ data-footer-formatterFunctionundefine에는 이 열에 대한 개체가 필요합니다. 换 Xiangge의 데이터 변환 기능에는 매개변수가 필요합니다: 이 함수는 바닥글의 특정 셀에 표시할 문자열의 형식을 반환(반환)해야 하며, 내용도 포함해야 합니다. sorter -b: 두 번째 필드 이름#🎜🎜 ## 🎜🎜 ## 🎜🎜#sortnamecellStyledata- cell- styleFunctionundefine특정 그리드에서 표시 스타일(스타일)을 변경하려면 세 가지 기능이 필요합니다. #🎜🎜 # : 필드 이름 클래스 및 CSS를 지원하며 사용법은 다음과 같습니다. function cellStyle(value, row, index, field) { 반품 { 클래스: 'text-nowrap 다른 클래스', CSS: {"color": "blue", "font-size": "50px"} }; ) 🎜#true#🎜🎜 #기본값은 true입니다. 이는 이 열의 데이터를 쿼리할 수 있음을 의미합니다.searchFormatter# 🎜🎜#BooleantrueBooleanfalse 문자열 건너뛰기 HTML에 삽입하고 특수 문자(쉼표가 없는 기호 뒤)를 바꿉니다:&,6580843315dd7804e35fd3743df832ea,",`,'

이벤트

定义事件的格式：

$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });

$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});

Name	Attribute	Type	기본값	함수 설명
radio	data-radio	Boolean	false	기본값 false는 라디오 표시(라디오 버튼), 설정 to true이면 라디오 폭이 고정된 것으로 표시됩니다
checkbox	data-checkbox	Boolean	false	기본값 false는 true로 설정하면 체크박스(체크박스)가 표시되지 않습니다. , 체크박스의 각 열 너비가 변경되었습니다.
String	undefine	은 표시되는 이름이 아닌 각 열의 필드 이름입니다. 헤더에 값을 할당할 수 있습니다. 이는 키와 동일하며 테이블		title
String	undefine	에서 고유합니다. 헤더에 표시됩니다. 원하는 경우 모든 헤더를 동일한 이름으로 설정할 수 있습니다. 프롬프트가 나타납니다
class	class/data-class	String	undefine	말할 것도 없고 그냥 클래스
rowspan	rowspan/data-rowspan	Number	undefine	각 그리드가 차지하는 행 수
colspan	colspan/data-colspan	Number	undefine	각 그리드가 차지하는 열 수
align	data- align	String	undefine	각 셀의 데이터 정렬은 다음과 같습니다: 왼쪽(왼쪽), 오른쪽(오른쪽), 가운데(가운데)
halign	data-halign	String	정의되지 않음	테이블 머리글 정렬 방법: 왼쪽, 오른쪽, 가운데
falign	data-falign	String	undefine	table 바닥글 정렬(테이블 발, 그냥 이렇게 번역하면 됩니다. 사실 어떤 식으로든) , 가볍게 번역할 수 있습니다. 알아두세요) 왼쪽(왼쪽), 오른쪽(오른쪽), 가운데(가운데)
valign	data -valign	String	undefine	각 그리드의 정렬 데이터 포함: 상단(상단), 중간(중앙), 하단(하단)
width	data-width	Number(단위:px 또는 %)	undefine	각 열의 너비입니다. - 맞춤 너비가 없으면 콘텐츠 너비에 따라 너비가 조정됩니다. - 표가 반응형으로 남아 있거나 설정된 너비가 콘텐츠 너비보다 작은 경우에도 너비는 계속 조정 가능합니다(클래스 또는 기타 속성에서 min-width 또는 max-width를 사용할 수 있음). - "%"를 단위로 사용할 수도 있습니다. 이 경우 bootstapTable은 백분율로 나누어집니다. "픽셀(픽셀 값)"을 사용하려면 숫자만 쓰면 됩니다(그렇지 않은 한). "%"를 추가하세요. 단위는 기본적으로 "px"입니다. 마음에 들지 않거나 더 명확하게 표시하려면 "px"를 추가할 수도 있습니다.)
sortable	data-sortable	Boolean	false	기본값은 false이며 기본적으로 표시됩니다. true로 설정하면
order	data-order	String	asc	기본값으로 표시됩니다. 정렬 방법은 "asc(오름차순)"이며 "desc(내림차순)"으로 설정할 수도 있습니다. - 위의 것과 조합해서 사용하지 않으면 정리가 안되는데, 올리고 내리는 것에 대해서는 또 어떻게 생각하시나요?
visible	data-visible	Boolean	true	열을 표시하려면 기본값이 true이고, 열을 숨기려면 false로 설정합니다. ，-예를 들어 특정 속성으로 정렬한 후 혼란스러워지는 자체 정의 인덱스 열을 숨기는 경우 여전히 매우 유용합니다. true



			-DATA: 모든 데이터 라인의 배열
events	data-events	Object	undefine	셀이 포맷터 기능을 사용하면 이벤트 리스너가 응답하고 4개의 매개변수가 필요합니다. : : jQuery 이벤트(이벤트 참조). - 값: 필드 이름 - 행: 행 데이터 - 인덱스: 이 행의 인덱스 예: 232aa8229057ed93338ecb89eaa906fc var OperateEvents = {'click .like': 함수(e, 값, 행, 인덱스) {}};
# ㅋㅋㅋ A: 첫 번째 필드 이름	🎜🎜#Data -sort -name	String	undefine	테이블 헤더의 기본 정렬 이름이나 열의 필드 이름 외에도 사용자 정의 정렬 이름을 사용할 수도 있습니다#对# 특별한 상황에 대해 설명하세요. - 열에 표시되는 콘텐츠는 다음과 같은 "html" 코드일 수 있습니다. & lt b & gt; 스팬 스타일 = "color: red" & lt; ;/span 0d36329ec37a2cc24d42c7229b69747a, 그러나 html 코드의 내용은 abc
				- 행: 행 데이터 - 인덱스: 이 행의 인덱스 - 필드: 행의 필드 이름
		# 🎜🎜#data-search-formatter		기본값 true, 형식이 지정된 데이터 쿼리를 사용할 수 있습니다 #🎜🎜 # escape#🎜 🎜# data-escape

-row: 선택한 노선의 필드명# -$ Element: 이번 여행의 DOM 요소 uncheck.bs.table# 🎜🎜#onCheckAllTriggered when 모든 행이 선택되면 필수 매개변수는 다음과 같습니다. - 행: 행의 필드 이름 배열 새로 선택한 행 #🎜 🎜#uncheck-all.bs.tablerows특정 행이 있을 때 트리거됩니다. (여러 행, 행)을 선택(확인)한 경우 필수 매개변수는 다음과 같습니다. 선택한 행의 필드 이름 배열 🎜🎜#특정 행(여러 행, 행)일 때 트리거됨 선택 취소되어 있습니다. 필수 매개변수는 다음과 같습니다: column-search.bs.table 번호, size triggered when 이 페이지에 표시되는 데이터 항목 수 변경 또는 페이지 번호 변경이 테이블을 쿼리할 때 트리거됨테이블의 뷰가 변경될 때 트리거됩니다.92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1

Methods

메서드 응답 정의 구문 $('#table').bootstrapTable('method', parameter);# 🎜🎜# - 확인하세요:

事件名	定义在jQuery中的事件名	参数	作用描述
onAll	all.bs.table	name, args	当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括： - name：事件名 - args：事件的数据
onClickRow	click-row.bs.table	row, $element, field	当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）： - row：哪一行（从0开始） - $element：该行（tr） - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名
onDblClickRow	dbl-click-row.bs.table	row, $element, field	和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）： - row：哪一行（从0开始） - $element：该行（tr） - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名
onClickCell	click-cell.bs.table	field, value, row, $element	当单击某一格，就会触发该事件，所需参数如下： - field：此格所在列的字段名 - value：此格的数据 - $element：此行的此列，就是此格（td）
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	当双击某一格，就会触发该事件，所需参数如下： - field：此格所在列的字段名 - value：此格的数据 - $element：此行的此列，就是此格（td）
onSort	sort.bs.table	name, order	当对某列进行排序时触发该事件，所需参数如下： - name：所排序的列的字段名 - 순서 : 배열 순서
onCheck	check.bs.table	row, $element# ### 当#선택(체크) 시 필수 파라미터는 다음과 같습니다.	#🎜🎜 # onUncheck
row, $element	이 행이 선택 취소되면 트리거됩니다. 필수 매개변수는 다음과 같습니다. - row: 선택되지 않은 행의 필드 이름 - $element: 이 행의 DOM 요소		#🎜 🎜#check-all.bs.table rows
	onUncheckAll		#🎜 🎜#모든 행이 선택 취소될 때 트리거됩니다. 필수 매개변수는 다음과 같습니다: - 행: 이전에 선택한 행의 필드 이름 배열 앞 또는 위 🎜🎜#rows
- 행: 이전에 또는 이전에 선택한 행의 필드 이름 배열
onLoadSuccess	Load-success.bs.table	data	모든 데이터가 로드될 때 트리거
onLo adError	load-error. bs.table	status, res	일부 데이터를 로드하는 중 오류가 발생하면 트리거됩니다.
onColumnSwitch	column-switch.bs.table	field,checked	열이 변경될 때 열이 쿼리될 때 트리거됩니다. collumnsearch
field, 열이 쿼리 될 때 텍스트 트리거링 a queried		Onpagechange	page-change.bs.table
	onSearch	search.bs.table	text
	onToggle	ggle.bs.table	cardView
	onPreBody	pre-body.bs.table	data
onPostBody	post-body.bs.table	data	92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1의 콘텐츠가 로드되거나 DOM에서 정의된 경우 Trigger
onPostHeader	post -header.bs.table	none	ae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a의 콘텐츠가 로드되거나 사용 중인 DOM에 정의될 때 트리거됩니다
onExpandRow	expand-row.bs.table	index, row, $detail	상세 보기를 볼 때 트리거됨(세부 사항을 보려면 아이콘을 클릭)
onCollapseRow	collapse-row.bs.table	index, row	상세 보기 시 트리거됨 닫힙니다(세부 정보를 다시 보려면 아이콘을 클릭하세요)
onRefreshOptions	refresh-options.bs.table	options	각 항목을 새로 고친 후 또는 초기화 테이블에서(파괴 및 재초기화 전에도 트리거됨
onResetView	reset-view.bs.table		테이블 보기가 재설정될 때 트리거됨
onRefresh		새로고침 버튼을 클릭하면(새로고침은 브라우저가 아니라 테이블 오른쪽 상단의 새로고침 버튼)이 실행됩니다

getOptions- 참조: GetSelectionsgetallSelectionsnone - 제발 확인: getAllSelectionsshowAllColumnsnone - ~ > Hidden GetDatauseCurrentPage 로드된 테이블의 데이터를 가져옵니다. 현재 페이지에 데이터를 설정한 경우 현재 페이지 데이터를 반환합니다. getRowByUniqueIdid원하는 행의 데이터 가져오기(행의 ID 설정) - 확인하세요: getRowByUniqueIdloaddata$table.bootstrapTable('load', data); - 확인하세요: loadremoveAll-테이블의 모든 데이터 제거$ table.bootstrapTable('removeAll') ~ ~ UniqueId', 1) ; 뒤의 1은 제거하려는 행의 ID입니다. removeByUniqueIdinsertRowparams새 행을 추가합니다. 필수 매개변수는 다음과 같습니다: updateByUniqueIdparams데이터 행을 업데이트합니다. 필수 매개변수는 다음과 같습니다. - row : 변경하려는 새 데이터 $ $ table.Bootstraptable ('UpdateBYUNIUNIUNIDID', {id: 3, row: row}) row, 필수 매개변수에는 다음 중 하나 이상이 포함됩니다. $table.bootstrapTable('showRow', {index:1 }) - 참조: hiderow-ID: 숨겨진 줄의 인덱스( index) - 참조: mergeCellsupdateCell - field: 열의 필드 이름 pageSize:pageSize}를 설정하세요$table.bootstrapTable('refresh'); - 확인하세요: - 확인하세요: resetSearch resetSearchshowLoadingshowLoading/hideLoadinghideLoadingshowLoading/hideLoadingcheckAll - 확인하세요: uncheckAllnone현재 페이지의 모든 행 선택 취소$table.bootstrapTable('uncheckAll') 역선택, 이해하기 어렵지 않음부터 시작합니다. $table.bootstrapTable('check', 1);- 확인하세요: check/uncheckuncheckbyparams 배열을 통해 특정 라인을 선택합니다. 필수 매개변수는 다음과 같습니다. $("#table").bootstrapTable("uncheckBy", { field:"field_name", value:["value1", "value2","value3"]});resetViewparams테이블 높이 변경 등 테이블 스타일 변경$table .bootstrapTable('resetView');resetWidthnone 테이블 헤더와 피트의 너비(피트로 변환됨, 임의)를 자동으로 변경하여 테이블 너비에 맞게 조정합니다. 각 열$table.bootstrapTable('resetWidth');destroynone양식 A를 파괴하세요! 티! 티! 아! 기음! 케이! $table.bootstrapTable('destroy');showColumnfield특정 열 표시 $table.bootstrapTable('showColumn', 'name'); ㅋㅋㅋ -숨겨진 열 모두 가져오기 $table.bootstrapTable('getHiddenColumns');getVisibleColumns$table .bootstrapTable(' getVisibleColumns');$table.bootstrapTable(' scrollTo', 0); - 확인하세요: getScrollPositionnone현재 스크롤 위치를 가져오세요. 단위는 'px'입니다. $table.bootstrapTable('getScrollPosition' );filterBy예: - {age:10}을 10세의 데이터만 표시하도록 설정할 수 있습니다- 싱글뿐만 아니라 커플 또는 여러 명이 함께 비행할 수도 있습니다. {연령: 10, hairColor: ["파란색", "빨간색", "녹색"]}을 설정하여 10년 단위의 그룹을 구성할 수 있습니다. - 머리 색깔이 파란색, 빨간색, 녹색인 노인...dataprevPagenone 이전 페이지로 이동$table.bootstrapTable('prevPage');nextPage none다음 페이지로 이동$table.bootstrapTable('nextPage');togglePaginationnone 잘못된 단어에 대해서는 예제 문서를 참조하세요. $table.bootstrapTable ('togglePagination') - 확인하세요: 세부정보 View가 True로 설정되어 있습니다. 그렇지 않으면 유용하지 않은 보기 함수에서 사용할 수 없습니다. -매개변수 인덱스를 통해 이 열의 상세 보기를 확장하려면-다음을 확인하세요: expandRow-collapseRow - 확인하세요: expandRow-collapseRow새 항목에 변경 사항이 있습니다. 버전(원래 "expandAllRow"), 아래와 동일 에게 감사드립니다사용 가능한 조건: 세부 정보 보기가 true로 설정됨 - 위의 예시를 참고하세요. 위는 특정 행을 확장(축소)한 뷰이고, 전체 행을 뷰로 만든 뷰입니다 사용 가능 조건: 상세 뷰 true로 설정됨 - 모든 열의 상세 보기 닫기 $table.bootstrapTable('collapseAllRows')

getSelections

none

선택한 행을 반환합니다. 선택된 행이 없으면 빈 배열이 반환됩니다(그러나 정의되지 않거나 null이 아닌 경우에는 길이가 0이므로 길이가 0보다 큰지 판단하여 선택 여부를 결정할 수 있습니다) 是否 $ Table.Bootstraptable ('GetSelections')

선택한 모든 행으로 돌아가십시오(원본: 실제로 선택한 필터링된 데이터인 searchh 또는 필터 포함). 행을 선택하지 않으면 빈 배열이 반환됩니다$table.bootstrapTable('getAllSelections');

모든 열 표시$table.bootstrapTable('showAllColumns');

$table.bootstrapTable('getData'); - 확인하세요. : getData

$table.bootstrapTable('getRowByUniqueId', 1); 원하는 행의 ID

데이터를 테이블에 로드하면 원본 데이터가 제거됩니다

append

data

마지막 행 뒤에 데이터 추가

$table.bootstrapTable('append', data);data는 배열일 수 있음
- 확인하세요: Append

prepend

data

도 첫 번째 행 바로 앞에 추가됩니다.

$table.bootstrapTable('prepend', data) 데이터는 배열일 수 있습니다
- 확인하세요: prepend

remove

params

선택한 하나 이상의 데이터 행을 제거합니다

$table.bootstrapTable('remove', {field: 'id', value: ids}); 추가 행) - 값: 제거된 행의 배열 - 참조:
remove

- 확인하세요:

- 색인: 원하는 삽입하세요(원하는 대로 원하는 곳에 삽입하면 됩니다. ; 새 데이터

$table.bootstrapTable('updateRow', {index: 1, row: row});

- id: 업데이트하려는 행의 ID(고유), (원하는 경우 변경) 원하는 대로)

- id: 표시할 행의 인덱스
- UniqueId: 해당 행의 ID

Showrow/Hiderow

params

숨겨진 특정 줄, 필수 매개 변수에는 다음 중 적어도 하나가 포함됩니다.

- UniqueId: 해당 행의 ID

$table.bootstrapTable('hideRow', {index:1})
(공식적인 말이 많지만 사실 앞 문장이 요약임) $테이블. bootstrapTable('getRowsHidden');

mergeCells

options

Merge~ (여러 셀을 하나로 병합), 필수 매개변수는 다음과 같습니다. - index: 병합할 셀이 위치한 행의 인덱스 - field: 열의 필드 이름 - rowspan: 병합된 행의 총 개수 - colspan: 병합된 열의 총 개수 - colspan: 병합된 열의 총 개수

$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});

params

특정 데이터 그리드를 업데이트하세요. 매개변수는 다음과 같습니다:
- index: 병합할 셀이 있는 행의 인덱스

- value: 교체할 새 데이터
{reinit:false}를 설정하여 다시 비활성화할 수도 있습니다. -테이블 초기화$table.bootstrapTable('updateCell',{index:index,field:'id',value:value});

refresh

params

Refresh 서버 데이터:
- 당신 {silent:true}를
비밀하게 새로고침하도록 설정할 수 있습니다(<_<)

- 요청된 주소, 페이지 번호, 각 페이지에 표시되는 항목 수를 변경하려면 {url:newUrl,pageNumber:pageNumber,

- {query:{foo:'bar'}}를 설정하여 추가할 수 있습니다. 특정 매개변수

refresh

refreshOptionsoptions

예제를 보세요

refreshOptions

text

검색 텍스트 재설정(텍스트)

- 확인하세요:

none

로드 표시...

- 확인하세요:

none

로드 숨기기...

- 참조:

none

현재 페이지의 모든 행 선택

$table.bootstrapTable('checkAll ' );

checkAll/uncheckAll

checkInvertnone

$table.bootstrapTable('checkInvert');

check

index
특정 행을 선택하면 인덱스는 0

uncheck

index

행 선택을 취소하세요. 인덱스는 0

$table.bootstrapTable('uncheck', 1);
부터 시작합니다. - 확인하세요: check/ uncheck

checkBy

params

배열을 통해 특정 행을 선택합니다. 필수 매개변수는 다음과 같습니다.
- 필드: 선택할 필드 이름
- 값: 선택할 값(배열) selected

공식적인 예는 없습니다. 아, 예가 있습니다:
- $("#table").bootstrapTable("checkBy", { field:"field_name", value:["value1","value2", "value3"]});
-참조: eCheckby/Uncheckby

-필드: 필드 이름 선택의 선택
값: 선택을 취소하는 선택 해당 값 (배열)

- 확인하세요:
checkBy/uncheckBy

- 다음을 확인하세요:
resetView

- 참조:
destroy

getHiddenColumns

-표시된 모든 열 가져오기

scrollTo

value

스크롤... 어느 위치로 단위가 'px'인지, 'bottom'으로 설정되어 있으면 쉭, 축하합니다. 끝까지 도달했습니다. the table

scrollTo

none은 테이블의 데이터를 필터링하기 위해 클라이언트 측(클라이언트 측, 서버 측 기준)에서만 사용할 수 있습니다

$table.bootstrapTable('filterBy', { ID: [1, 2, 3] });
‐ ‐‐‐를 참조하세요: ‐‐‐ /prevPage /nextPage

- 확인하세요:
selectPage/prevPage/nextPage

- 확인하세요:
selectPage/prevPage /nextPage

ToggleViewleexpandRow
index

collapseRow

index
사용 조건: 상세 보기가 true로 설정됨 - 이 열의 상세 보기를 끄려면 매개변수 인덱스를 사용하세요

expandAllRows

@zhq449681061
is 하위 테이블

- 모든 열의 세부 정보 보기 확장

$table.bootstrapTable( 'expandAllRows' );

collapseAllRows는 하위 테이블입니다

本地化，切换为另一种语言(Localizations)

默认显示英文，如果想使用中文，首先引入：

<script src="bootstrap-table-zh-CN.js"></script>

然后是三种声明使用的方法（个人只使用第二、三种），如下：

第一种：

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales[&#39;zh-CN&#39;]);

第二种：

<table data-toggle="table" data-locale="zh-CN"></table>

第三种：

$(&#39;table&#39;).bootstrapTable({locale:&#39;zh-CN&#39;});

以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了

名称	参数	默认	说明
formatLoadingMessage	-	'Loading, please wait…'	“加载中，请等待……”
formatRecordsPerPage	pageNumber	'%s records per page'	“每页显示 15 条记录”
formatShowingRows	pageFrom, pageTo, totalRows	'Showing %s to %s of %s rows'	“显示第 1 到第 15 条记录”
formatDetailPagination	totalRows	'Showing %s rows'	“总共 15 条记录”
formatSearch	-	'Search'	“搜索”（占位符）
formatNoMatches	-	'No matching records found'	“没有找到匹配的记录”
formatRefresh	-	'Refresh'	“刷新”（鼠标悬浮显示的文字，下同）
formatToggle	-	'Toggle'	“切换”
formatColumns	-	'Columns'	“列”

　　有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢

위 내용은 Bootstrap Table API 중국어 버전(번역 문서)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：BootStrapTable의 동적 테이블에 대한 자세한 튜토리얼[코드 포함]다음 기사：BootStrapTable의 동적 테이블에 대한 자세한 튜토리얼[코드 포함]