javascript의 sort를 이용해서 처리할 뻔 했습니다. 메일링리스트 뒤져보다가 sortColumn 발견하고 한 줄로 처리했습니다. 휴~

var myDataSource = new YAHOO.util.DataSource(data.contents.ranks);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: ["rankid","rankName"]
};
//function sortby(a,b) {
//    return a["rankid"] - b["rankid"];
//}
//myDataSource.liveData.sort(sortby);
...
var myColumnDefs = [
    {key:"rankid", label:"id", sortable:true, resizeable:true},
    {key:"rankName", label:"name", sortable:true, resizeable:true},
    {key:"",label:"",resizeable:true, formatter:this.formatControl}
   ];
var myDataTable = new YAHOO.widget.DataTable("ranklist", myColumnDefs, myDataSource);
myDataTable.sortColumn(myDataTable.getColumn("rankid"));


웹에서 엑셀을 표현하는 것은 아주 많이 요구됩니다. 구글처럼 석박사로 구성된 사람들이 가까스로 만든 것이 구글독스의 스프레드시트입니다. 점점 발전하고 있죠. 놀라울 정도로 업그레이드되고 있습니다. 처음 나왔을 때는 볼품없었는데 말이죠.

YUI를 통해서 그 정도는 아니지만 그냥 볼만하게 그리드테이블을 구현할 수 있습니다.
http://developer.yahoo.com/yui/examples/datatable/dt_basic.html 
페이지를 보면 다음과 같이 깔끔한 테이블이 보입니다. 가장 기본적인 테이블이죠.

헤더를 클릭하면 다음과 같이 정렬도 가능합니다.

페이지 우측에 보면 추가적으로 가능한 많은 예제들이 있습니다.

ext-js, jQuery, dojo 등 여러 Ajax 라이브러리들이 있고, 각각 그리드테이블을 지원하는 것으로 알고 있습니다. 어느 한 가지든 익숙해질 필요가 있지 않나 생각됩니다.

+ Recent posts