Layui 테이블은 자체 적응을 지원합니까?

레이유 테이블은 어댑티브를 지원하나요?

layui 테이블은 적응성을 지원하지 않습니다. 예를 들어, 페이지에 데이터 테이블을 추가할 때 데이터 테이블의 각 열 너비가 테이블에 맞춰질 수 없으며, 공식 문서를 읽은 후 열 너비가 모두 빽빽하게 들어차 있는 것을 발견했습니다. 테이블에 설정할 수 있습니다:

layuiTable.render({
width: 710,
elem: '#tabSta',
url: "/pickTicket/tytr", 
cols: [[
{ field: "ShiftsID", title: "班次ID", hide: true },
{ field: "scheduleCoding", title: "班次", align: "center" },
{ field: "time", title: "时间", align: "center" },
{ field: "carNumber", title: "车辆编号", align: "center" } 
]],
});

그러나 문제의 근원은 . 페이지를 축소해도 표의 너비는 여전히 원래 너비이므로 적응형 크기 요구 사항을 충족할 수 없습니다. 그 이유는 방금 설정한 너비가 고정된 크기 너비이기 때문입니다.

위의 방법으로는 효과가 없으므로 2번째 해결 방법으로 진행하세요. 브라우저 페이지를 확인한 결과 너비가 100%로 설정되면 데이터 테이블의 너비가 적응적으로 조정될 수 있음을 발견했습니다. 따라서 데이터 테이블의 해당 코드에 done 매개변수를 추가하면 데이터 테이블의 스타일을 사용자 지정할 수 있습니다.

해당 코드는 다음과 같습니다.

tabrecord =layuiTable.render({
elem: ‘#tabStation’,
url: “/pickTicket/tytr”,
done: function (res, curr, count){
KaTeX parse error: Expected 'EOF', got '}' at position 34: …th", "100%"); }̲, cols: [[ { fi…(“table”).css(“width”, “100%”);

$("table").width("100%") 이렇게도 쓸 수 있습니다.

이 설정을 사용하면 브라우저 페이지로 돌아가 페이지를 확대/축소하더라도 데이터 테이블이 페이지 크기에 맞게 조정될 수 있습니다.

Layui와 관련된 더 많은 기술 기사를 보려면 Layui Framework Tutorial 칼럼을 방문하여 알아보세요!

위 내용은 Layui 테이블은 자체 적응을 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!