HTML 태그를 DataTable로
ColumnSet의 생성자에 넣어줄 배열을 만들 때 각 Column의 속성 중에 text에 적는 값과 <th> 태그에 적는 값이 같으면 맵핑이 됩니다.
그리고 관련된 css와 js파일을 사용해 주면 IE와 FF에서 동일하게 나타납니다.
FF
IE
<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를 활용해서 좀 더 쉽고 간편하게 사용할 수 있는 방법을 찾아야겠습니다.
ck93.zip예제코드 입니다.