HTML 태그를 DataTable로
JEDI/YUI : 2007. 3. 19. 18:54
ColumnSet의 생성자에 넣어줄 배열을 만들 때 각 Column의 속성 중에 text에 적는 값과 <th> 태그에 적는 값이 같으면 맵핑이 됩니다.
그리고 관련된 css와 js파일을 사용해 주면 IE와 FF에서 동일하게 나타납니다.
FF
IE
여기서 고정적으로 사용되는 부분이랑 변동 되는 부분을 분리 해내는게 다음 과제가 되겠네요. CustomTag를 활용해서 좀 더 쉽고 간편하게 사용할 수 있는 방법을 찾아야겠습니다.
예제코드 입니다.
그리고 관련된 css와 js파일을 사용해 주면 IE와 FF에서 동일하게 나타납니다.
FF
<!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>
<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를 활용해서 좀 더 쉽고 간편하게 사용할 수 있는 방법을 찾아야겠습니다.
예제코드 입니다.
YUI.zip'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 |
