이번에는 bootstarp+table 사용법에 대한 분석을 가져오겠습니다. bootstarp+table 사용 시 주의사항은 무엇인가요?
우리는 프로젝트 개발에 네이티브 PHP + html5 앞뒤 분리 기술을 사용했습니다. PHP 인터페이스 디자인은 Restful과 같습니다. Restful을 모르신다면 Baidu에 문의하세요. 반환되는 모든 데이터는 json입니다.
페이징의 경우 프런트엔드 페이지에서는 호환성 문제로 bootstarp를 사용하기 때문에 데이터 페이징을 위해 bootstarp 테이블 플러그인을 계속 시도하고 있습니다.
bootstarp에는 작성 및 응용 프로그램이 이전 UI와 유사합니다. easyui 같은 프레임워크도 있지만 easyui는 정말 사용하기 쉽고, easyui의 비동기 트리도 정말 강력하다고 생각합니다. 물론 회사의 프런트엔드가 부족해서 파트타임으로 페이지를 작성합니다. PHP, 아시죠?
다음은 bootstarp 구성을 소개합니다. js 구성
<script>
$('#std-list').bootstrapTable({
url: 'controller/standard.php?op=query',
method: "post", //使用post发送数据的时候 需要设置contenType不然后台无法接受数据
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
toolbar: '#toolbar1', // 对应你table里面的工具栏
pagination: true, //打开分页
pageSize: 10,//一页放多少个数据
showRefresh: true,//现实刷新按钮
showToggle: true,
pageList: [10, 20],//设置可以每页现实的数据量
strictSearch: true,
singleSelect: false,//单选多选
search: false,//搜索框（当前端分页时候，搜索框可以自己过滤数据，后端分页无意义）
onCheck: function(row, $element) {},
queryParams: function(params) { //向后台发送的参数都可以写这里
var temp = {
pageSize: params.limit, //页面大小
pageNumber: params.offset, //页码
op: s,
conds: data
};
return temp;
},
rowStyle: function(row, index) { //改变行样式。也可以使用cellStyle改变单元格样式
console.log(1);
},
sidePagination: 'server',
columns: [{
checkbox: true
}, {
field: 'StandardNumber',
title: '标准编号'
}, {
field: 'StandardName',
title: '标准名称'
},
{
field: 'StandardLevel',
title: '标准类别'
},
{
field: 'QyStandardNumber',
title: '企标编号'
},
{
field: 'ReferStandardNumber',
title: '引用标准'
},
{
field: 'FileName',
title: '查看全文',
formatter: function(value, row, index) { //格式化你想要的数据
if(value) {
var list = [];
list.push(value);
for(var i = 0; i < list.length; i++) {
//console.log(list[i]);
if(list[i] != null) {
var str = list[i];
var conds = str.indexOf('.');
var type = str.substr(conds, str.length)
if(type == ".pdf") {
return '<img src="img/pdf.png" onClick="lookText(\'' + index + '\')" alt="bootstarp+table 사용법 분석" >' + '';
} else if(type == ".txt") {
return '<img src="img/txt.png" onClick="lookText(\'' + index + '\')" alt="bootstarp+table 사용법 분석" >' + '';
} else if(type == ".docx" || type == ".doc") {
return '<img src="img/doc.png" onClick="lookText(\'' + index + '\')" alt="bootstarp+table 사용법 분석" >' + '';
} else if(type == ".png" || type == ".jpg") {
return '<img src="img/img.png" onClick="lookText(\'' + index + '\')" alt="bootstarp+table 사용법 분석" >' + '';
}
}
}
} else {
return '';
}
}
},
{
field: 'IsCancel',
title: '是否作废'
}
],
rowStyle: function(value, row, index) {
if(value) {
var list = [];
list.push(value);
for(var i = 0; i < list.length; i++) {
console.log(list[i].IsCancel);
if(list[i].IsCancel == '是') {
console.log(1);
var style = {};
style = {
css: {
'color': 'red'
}
};
return style;
} else {
var style = {};
style = {
css: {
'color': ''
}
};
return style;
}
}
}
}
});
</script>
위 페이징은 백그라운드 페이징입니다. 백그라운드 페이징에서 반환되는 데이터 형식은 ｛total:'your total', columns:'your입니다. data'｝ 프론트엔드 페이징은 {rows:rows}만 반환하면 됩니다
마지막으로 json 형식을 첨부합니다
{
"total": "2",
"rows": [{
"Id": "6",
"StandardName": "1994",
"StandardNumber": "GB-100-1994",
"StandardLevel": "",
"QyStandardNumber": "",
"ReferStandardNumber": "",
"ReferLevel": "",
"ClassNumber": "",
"DraftUnit": "",
"PublishDate": "",
"ImplementDate": "",
"InputDatabaseDate": "",
"IsCancel": "否",
"CancelDate": "",
"StructureID": "",
"OldStandardNumber": "",
"OldStandardName": "",
"StandardMemo": "",
"UseDepartment": "",
"FileName": null,
"FileContent": null
}, {
"Id": "4",
"StandardName": "4",
"StandardNumber": "4",
"StandardLevel": "",
"QyStandardNumber": "1",
"ReferStandardNumber": "",
"ReferLevel": "",
"ClassNumber": "",
"DraftUnit": "",
"PublishDate": "",
"ImplementDate": "",
"InputDatabaseDate": "",
"IsCancel": "是",
"CancelDate": "",
"StructureID": "",
"OldStandardNumber": "",
"OldStandardName": "",
"StandardMemo": "",
"UseDepartment": "",
"FileName": "变电设备在线监测I2接口网络通信规-范.pdf",
"FileContent": "{\"database\":\"m2018.php\",\"key\":\"4\"}"
}]로그인 후 복사
}
여기서는 HTML에서 직접 테이블을 생성하는 방법은 소개하지 않겠습니다. 자세한 내용은 설명서나 Baidu를 확인하세요
bootstarp 테이블을 사용할 때 페이지의 데이터 일부를 업데이트하거나 데이터 일부를 삭제하는 작업이 포함되는 경우가 있습니다. 삭제되고 업데이트되는 것은 지정된 행입니다
필요합니다. 아래 인덱스 테이블을 가져옵니다
예를 들어 다음 updateRow는 지정된 행을 업데이트합니다
$('#std-list').bootstrapTable('updateRow', {
index: getRowIndex('#std-list', row[current]),
row: {
StandardName: StandardName,
StandardLevel: StandardLevel,
QyStandardNumber: QyStandardNumber,
ReferStandardNumber: ReferStandardNumber,
UseDepartment: UseDepartment,
ReferLevel: ReferLevel,
ClassNumber: ClassNumber,
StructureId: StructureId,
DraftUnit: DraftUnit,
PublishDate: PublishDate,
InputDatabaseDate: InputDatabaseDate,
OldStandardNumber: OldStandardNumber,
OldStandardName: OldStandardName,
StandardMemo: StandardMemo,
CancelDate: CancelDate,
OldStandardNumber: OldStandardNumber,
OldStandardName: OldStandardName,
StandardMemo: StandardMemo,
IsCancel: cancellation
}
});로그인 후 복사
인덱스(하위 첨자)를 가져오려면 이 방법을 사용하는 것이 좋습니다
function getRowIndex(sel, row) {
var data = $(sel).bootstrapTable('getData');
for(var i = 0; i <p style="text-align: left;"><strong>프런트 엔드 페이징 아티팩트는 사용할 가치가 있습니다! </strong></p><p style="text-align: left;">이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! </p><p style="text-align: left;">추천 자료: </p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-398044.html" target="_blank">PromiseA+</a></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-398039.html" target="_blank">Pixeler 프로젝트 개발에서 EasyCanvas 드로잉 라이브러리 사용에 대한 실제 요약</a></p>로그인 후 복사
위 내용은 bootstarp+table 사용법 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
