KUBOTAMA Memo: Webアプリケーション(tasklog)の作成(No.3)

今回は前回のプログラムをSigma Gridを利用するように変更しました。

マニュアルやサンプルを参考にして作成しましたが、細かいことが説明されていないので、ある程度は推測した結果も入っています。

まずHTMLです。


<html>
<head>
<title>TaskLog</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="/sigma_grid/grid/gt_grid.css" />
<link rel="stylesheet" type="text/css" href="/sigma_grid/grid/skin/vista/skinstyle.css" />
<script type="text/javascript" src="/sigma_grid/grid/gt_msg_en.js"></script>
<script type="text/javascript" src="/sigma_grid/grid/gt_const.js"></script>

<script type="text/javascript" src="/sigma_grid/grid/gt_grid_all.js"></script>


<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="tasklog.js"></script>
</head>
<body class=tundra>
<div id="taskGrid"></div>
</body>
</html>

どのcssファイルやjsファイルにリンクすればいいのか、わからなかったのでサンプルから必要なさそうなファイル以外を残しています。HTMLファイルではGridを表示した位置にdivセクションを配置します。

次はHTMLファイルからリンクされているJavascirptファイルです。


var dsOption = {
 fields: [
   {name : 'id', type : 'int' },
   {name : 'name'  },
   {name : 'estimate_time', type : 'int' },
   {name : 'start_time' },
   {name : 'finish_time'}
 ],
 recordType: 'object',
};


var colsOption = [
 {id: 'id' , header: "ID" , width :60  },
 {id: 'name' , header: "タスク名" , width :80  },
 {id: 'estimate_time' , header: "見積時間" , width :70  },
 {id: 'start_time' , header: "開始時間" , width :80  },
 {id: 'finish_time' , header: "終了時間" , width :80}
];

var gridOption={
 id : 'taskLog',
 width: "100%",  //"100%", // 700,
 height: "100%",  //"100%", // 330,
 container : 'taskGrid',
 replaceContainer : true,
 dataset : dsOption ,
 columns : colsOption,
 toolbarContent : 'nav | goto | add del',
 pageSize : 20
};

var taskGrid = new Sigma.Grid( gridOption );
Sigma.Util.onLoad( Sigma.Grid.render(taskGrid) );

$(function() {
 jQuery.getJSON('tasklog_select.php', function(json) {
   taskGrid.setContent(json.data);
 })
});

サンプルではDataSetのrecordTypeにはarrayが設定されていますが、あえてobjectを指定してみました。objectを指定した場合に参考になるサンプルが見つかりませんでしたが、以下のphpファイルで出力したJSON形式の配列をセットしたところ、うまく表示されました。


<?php
$dbname = 'tasklog.sqlite';
$link = new SQLiteDatabase($dbname, 0666, $sqliteerror);
if (!$link) {
   die('接続失敗です。'.$sqliteerror);
}

$sql = "SELECT * FROM task";
$result = $link->query($sql, SQLITE_BOTH, $sqliteerror);
if (!$result) {
   die('クエリーが失敗しました。'.$sqliteerror);
}

$all_items = array();
while ($rows = $result->fetch(SQLITE_ASSOC)) {
 if ($rows['start_time'] == null) {
  $start_time = "--:--";
 } else {
  $start_time = $rows["start_time"];
 }
 if ($rows["finish_time"] == null) {
  $finish_time = "--:--";
 } else {
  $finish_time = $rows["finish_time"];
 }
 $item = array ( "id" => $rows['id'],
   "name" => $rows['name'],
   "estimate_time" => $rows["estimate_time"],
   "start_time" => $start_time,
   "finish_time" => $finish_time);
 
 array_push($all_items, $item);
}
$tasks = array( "data" => $all_items);

print(json_encode($tasks));
?>

前回からはレコードが一つ増えていますが、以下のように表示されました。

DataSetやColumnなどに、いくつかオプションが設定してありますが、サンプルから抜き出しただけなので、今後いろいろと調整していくつもりです。

ここまででデータベースに格納されているデータを表示することはできるようになりましたので、次はレコードの追加を実装するつもりです。

KUBOTAMA Memo

2008/11/30

Webアプリケーション(tasklog)の作成(No.3)

ラベル