jQuery를 EasyUI 데이터 그리드 - 병합 된 셀
데이터 그리드 (데이터 그리드)는 종종 세포의 일부를 병합해야합니다. 이 튜토리얼은 어떻게에서 데이터 그리드 (데이터 그리드)에서 셀을 병합하는 방법을 보여줍니다.
단순히 정보 매개 변수를 병합 전달 'mergeCells'메서드를 호출, 데이터 그리드 (DataGrid를) 셀을 병합하려면 데이터 그리드 셀을 병합하는 방법 (데이터 그리드)을 알려줍니다. 모든 병합 된 셀에서 첫 번째 셀뿐만 아니라, 다른 세포는 합병 후에서 숨 깁니다.
만들기 데이터 그리드 (DataGrid에)
<표 아이디 = "TT"제목 = "셀 병합"스타일 = "너비 : 550 픽셀, 높이 250 픽셀" URL = "데이터 / datagrid_data.json" singleSelect는 = "true"를 iconCls의 =은 rownumbers = "true"를 "아이콘이 절약" idField는 = "항목 ID"매김 = "진정한"> <THEAD = 냉동 "진정한"> <TR> <목 필드 = "제품 ID"너비 = "80"포맷터 = "formatProduct"> 제품 ID </ 일> <목 필드 = "항목 ID"너비 = "100"> 항목 ID </ 일> </ TR> </ THEAD> <THEAD> <TR> 가격 <목은 = "2"열 병합> </ 번째> <번째 /> 속성 <목은 = "2"필드 = "ATTR1"너비 = "150"을 ROWSPAN> Stauts <목은 ROWSPAN = "2"필드 = "상태"너비 = "60"= "센터"정렬> </ 번째> </ TR> <TR> <목 필드 = "LISTPRICE"너비 = "80"= "권리"정렬> 리스팅 가격 </ 일> 단위 비용 <목 필드 = "unitcost"너비 = "80"= "권리"정렬> </ 번째> </ TR> </ THEAD> </ 테이블>
병합 된 셀
데이터가로드 될 때, 우리는 그렇게 onLoadSuccess 콜백 함수에 다음 코드를 배치, 데이터 그리드 (DataGrid를) 세포의 일부를 병합합니다.
$ ( '# 고작').에서 Datagrid ({ onLoadSuccess : 함수 () { VAR은 =을 [{병합 인덱스 : 2, ROWSPAN : 2 }, { 인덱스 : 5, ROWSPAN : 2 }, { 인덱스 : 7, ROWSPAN : 2 }]; 대한 (var에 나는 = 0; 나는 merges.length을 <; 내가 ++) $ ( '# 고작').에서 Datagrid ( 'mergeCells', { 인덱스 : 병합 [i]를있는 .index, 필드 '제품 ID', ROWSPAN : 병합 [i]를 .rowspan }); } });