Whiteship's Note

HTML 태그를 DataTable로

JEDI/YUI : 2007.03.19 18:54


ColumnSet의 생성자에 넣어줄 배열을 만들 때 각 Column의 속성 중에 text에 적는 값과 <th> 태그에 적는 값이 같으면 맵핑이 됩니다.

그리고 관련된 css와 js파일을 사용해 주면 IE와 FF에서 동일하게 나타납니다.
FF
사용자 삽입 이미지
IE
사용자 삽입 이미지

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>구매 대행 신청 도서 목록</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
/* custom css*/
#markup {margin:1em;}
#markup table {border-collapse:collapse;}
#markup th {border:1px solid #000;padding:.25em;background-color:#696969;color:#fff;}/*dark gray*/
#markup td {border-bottom:1px solid #000;padding:.25em;}
</style>

<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
</head>
<body>
<script type="text/javascript">
YAHOO.example.enhanceFromMarkup = function() {
    this.columnHeaders = [
        {key:"num",text:"순번",type:"number",sortable:true},
        {key:"bookName",text:"책이름",sortable:true},
        {key:"owners",text:"신청자 명단",type:"html"}
    ];
    this.columnSet = new YAHOO.widget.ColumnSet(this.columnHeaders);

    var markup = YAHOO.util.Dom.get("markup");
    this.dataTable = new YAHOO.widget.DataTable(markup,this.columnSet,null);
};

YAHOO.util.Event.onAvailable("markup",YAHOO.example.enhanceFromMarkup,YAHOO.example.enhanceFromMarkup,true);
</script>
<div id="hd"></div>
<div id="bd">
<div id="markup">
<table id="accounts">
    <thead>
        <tr>
            <th>순번</th>
            <th>책이름</th>
            <th>신청자 명단</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><a href="http://www.amazon.com/exec/obidos/tg/detail/-/1932394230/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance">JUnit Recipes: Practical Methods for Programmer Testing</a></td>
            <td>영회</td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href="http://www.amazon.com/exec/obidos/tg/detail/-/1932394885/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance">Java Persistence with Hibernate</a></td>
            <td>찬욱,기선,한수,계옥,연숙</td>
        </tr>
        <tr>
            <td>3</td>
            <td><a href="http://www.amazon.com/exec/obidos/tg/detail/-/159059584X/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance">Expert Spring MVC and Web Flow</a></td>
            <td>찬욱</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</body>
</html>

여기서 고정적으로 사용되는 부분이랑 변동 되는 부분을 분리 해내는게 다음 과제가 되겠네요. CustomTag를 활용해서 좀 더 쉽고 간편하게 사용할 수 있는 방법을 찾아야겠습니다.

예제코드 입니다.

'JEDI > YUI' 카테고리의 다른 글

YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
HTML 태그를 DataTable로  (0) 2007.03.19
YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: basic.html  (0) 2007.03.18
숙제  (0) 2007.03.17
Yahoo Wideget 개발 준비  (0) 2007.03.15
YUI(Yahoo! UI Library)  (0) 2007.01.22
top

TAG ,