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 라이브러리들이 있고, 각각 그리드테이블을 지원하는 것으로 알고 있습니다. 어느 한 가지든 익숙해질 필요가 있지 않나 생각됩니다.

저작자표시 비영리 변경금지
http://developer.yahoo.com/yui/download/ 를 통해서 다운받은 zip파일을 압축을 풉니다. /build 폴더를 웹 기준디렉토리 아래 /js/yui/ 에 놓아둡니다.
/js/yui/build 아래 있는 js와 skin 파일들을 사용할 수 있습니다.

저작자표시 비영리 변경금지
Yahoo User Interface (http://developer.yahoo.com/yui/)
- BSD 라이센스의 오픈소스 Ajax 프레임워크

구성요소
1. The YUI Compressor : javascript, CSS 용량 최소화 기능
2. YUI Doc : javascript API 문서 생성기
3. YUI Developer Tools : Logger, Profiler, Profiler Viewer, Test Utility 등 javascript용 디버깅, 성능 개선 도구
4. YUI Core : YAHOO Global Object, DOM Collection, Event Utility 등 코어
5. YUI Library Utilities :
Animation Utility
Browser History Manager
Connection Manager (for XHR/Ajax)
Cookie Utility
DataSource Utility
Drag and Drop Utility
Element Utility 
Get Utility (dynamic script/css loading)
ImageLoader Utility
JSON Utility
Resize Utility
Selector Utility 
The YUI Loader Utility
6. YUI Library Controls/Widgets :
AutoComplete
Button
Calendar
Carousel 
Charts [experimental]
Color Picker
Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)
DataTable
ImageCropper 
Layout Manager
Menu
Paginator
Rich Text Editor
Slider
TabView
TreeView
Uploader [experimental]
7. YUI CSS Tools : 스타일 관련 도구
8. 그 밖에 290 여개의 예제와 검색 가능한 API, 입문 가이드

요즘은 DataTable 작업을 주로 하고 있습니다.

저작자표시 비영리 변경금지
웹개발을 하면서 데이터의 전달은 중요한 디버깅 요소입니다.
어떤 데이터들이 전달이 되었는지 firebug에서도 확인할 수 있습니다.

firebug 에서 parameter확인

firebug 에서 parameter확인


버그를 기준으로 하단 회색줄의 Net 탭을 클릭합니다. 상단의 메뉴들이 변하는데, 요약하면 다음과 같습니다.
All: 모두 나옵니다.
HTML: 이미지, CSS, JS 다 빼고 html 만 목록에 보입니다.
CSS: CSS 파일목록만 보입니다.
JS: JavaScript 파일들만 보입니다.
XHR: XmlHttpRequest 의 줄임인데, Ajax의 중심이죠. Ajax호출정보만 따로 모았습니다.
Images: 이미지 목록만 나타납니다. 아래 목록에서 썸네일을 볼 수 있죠.
Flash: 현대 웹에서 중요한 자리를 꿰찬 swf 목록이 주르륵.

목록을 클릭하면 탭이 또 보입니다. 이노무 탭 세상. 다 탭이래요. 탭댄스라도.. 또깍따그닥.
파라미터가 있는 주소면 Params 탭이 보입니다. Post방식일 때는 post라고 나옵니다.
아래 정리된 파라미터 이름과 그 옆에 값들이 보일 겁니다.

멋진 살충제입니다.
아, 살충제를 개발한 Joe Hewitt님이 Yahoo UI 팀에 fulltime firebug개발자로 이직하신다고 하네요.
n모사의 nzeo님 생각나네요. ㅎㅎ 그런 직장에 들어가기 전에는 side-job으로 firebug를 개발하셨는데, 아주 잘 되었네요. 돈 받으면서 자기가 키운 프로그램을 계속 키운다는 행복한 개발자의 이야기였습니다.

+ Recent posts

티스토리툴바