jQuery_jquery를 기반으로 하는 동적 테이블 플러그인
- WBOY원래의
- 2016-05-16 18:08:571197검색
여기서는 사용자 입력 검증, 테이블 추가 및 삭제, 사용자 입력 데이터의 통계적 집계 및 해당 계산 열(제품 총 가격 = 제품 단가 * 제품 수량)을 동시에 제어해야 합니다. , 사용자가 제출하면 처리를 위해 백그라운드 서버로 제출을 가져온 다음 데이터베이스에 저장해야 합니다. 이 플러그인은 이러한 지루한 작업을 간단히 처리합니다.
플러그인 속성 설명:
1: rowTemplate: 열을 삽입하기 위한 템플릿입니다. 템플릿에서 일련 번호와 행 번호는 rownum의 클래스를 나타냅니다. 라디오 버튼의 이름 속성과 같이 고유한 숫자가 필요한 템플릿에는 각 td 셀에 고유한 이름 그룹이 필요합니다. 고유한 속성이 필요한 id와 같은 또 다른 예에는 {0} 자리 표시자가 필요합니다. 동시에, 테이블 처리에서 일부 행동 통계 행 또는 데이터의 고정 행은 사용자가 삭제하지 않으므로 fix=true가 필요합니다. 그리고 각 입력 또는 레이블 컨트롤에 대해 추출된 값을 반환해야 하는 컨트롤은 property="propertyname"으로 표시되어야 합니다.
2: addTrigger: 행 추가를 트리거하는 jQuery 선택기입니다.
3: addPosition: 삽입된 행의 삽입 위치입니다. 기본값은 마지막 행이지만, 필요에 따라 끝에 요약 행과 같은 고정 행이 있을 수 있으므로 3개가 있습니다. 추가 방법: 첫 번째 및 숫자 값. 양수는 줄의 처음부터 시작한다는 의미이고, 음수는 끝부터 시작한다는 의미입니다.
4: 제거 트리거: 삭제 표시입니다. 동시에 여러 개의 삭제 버튼을 가질 수 있습니다. 동시에 배열의 각 객체는 선택기 트리거 버튼이 있는 jQuery 선택기이기도 합니다. is first 첫 번째 행, 마지막 열 및 현재 열을 삭제합니다. 모든 삭제는 고정=true가 아닌 열을 삭제합니다.
5: 동시에 $(selector).updateSortNum();을 통해 모든 td 행 번호 열을 rownum으로 바꿀 수 있습니다. 사실 저는 여기서 td 제한을 제거하는 것을 고려하고 있습니다.
6: $(rowselector).getRowObj(): 속성이 속성인 자바스크립트 행 객체를 가져옵니다.
7:$(tableselector).getTableObj(): 행 개체의 컬렉션(배열)인 속성을 속성으로 사용하여 테이블의 자바스크립트 배열 개체를 가져옵니다.
8: getSource(saveHiddentField): xml 구성의 속성 세트를 가져옵니다. saveHiddentField 선택기가 전달되면 자동으로 saveHiddentField에 할당됩니다.
여기에는 item: , root: item은 데이터 xml의 각 행에 대한 노드의 기본 항목이고 root는 xml 루트 노드의 기본 루트입니다. xml을 얻은 후 백그라운드에서 직접 xml을 구문 분석하거나 DataSet.ReadXml()을 사용하여 이를 DataTable로 직접 변환할 수 있습니다.
8: $(inputselector).getValue(): 컨트롤 값 가져오기: text, label, checkbox, radio, label, td, textarea 값을 지원합니다. 라디오 값은 선택한 값이고, 체크박스 값은 선택한 모든 행 값을 ","로 구분한 문자열입니다.
9: 계산: 계산 요약, 배열 객체, 선택기 포함: 요약 표시 제어 재무 확인의 실제 지출 금액은 승인 금액보다 높을 수 없으며, 승인 금액은 실제 예산 금액보다 높을 수 없습니다. 선택기, 열: 요약된 속성은 위에 첨부한 속성 속성에 해당합니다. func: 요약 처리 방법입니다. 집계 함수(sum, max, min, count, avg 및 사용자 정의 함수(반환 값이 있어야 함))를 지원합니다. 입력 매개변수는 속성 값의 배열입니다.
10: CalculatesColumn: 계산을 트리거하는 속성 속성, 열 계산 열의 속성 및 func 사용자 지정 처리 함수를 나타내는 트리거 배열이 있는 js 배열이기도 한 계산 열입니다. (여기서 표현식을 사용하고 eval을 사용하여 자동 계산을 처리하고 싶었습니다. 하지만 필요한 변경 사항이 너무 많고 제어하기 어렵다고 느꼈기 때문에 사용자에게 프록시 대리자로 함수를 구현하도록 맡기는 것이 더 낫습니다. 콜백 기능으로), 제품 총 가격 = 제품 단가 * 제품 수량을 처리하는 데 사용할 수 있습니다. 위에서 언급한 검증 재정의 실제 지출은 승인 금액보다 높을 수 없습니다. 승인 금액은 실제 예산 금액보다 높을 수 없습니다. 동시에 검증 트리거로도 사용할 수 있습니다.
이 플러그인에는 데이터 유형 검증이 없습니다. 왜냐하면 검증 요구 사항이 너무 많이 바뀌기 때문입니다. 그리고 우리는 첫 번째 수준에 우수한 Jquer 검증 플러그인을 많이 가지고 있어 함께 사용하면 매우 실용적입니다. 동시에 직접 제어할 수도 있습니다. 예를 들어 두 가지 간단한 확인은 다음과 같습니다.
$(".datetime").live("focus", function() {
WdatePicker({ readOnly: true, dateFmt: 'yyyy 년 MM 월 dd 일' } )//MyDate97
} );
$(".number").live("keyup", function() {
this.value = this.value.replace(/[^-d. ]/g, '');
}).live("keydown", function(e) {
if (e.which == 189) {
$(this).val(-1 *parseFloat($(this).val())).trigger("change");
e.stopPropagation()
e.preventDefault()
}
}); 🎜>
위에 말도 안 되는 내용이 너무 많으니 아래에서 데모해 보겠습니다.
아, 이 플러그인에서 테이블은 w3c, thead 및 tbody 표준을 따라야 한다는 점을 상기시키는 것을 깜빡했습니다. 광고에서는 다중 헤더 구조가 아무리 복잡하더라도 헤더 설정을 직접 추가할 수 있습니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MEFASPNET.aspx.cs" Inherits="MEFASPNET" %>
<제목>
">
.TableStyle
{
너비: 99%;
높이: 자동;
오버플로: 숨김;
테두리: 1px 솔리드 #4772AB;
테두리 축소 : 축소;
배경: #D8EAFF;
여백:
}
.TableStyle thead
{ text-align:center; td
{
테두리: 솔리드 #4772AB;
테두리 너비: 0 1px 1px 0
패딩: 2px;
}
.TableStyle th
{
텍스트 정렬: 오른쪽;
글꼴 두께: 일반;
}
.TableStyle td
{
텍스트 정렬:
배경: #FFFFFF;
.TableStyle .title
{
너비: 99%;
글꼴 크기: 더 크게
줄 높이: 20px; 텍스트 정렬: 가운데
: url(images/right_head.jpg) 반복-x;
패딩: 0;
}
table.Grid th
{
너비: 99%;
높이: 16px;
오버플로: 숨김;
테두리: 1px 실선 #4772AB;
국경 붕괴: 붕괴;
배경: #D8EAFF;
왼쪽 여백: 1px;
글꼴 두께: 보통;
텍스트 정렬: 왼쪽;
}
테이블 입력
{
테두리: 0px;
너비: 98%;
}
<본문>