Yahoo UI DataTable 使用範例

在設計網路應用程式時，常必須呈現表格資料，表格呈現出來後，用戶也必定直覺的發問，資料這麼多可不可以分頁顯示，可不可以稍微排序一下。自己來 coding 當然只是多花點時間而已，現在 Yahoo UI 不只可以提供這些功能，還有更多的控制選項可以調整，更好的是不用為 browser 相容性傷腦筋。Yahoo UI 網站已經有相當完整的範例了，只是看不太習慣自己來寫一個。

首先要先 include 以下的 css、 js 檔

<!– datatable includes below –>
<link rel=”stylesheet” type=”text/css” href=”/js/yui/build/datatable/assets/skins/sam/datatable.css”>
<script src=”/js/yui/build/yahoo-dom-event/yahoo-dom-event.js”></script>
<script src=”/js/yui/build/element/element-beta-min.js”></script>
<script src=”/js/yui/build/datasource/datasource-beta-min.js”></script>
<script src=”/js/yui/build/datatable/datatable-beta-min.js”></script>

接下來在 body 內留一個 container 給 Yahoo UI 放產生的 table

<body class=”yui-skin-sam”>

<div id=”DataTableYUI”></div>

再來準備1支程式餵資料給 DataTable 元件，例如以下 datafeed.php

<?php

$sql=”select name,age from user”;
$result=mysql_query($sql);

$data=array();
if ( $result ) {
while ( $row=mysql_fetch_assoc($result) ) {
array_push($data,$row);
}
$status=0;
} else {
$status=1;
}

$response[‘status’]=$status;
$response[‘data’]=$data;

echo json_encode($response);

?>

利用以下 javascript 即可將 data table 呈現在之前定義的 div 內

function showDataTable() {
var ds=new YAHOO.util.DataSource(“datafeed.php”);
ds.responseType=YAHOO.util.DataSource.TYPE_JSON;
ds.responseSchema={
resultsList: “data”,
fields: [“name”,”age”]
};
var cols=[
{ key: “name”, label: “User name” },
{ key: “age”, label: “User age”, sortable: “true” }
];
var dt=new YAHOO.widget.DataTable(“DataTableYUI”, cols, ds, {} );
}

Yahoo UI 網站還有更多的範例及 API 說明可以參考。

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 3.00 out of 5)

Loading...