jQuery를 EasyUI 데이터 그리드 - 확장 편집기
사용자가 데이터를 편집 할 수 있도록 몇 가지 일반적인 편집기 (에디터)는 데이터 그리드 (DataGrid를) 추가. 모든 편집기 (에디터)가 $ .fn.datagrid.defaults.editors 오브젝트에 정의 된이 새로운 상속 편집기 (에디터)를 지원하도록 확장 될 수있다. 이 튜토리얼에서는 데이터 그리드 (데이터 그리드)에 새로운 numberspinner 편집기를 추가하는 방법을 보여줍니다.
상속 확장 numberspinner 편집기
$ .extend ($. Fn.datagrid.defaults.editors, { numberspinner : { 초기화 : 기능 (컨테이너, 옵션) { var에 입력 = $ ( '<입력 유형 = "텍스트">') appendTo (컨테이너); input.numberspinner (옵션)을 반환; }, 파괴 : 기능 (대상) { $ (대상) .numberspinner ( '파괴'); }, getValue : 기능 (대상) { $ (대상) .numberspinner ( 'getValue')를 반환; }, setValue의 : 기능 (목표 값) { $ (대상) .numberspinner ( 'setValue에', 값); }, 크기 조정 : 기능 (대상, 폭) { $ (대상) .numberspinner ( '크기 조정', 폭); } } });
HTML 태그의 데이터 그리드 (데이터 그리드)을 만들기
<표 아이디 = "TT"스타일 = "너비 : 600PX, 높이 : 250 픽셀" URL = "데이터 / datagrid_data.json"제목 = "편집 가능한 데이터 그리드"iconCls은 = "아이콘 편집" > singleSelect이 = "true"를 idField이 = "항목 ID"fitColumns = "true"로 <THEAD> <TR> <목 필드 = 너비 = "60", "항목 ID"> 항목 ID </ 일> <목 필드 = "LISTPRICE"너비 = "80"정렬 = "오른쪽"편집기 = "{유형 : 'numberbox'옵션 : {정밀도 : 1}}"> 리스팅 가격 </ 일> <목 필드 = "unitcost"너비 = "80"= "오른쪽"편집기 = "numberspinner"정렬> 단위 비용 </ 일을> <목 필드 = "ATTR1"너비 = "180"편집기 = "텍스트"> 속성 </ 일> < '{: 옵션을'확인란 '유형을 {에'P '오프' '}} "목 필드 ="상태 "너비 ="60 "="센터 "편집기를 정렬> 상태 </ 일> 액션 <목 필드 = "액션"너비 = "80"= "센터"포맷 = "formatAction"를 정렬> </ 번째> </ TR> </ THEAD> </ 테이블>
우리는 '단가'필드 numberspinner 편집기를 지정합니다. 만약 행 편집을 시작할 때, 사용자는 numberspinner 편집기에 의해 데이터를 편집 할 수있다.