YUI 확장 Gird 컴포넌트 Part-1_YUI.Ext 관련

원래 주소

기사 날짜: 2006년 9월 26일

새 버전의 GIRD에서는 원격 데이터를 지원할 수 있습니다. 이 게시물에서는 페이징 및 원격 정렬 설정을 쉽게 이해할 수 있습니다. 새로운 포럼 인터페이스(구성 중)는 페이징 및 원격 정렬의 좋은 예이며 이 기사의 코드는 해당 예에서 나온 것입니다.

새로운 방법과 속성

LoadableDatatModel 개체(XMLDataModel 및 JSONDataModel의 상위 클래스)를 사용하여 페이징 및 원격 정렬을 구현하면 몇 가지 새로운 메서드와 속성이 있습니다.
다음 변수 "dm"은 DataModel의 인스턴스를 나타냅니다.

방법

• initPaging(url, pageSize, baseParams) 현실적인 페이징을 위한 가장 중요한 방법입니다. 이 방법을 사용하면 페이징을 한 번 초기화할 수 있습니다. 매개변수에 대한 자세한 내용은 아래 관련 속성을 참조하세요. fourm.js 사용 예:

  dm.initPaging('topics.php', 20);

• loadPage(pageNum, callback, keepExisting)새 페이지를 로드합니다. 데이터가 로드된 후 콜백이 호출됩니다. "keepExisting"은 현재 데이터를 덮어쓸지 아니면 기존 데이터에 새 데이터를 추가할지 결정합니다. fourm.js 사용 예:

  // the grid is ready, load page 1 of topics 
  dm.loadPage(1);

• isPaged()페이징 활성화 여부를 반환합니다.
• getTotalRowCount()사용 가능한 총 레코드 수(총 레코드 수)를 반환합니다. XMLDataModel에는 총 행 수를 가져오는 데 사용되는 새로운 속성 "totalTag"가 있습니다. 총 행 수는 서버에서 생성된 XML 문서의 "totalTag" 노드 값으로 반환됩니다. 이는 DataModel에 레코드 수를 알려주는 방법입니다. 특정 합계를 지정하려면 Gird가 초기화될 때 getTotalRowCount를 사용하여 합계를 재정의할 수 있습니다. forum.js는 기본 방법인

  dm = new YAHOO.ext.grid.XMLDataModel({   
    tagName: 'Topic',   
    totalTag: 'TotalCount',   
    id: 'id',   
    fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster'] 
  });
  

  다른 방법:

  dm = new YAHOO.ext.grid.XMLDataModel({   
    tagName: 'Topic',   
  	id: 'id',   
  	fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster'] 
   }); 
  dm.getTotalRowCount = function(){ return 500; //或者是你要的数量 }
  		

  을 사용합니다.
• getPageSize()구성된 페이지 크기를 반환합니다.
• getTotalPages() 페이지 크기와 총 행을 사용하여 사용 가능한 페이지 수를 계산합니다.

속성

• pageSize - 페이지당 레코드 수입니다. initPaging 매개변수에서 설정하거나 직접 설정할 수 있습니다.
• pageUrl - 호출된 URL, 데이터를 반환합니다. initPaging 매개변수에서 설정하거나 직접 설정할 수 있습니다.

// 调用“/data.php”产生所有分页、排序
dm.pageUrl = '/data.php';
//这种方式也不错
dm.initPaging('/foo.php', 50);

• remoteSort - 유형: 부울 True 값은 원격 정렬을 활성화합니다. 위의 initPaging() 메서드를 사용하면 자동으로 TRUE로 설정되고, 그렇지 않으면 기본값은 false로 설정됩니다.
• baseParams - 유형: 개체. 모든 페이징 및 정렬 요청에는 "키, 키 값 이름/값"으로 구성된 개체가 포함됩니다. 포럼에서 나는 이것을 사용하여 선택한 forumId를 내 데이터 스크립트에 전달합니다:

// 传入已选择好forumId的值，产生所有分页、排序
dm.baseParams['forumId'] = forumId;

• paramMap - 객체 유형. 모델은 페이징 및 정렬 요청을 추가하고 기본적으로 page, pageSize, sortColumn 및 sortDir 매개변수를 전달합니다. 이러한 매개변수 이름을 사용하지 않으려면 맵 매개변수를 통해 이름을 바꿀 수 있습니다. 예:

//"page"改名为"pageNum"
myDataModel.paramMap['page'] = 'pageNum';

모든 기능을 함께 그룹화

Gird를 만드는 과정과 페이징 코드는 다음과 같습니다.

// 限制选区只是一行
sm = new YAHOO.ext.grid.SingleSelectionModel();
// 监听选区改变
sm.addListener('selectionchange', onSelection);

// 创建我们的column model
cm = new YAHOO.ext.grid.DefaultColumnModel([
 {header: "Topic", width: 330}, 
 {header: "Author", width: 100}, 
 {header: "Posts", width: 40}, 
 {header: "Last Post", width: 150}, 
 {header: "Last User", width: 120}
]);
//这个属性设置默认的排序，免得在每个column上设置。
cm.defaultSortable = true;

// 创建数据模型data model。注意"totalTag"条目。它告诉model去寻找该节点下全部的纪录。
dm = new YAHOO.ext.grid.XMLDataModel({
  tagName: 'Topic',
  totalTag: 'TotalCount',
  id: 'id',
  fields: ['title', 'author', 'totalPosts', 'lastPost', 'lastPoster']
});
// 初始化分页
dm.initPaging('topics.php', 20);
//设置我们想转入的附加参数（可作为第三个参数传入到inirPaing）
dm.baseParams = {'forumId': 4};
dm.setDefaultSort(cm, 3, 'DESC');
//当每次新数据加载后，选择GIRD的第一行
dm.addListener('load', sm.selectFirstRow, sm, true);

// 创建grid对象
grid = new YAHOO.ext.grid.Grid('topics-grid', dm, cm, sm);
grid.render();

//分页工具条，下面将会分析
var toolbar = grid.getView().getPageToolbar();
toolbar.addSeparator();
toolbar.addButton({
  className: 'new-topic-button',
  text: "New Topic",
  click: createTopic
});

// 当gird准备好，加载话题的第一项
dm.loadPage(1);

페이징 툴바

페이징 버튼이 더 일반적으로 사용되므로 페이징을 구현하기 위한 간단한 도구 모음 구성 요소를 작성하기로 결정했습니다. 이번에 출시된 YAHOO.ext.Toolbar는 매우 간단하며 툴바의 페이징을 구현하는 몇 가지 메소드를 제공합니다. 버튼 설정은 CSS로 이루어집니다. 아이콘 ICON은 16X16 표준 그림이어야 합니다. 그렇지 않으면 이미지가 잘립니다. 버튼 추가 예:

toolbar.addButton({
  className: 'my-button',
  tooltip: "New Foo",
  click: createFoo
});

CSS의 ENABLE/DISABLED 아이콘:

.my-button{
 background-image: url(../images/foo.gif);
}
.ytb-button-disabled .my-button{
 background-image: url(../images/foo-disabled.gif);
}

텍스트가 포함된 아이콘 만들기(JS 작성은 위 예와 같습니다):

toolbar.addButton({
  className: 'my-button',
  text: "New Foo",
  click: createFoo
});

그러나 CSS 작성은 약간 복잡합니다.

.ytoolbar .my-button{
 background-image: url('images/foo.gif');
 background-position: 0px 0px;
 background-repeat: no-repeat;
 padding-left:18px;
 padding-top:1px;
 width:auto;
 display:block;
}

많은 아이콘으로 툴바를 맞춤설정하려면 CSS 스프라이트가 가장 좋습니다. GIRD 새 버전의 페이징 아이콘은 CSS Sprite를 사용할 수 있습니다.

다음 단계는. .

다음 포스팅에서는 그리드의 드래그 앤 드롭과 두 그리드 사이의 드래그 앤 드롭에 대해 이야기하겠습니다.

잭