Layui 가 데이터 시트 에 동적 으로 줄 을 추가 하고 줄 이 있 는 페이지 로 이동 하 는 방법

Layui 는 전단 UI 프레임 워 크 로 우아 한 스타일 이지 만 발표 시간 이 짧 아 많은 기능 이 제공 되 지 않 았 다.
필 자 는 Layui 의 데이터 시트 를 사용 할 때 필요 한 것 은 다음 과 같다.추가 단 추 를 누 르 면 데이터 시트 의 마지막 동적 으로 한 줄 을 추가 하 는 것 이다.상술 한 기능 은 정부 에서 실현 을 제시 하지 않 았 기 때문에 스스로 수 동 으로 해결 해 야 한다.
해결 방향 및 방안
간단 한 분석:수요 에 따라 동적 으로 한 줄 을 추가 합 니 다.먼저 JS/jQuery 를 이용 하여 DOM 대상 을 조작 하여 데이터 시트 table 에 tr 를 수 동 으로 추가 하 는 것 을 생각 합 니 다.그러나 데이터 시트 의 모든 줄 의 셀 에 스타일 이 있 기 때문에 동적 으로 추가 하려 면 Layui 데이터 시트 가 보 여 주 는 모든 줄 의 스타일 과 기능 과 같 습 니 다.tr 설정 과 렌 더 링 된 줄 마다 같은 스타일 을 사용 해 야 합 니 다.jQuery 를 이용 하여 이러한 tr 공 사 량 을 추가 하 는 것 이 너무 많 기 때문에 방안 을 바 꿔 야 합 니 다.
데이터 시트 의 원본 데이터:Layui 공식 문 서 를 보고 렌 더 링 이나 자동 렌 더 링 방식 으로 데이터 시트 를 만 들 때 데이터 시트 의 데 이 터 는 직접 값 을 부여 하 는 방식 이나 비동기 로 불 러 오 는 방식 으로 원본 데 이 터 를 얻 습 니 다.
직접 할당 방식 의 원본 데 이 터 는 대상 배열 입 니 다.예 를 들 어[{},{},{},{},...].
비동기 로 딩 방식 의 원본 데이터 전송 요청 은 백 엔 드 에서 가 져 온 다음 백 엔 드 에서 전단 의 json 대상 에 게 되 돌려 줍 니 다.여기 서 백 엔 드 가 전단 의 json 대상 에 게 되 돌아 갈 것 을 요구 합 니 다.Layui 데이터 시트 가 렌 더 링 할 수 있 는 형식 에 부합 되 어야 합 니 다.Layui 데이터 시트 가 기본적으로 지원 하 는 백 엔 드 는 전단 의 json 대상 형식 으로 다음 과 같 습 니 다.각 속성 은 공식 문 서 를 참조 합 니 다.

 {
  code: 0, 
  msg: "", 
  count: 1000, 
  data: [] 
 } 

데이터 시트 의 리 셋:데이터 시트 리 셋 은 새로 받 은 원본 데 이 터 를 데이터 시트 에 다시 렌 더 링 할 수 있 습 니 다.Layui 가 제공 하 는 방법 은 table.reload(ID,options)입 니 다.
ID:table 의 id 속성 값
options:Layui 데이터 시트 의 기본 매개 변수 입 니 다.공식 문 서 를 참조 하 십시오.
다음은 원본 데 이 터 를 직접 할당 하 는 방식 으로 렌 더 링 하 는 데이터 시트 의 동태 적 인 추가 방향 과 해결 방법 을 제시 합 니 다.
사고방식:상술 한 설명 을 통 해 동적 으로 한 줄 을 추가 하면 다음 과 같이 바 꿀 수 있다.
데이터 시트 의 모든 데 이 터 를 가 져 온 후에 대상 배열 을 가 져 오 는 것 입 니 다.그 대상 배열 에 마지막 으로 가 져 온 대상 배열 의 대상 과 같 지만 모든 속성의 속성 값 은 빈 대상 입 니 다.(그 데이터 표 의 모든 데 이 터 는 나의 다른 편 을 참조 할 수 있다Layui 데이터 시트 에서 표 의 모든 데 이 터 를 가 져 옵 니 다.)
table.reload(ID,options)방법 으로'빈 대상'을 추가 한 배열 을 데이터 시트 에 다시 불 러 오 면 됩 니 다.
동적 추가 줄 이 있 는 페이지 로 이동 합 니 다.table.reload(ID,options)에 있 는 options 의 page 기본 매개 변 수 를 설정 하면 됩 니 다.page 매개 변수의 curr 속성 값 을 동적 추가 줄 이 있 는 페이지 로 설정 합 니 다.2,3 단계 코드 는 다음 과 같 습 니 다():

//          、      ，            
var totalRecord = tableContent.length;
var pageSize = $(".layui-laypage-limits").find("select").val();
if($.type(pageSize) == "string"){
 pageSize = parseInt(pageSize);
}

var currPageNo = Math.ceil(totalRecord / pageSize);
console.log("        ："+pageSize+"   ："+$.type(pageSize)+"      ："+totalRecord+"   ："+$.type(totalRecord)
  +"        ："+currPageNo+"   ："+$.type(currPageNo));

//                       
table.reload('viewTable', {
  page : {
   curr : currPageNo
  },
  data : tableContent
});

최종 효과 도:
동적 으로 줄 을 추가 하기 전에(그림 을 로 컬 에 저장 하여 큰 그림 을 보십시오)

동적 으로 한 줄 을 추가 한 후(그림 을 로 컬 에 저장 하여 큰 그림 을 보십시오)

이상 의 Layui 는 데이터 시트 에 한 줄 을 동적 으로 추가 하고 추가 줄 이 있 는 페이지 로 이동 하 는 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.