boottstrap table 표 플러그 인 사용 설명
$table.bootstrapTable({
url: '../data/data1.json',
striped: true,
minimumCountColumns: 2,
clickToSelect: true,
detailView: true,
detailFormatter: 'detailFormatter',
pagination: true,
paginationLoop: false,
classes: 'table table-hover table-no-bordered',
sidePagination: 'server',
silentSort: false,
queryParamsType:'',
queryParams: queryParams : function(params) {
var subcompany = $('#subcompany option:selected').val();
var name = $('#name').val();
return {
pageNumber: params.offset+1,
pageSize: params.limit,
companyId:subcompany,
name:name
};
},
smartDisplay: false,
idField: 'id',
sortable: false,
escape: true,
idField: 'systemId',
maintainSelected: true,
toolbar: '#toolbar',
columns: [
{field: 'state', checkbox: true},
{field: 'id', title: ' ', sortable: true, halign: 'center'},
{field: 'username', title: ' ', sortable: true, halign: 'center'},
{field: 'password', title: ' ', sortable: true, halign: 'center'},
{field: 'name', title: ' ', sortable: true, halign: 'center'},
{field: 'sex', title: ' ', sortable: true, halign: 'center'},
{field: 'age', title: ' ', sortable: true, halign: 'center'},
{field: 'phone', title: ' ', sortable: true, halign: 'center'},
{field: 'email', title: ' ', sortable: true, halign: 'center'},
{field: 'address', title: ' ', sortable: true, halign: 'center'},
{field: 'remark', title: ' ', sortable: true, halign: 'center'},
{field: 'action', title: ' ', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
]
}).on('all.bs.table', function (e, name, args) {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
boottstrap-table 은 표 플러그 인 으로 후 관 시스템 의 데이터 처리 와 리 턴 으로 사용 할 수 있 습 니 다.물론 boottstrap-table 의 사용 은 앞 배경 이 조 화 롭 게 진행 되 어야 합 니 다.boottstrap-table 을 사용 하 는 과정 에서 주의해 야 합 니 다:
인 터 페 이 스 는 데이터 형식[json]에 포 함 된 두 필드 를 되 돌려 줍 니 다.total(데이터 합계)과 rows(데이터),즉{"total":24,"rows":[...]}
페이지 는 서버 쪽 과 클 라 이언 트 두 가지 상황 을 포함 합 니 다.사무 용 페이지 의 매개 변 수 는 기본 값 은 limit,offset,search,sort,order Else 입 니 다.query ParamsType 매개 변 수 를 통 해 재 작성 할 수 있 습 니 다.
columns 필드 에서:file 은 필드 의 속성 명 을 되 돌려 줍 니 다.title 은 th 제목 내용 을 표시 합 니 다.formatter 는 사용자 정의 목록 에 내용 을 표시 합 니 다.세 개의 매개 변수,value,row,index 를 포함 하고 file 값,줄 데이터,줄 수 를 포함 합 니 다.
function actionFormatter(value, row, index) {
return [
'<a class="like" href="detail.html" rel="external nofollow" data-toggle="tooltip" title=" "><i class="glyphicon glyphicon-pencil"></i></a> ',
'<a class="edit ml10" href="javascript:createAction()" rel="external nofollow" data-toggle="tooltip" title=" "><i class="glyphicon glyphicon-edit"></i></a> ',
].join('');
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.