tbl.js div로 구현된 테이블 제어는 완전 무료이며 jquery에 의존하지 않습니다.-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

tbl.js div로 구현된 테이블 제어는 완전 무료이며 jquery에 의존하지 않습니다.

PHPz

Mar 12, 2017 pm 05:18 PM

현재 HTML에는 비교적 사용하기 쉬운 테이블 컨트롤이 있는데, 이는 데이터 테이블이지만 편집, 버튼 및 기타 부분은 유료입니다. 그리고 기본적인 기능만 무료입니다. 또한 크기가 변경되면 수동 새로 고침 및 기타 지루한 작업이 필요합니다. 그래서 누구나 사용할 수 있는 무료 앱을 개발했습니다.

이 프로젝트는 "Void 서비스 서버 개발 키트"에 사용되었습니다. 현재는 주로 Microsoft Edge 브라우저, Chrome 브라우저, 기타테스트되지 않은 브라우저를 지원합니다.

tbl.js는 완전 무료이며 마음대로 수정할 수 있습니다. k님을 환영합니다.

tbl.js는 목록 스타일, 추가, 삭제, 수정, 쿼리, 전체 테이블 검색, 그룹화, 페이징 기능, 전체 테이블을 지원합니다. 편집, 전체 행 편집, 단일 선택, 다중 선택, 스타일 사용자 정의.

은 jquery의 대화상자, 탭 등 다양한 컨테이너에 포함될 수 있습니다.

버전: 0.1beta

버그를 신고해 주시면 최대한 빨리 수정하겠습니다. 새해에는 쉬는 시간이 없습니다.

스타일을 수정할 필요가 없다면 tbl.css를 로드할 필요가 없으며, tbl.js가 스타일 시트를 동적으로 로드합니다.

기존 DOM 노드를 기반으로 2행 테이블을 만들어 보겠습니다.

1 html:<html><body><p></p></body></html>
2 new tbl(document.body.children[0],{data:[["row1"],["row2"]]});

로그인 후 복사

문서 본문에 자체 생성한 DOM 노드를 삽입합니다.

1 var tb = new tbl();
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1"],["row2"]]);

로그인 후 복사

여러 필드가 있는 테이블의 경우 열 너비는 백분율을 사용하여 조정됩니다.

1 var tb = new tbl(undefined, {format:[{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"}]});
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1","data","data","data","data"],["row2","data","data","data","data"]]);

로그인 후 복사

목록 스타일, 최대 높이 300px, 머리글 없음, 제목 없음, 바닥글 없음, 데이터 5개, 버튼, 행 가져오기색인.

이 방법을 사용하면 인터레이스 색상이 변경되며 CSS를 수정하여 스타일을 무효화할 수 있습니다.

1 html:<html><body><p></p></body></html>
2 var tb = new tbl(document.body.children[0], {
3 editable: false, maxheight: "300px", header: false, title: false, footer: false, data: [[1], [2, "remove"], ["nan - not a number", "del"], [4, "del"], [5, "del"]], page_size: 100,
4 format: [
5      { width: "90%", nancenter: true, input: {type:"text"}},
6      { width: "10%", editable:true, input: { type: "button", value:"del", onclick: function () { tb.delete(tb.get_related_rowid(this));}}}
7      ]
8 });

로그인 후 복사

전체 테이블 편집, 단일 선택, 한 행 선택 필수, 페이징.

먼저 데이터를 초기화합니다. tbl.js에 바인딩된 데이터는 배열이어야 합니다.

두 번째 열은 어떠한 경우에도 편집이 불가능할 것으로 예상합니다.

 1 var tb_data = [];
 2 for (var i = 0; i < 106; i++) {
 3      tb_data[i] = [Math.random()>0.5?true:false, Math.random(), "1970-01-01", Math.floor(Math.random()*10), i, 0];
 4 }
 5 tb_data[i] = "this is group"; i++;
 6 tb_data[i] = ["this is text"]; i++;
 7 for (; i < 578; i++) {
 8      tb_data[i] = [i, Math.random(), "2017-02-01"];
 9 }
10 var tb = new tbl(document.body.children[0], {
11      editable:true,select:tbl.single,must_select:true,paging:true,data:tb_data,page_size:15,
12      format: [
13          { width: "5%", input: { type: "checkbox", check: "true" } },
14          { width: "30%", name:"name", uneditable:true },
15          { width: "20%", name:"date", input: { type: "date" } },
16          { width: "10%", name:"select", input: {type:"select", options:[0,1,2,3,4,5,6,7,8,9]} },
17          { width: "20%" },
18          { width: "15%", input: {type:"radio", name:"only"}}
19      ]
20 });

로그인 후 복사

API:

추가하는 데이터 행은 배열이 아니어야 합니다. 그룹 제목 텍스트로 사용됩니다.

삽입 데이터 삽입

바인딩 새 데이터 소스 바인딩

삭제 삭제행

clear 정리

edit 행 편집, 빈 매개변수는 전체 테이블 편집을 의미합니다

select 행 선택

cancel_edit 편집 취소

cancel_select 선택 취소

select_change 변경 선택기능설정

읽기 전용속성:

tbl::selects 이미 선택된 행

tbl::data data

tbl::dom DOM 노드

tbl::edits 편집 중인 행, 전체 테이블 편집은 적용되지 않습니다

구성 옵션:

max_height 최대 높이, 초과 시 스크롤바 표시
page_size 페이지 크기
데이터 초기화 데이터
헤더 헤더 표시 여부
바닥글 표시 여부
info 정보 표시 여부
paging 페이징 표시 여부
title_bar 제목 표시줄 표시
제목 제목 표시줄 텍스트
search 검색 상자 표시
editable 전체 표 편집
select 유형 선택 : 0, 선택할 수 없음 1, 라디오 선택 .2, multi-select.tbl.single == 1, tbl.multiselect == 2
select_change 선택 설정이벤트 처리 must_select 행
형식 열 형식
너비를 선택해야 하며 유효한 HTML 너비일 수 있습니다. 예: 100px 또는 20%.
입력은
상태 의 입력 노드 속성을 편집하는 데 사용됩니다. 이는 표에 표시된 html/input 속성 이름 필드 이름과 동일합니다. 헤더
편집 불가능한 열은 편집할 수 없습니다
편집 가능한 열은 항상 편집 가능한 상태입니다
nancenter non-numeric center