인터넷에 중국어 버전이 있지만 일부는 문자 그대로 번역되고 일부는 번역되지 않아 제가 직접 다시 번역할 예정입니다. 각 기사는 가능한 한 많은 정보로 번역될 것입니다. 내용은 영어 이상이며, 테이블 이름, 속성, 유형, 기본값은 번역되지 않습니다. 예: "class", "id" 등은 번역되지 않습니다. 잘못된 점을 신고해 주시면 시간이 지나면 수정하도록 하겠습니다. 감사합니다.
3. 정의를 반복하려면 선언 테이블에 이름을 쓰는 것보다 js에 속성을 쓰는 것이 더 간단합니다. 또는 그 반대의 경우도 있습니다(일부 속성은 반드시 작성해야 하며 해당 이름은 해당 속성을 활성화할지 여부를 나타냅니다)
테이블 옵션
jQuery.fn.bootstrapTable.defaults 파일에 정의됨
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
정의된 아이콘 크기:
- 정의되지 않음 =>기본값은 기본 버튼 크기(btn)를 나타냅니다
- xs =>초소형 버튼의 크기(btn-xs)
- sm =>작은 버튼의 크기 (btn-sm)
~
- 옵션은 기본, 위험, 경고 등입니다. - 작성 후 btn-기본(파란색), btn-위험(빨간색), btn-경고(노란색) 및 기타 형식으로 자동 변환되므로 사용하지 마세요. 이전에는 걱정하지 마세요. 기본값은 btn-default(흰색)입니다.
기본값입니다. 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로 설정하면 확인란에서 행 하나만 선택할 수 있습니다
ㅋㅋㅋ
true
선언 체크박스가 있는 경우 헤더 행의 모두 선택 체크박스가 기본적으로 표시됩니다. 숨기려면 false로 설정하세요. (즉, 테이블의 첫 번째 행은 표시되지 않으며, 그 이후의 모든 항목은 표시되지 않습니다. 두 번째 줄이 표시됩니다)
maintaintectioned
data-maintain-selected
boolean
false
set 선택한 row
sortable
data-sortable의 상태를 유지하기 위해 true. Boolean
true
Default true, 모든 행 정렬을 비활성화하려면 false로 설정합니다(즉, 정렬 버튼이 각 열의 헤더에 표시되지 않습니다. data-sortable="true"에서 선언해야 합니다. , 활성화하기 위해 js로 작성됨)
slientSort
data-silent-sort
Boolean
true
전제 조건: sidePagination이 서버(서버)로 설정됨
- 기본값은 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'가 사용됩니다)
footerStyle
data-footer- style
Function
{}
바닥글 형식을 변경하려면 두 개의 매개변수가 필요합니다.
行-ROW: 이번 여행의 데이터-Index: 이번 여행의 인덱스
CLASSSES 및 CSS를 지원하며 사용법은 다음과 같습니다.
Function Rowstyle (Value, ROW, Index) {
Return {
CSS: { "font-weight": "bold" }
};
}
열 옵션(열 옵션)
은 jQuery.fn.bootstrapTable.columnDefaults 파일
에 정의되어 있습니다.
Name
Attribute
Type
기본값
함수 설명
radio
data-radio
Boolean
false
기본값 false는 라디오 표시(라디오 버튼), 설정 to true이면 라디오 폭이 고정된 것으로 표시됩니다
checkbox
data-checkbox
Boolean
false
기본값 false는 true로 설정하면 체크박스(체크박스)가 표시되지 않습니다. , 체크박스의 각 열 너비가 변경되었습니다.
data-field
String
undefine
은 표시되는 이름이 아닌 각 열의 필드 이름입니다. 헤더에 값을 할당할 수 있습니다. 이는 키와 동일하며 테이블
title
data-title
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
이 열을 표시하려면 기본값은 true입니다. , 숨기려면 false로 설정하세요.
switchable
data-switchable
Boolean
true
열을 표시하려면 기본값이 true이고, 열 항목의 탭을 비활성화하려면 false로 설정합니다.
clickToSelect
data-click-to-select
Boolean
true
기본값인 true는 응답하지 않습니다. false로 설정하면 이 행의 아무 곳이나 클릭해도 이 행의 확인란이 선택되지 않습니다. 자동으로 선택된(복잡한) 선택 윤곽) 또는 라디오박스(라디오 버튼)
formatter
data-formatter
Function
undefine
이 열이 필요한 개체입니다. ㅋㅋㅋ
data-footer-formatter
Function
undefine
에는 이 열에 대한 개체가 필요합니다. 换 Xiangge의 데이터 변환 기능에는 매개변수가 필요합니다:
-DATA: 모든 데이터 라인의 배열
이 함수는 바닥글의 특정 셀에 표시할 문자열의 형식을 반환(반환)해야 하며,
events
내용도 포함해야 합니다.
data-events
Object
undefine
셀이 포맷터 기능을 사용하면 이벤트 리스너가 응답하고 4개의 매개변수가 필요합니다. : : jQuery 이벤트(이벤트 참조). - 값: 필드 이름 - 행: 행 데이터 - 인덱스: 이 행의 인덱스 예:
var OperateEvents = {'click .like': 함수(e, 값, 행, 인덱스) {}};
sorter
# ㅋㅋㅋ A: 첫 번째 필드 이름
-b: 두 번째 필드 이름#🎜🎜 ## 🎜🎜 ## 🎜🎜#sortname
🎜🎜#Data -sort -name
String
undefine
테이블 헤더의 기본 정렬 이름이나 열의 필드 이름 외에도 사용자 정의 정렬 이름을 사용할 수도 있습니다#对# 특별한 상황에 대해 설명하세요. - 열에 표시되는 콘텐츠는 다음과 같은 "html" 코드일 수 있습니다. & lt b & gt; 스팬 스타일 = "color: red" & lt; ;/span , 그러나 html 코드의 내용은 abc
cellStyle
data- cell- style
Function
undefine
특정 그리드에서 표시 스타일(스타일)을 변경하려면 세 가지 기능이 필요합니다. #🎜🎜 # : 필드 이름
이 행이 선택 취소되면 트리거됩니다. 필수 매개변수는 다음과 같습니다. - row: 선택되지 않은 행의 필드 이름 - $element: 이 행의 DOM 요소
# 🎜🎜#
onCheckAll
#🎜 🎜#check-all.bs.table
rows
Triggered when 모든 행이 선택되면 필수 매개변수는 다음과 같습니다. - 행: 행의 필드 이름 배열 새로 선택한 행
onUncheckAll
#🎜 🎜#uncheck-all.bs.table
rows
#🎜 🎜#모든 행이 선택 취소될 때 트리거됩니다. 필수 매개변수는 다음과 같습니다: - 행: 이전에 선택한 행의 필드 이름 배열 앞 또는 위 🎜🎜#rows
특정 행이 있을 때 트리거됩니다. (여러 행, 행)을 선택(확인)한 경우 필수 매개변수는 다음과 같습니다. 선택한 행의 필드 이름 배열 🎜🎜#
특정 행(여러 행, 행)일 때 트리거됨 선택 취소되어 있습니다. 필수 매개변수는 다음과 같습니다:
- 행: 이전에 또는 이전에 선택한 행의 필드 이름 배열
onLoadSuccess
Load-success.bs.table
data
모든 데이터가 로드될 때 트리거
onLo adError
load-error. bs.table
status, res
일부 데이터를 로드하는 중 오류가 발생하면 트리거됩니다.
onColumnSwitch
column-switch.bs.table
field,checked
열이 변경될 때 열이 쿼리될 때 트리거됩니다. collumnsearch
column-search.bs.table
field, 열이 쿼리 될 때 텍스트 트리거링 a queried
Onpagechange
page-change.bs.table
번호, size triggered when 이 페이지에 표시되는 데이터 항목 수 변경 또는 페이지 번호 변경
onSearch
search.bs.table
text
이 테이블을 쿼리할 때 트리거됨
onToggle
ggle.bs.table
cardView
테이블의 뷰가 변경될 때 트리거됩니다.
onPreBody
pre-body.bs.table
data
onPostBody
post-body.bs.table
data
의 콘텐츠가 로드되거나 DOM에서 정의된 경우 Trigger
onPostHeader
post -header.bs.table
none
의 콘텐츠가 로드되거나 사용 중인 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
새로고침 버튼을 클릭하면(새로고침은 브라우저가 아니라 테이블 오른쪽 상단의 새로고침 버튼)이 실행됩니다
Methods
메서드 응답 정의 구문 $('#table').bootstrapTable('method', parameter);# 🎜🎜# - 확인하세요:
getOptions
getSelections
none
선택한 행을 반환합니다. 선택된 행이 없으면 빈 배열이 반환됩니다(그러나 정의되지 않거나 null이 아닌 경우에는 길이가 0이므로 길이가 0보다 큰지 판단하여 선택 여부를 결정할 수 있습니다) 是否 $ Table.Bootstraptable ('GetSelections')
- 참조:
GetSelections
getallSelections
none
선택한 모든 행으로 돌아가십시오(원본: 실제로 선택한 필터링된 데이터인 searchh 또는 필터 포함). 행을 선택하지 않으면 빈 배열이 반환됩니다$table.bootstrapTable('getAllSelections');
- 제발 확인:
getAllSelections
showAllColumns
none
모든 열 표시$table.bootstrapTable('showAllColumns');
- ~ > Hidden
GetData
useCurrentPage
로드된 테이블의 데이터를 가져옵니다. 현재 페이지에 데이터를 설정한 경우 현재 페이지 데이터를 반환합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
