jEasyUI データグリッド - HTMLテーブルを強力なグリッドに素早く変換
説明: jEasyUIフレームワークを使用して、シンプルなHTMLテーブルを機能豊富なインタラクティブなデータグリッドに変換し、Webページのデータ表示とユーザーエクスペリエンスを向上させる方法を簡単に学びます。
---一、jEasyUI データグリッドの概要
- jEasyUIは、jQueryベースのUIフレームワークであり、Web開発を簡素化する豊富なコンポーネントライブラリを提供します。
- データグリッド（DataGrid）は、jEasyUIの強力なコンポーネントの1つであり、表形式でデータを表示および管理するために使用されます。
- jEasyUI DataGridは、ソート、ページング、データ編集、行内編集、カスタム列などの機能をサポートしており、ユーザーエクスペリエンスを大幅に向上させます。
二、HTMLテーブルの変換手順
- jEasyUIファイルのインポート:
- jEasyUIライブラリファイルをダウンロードします。
- HTMLページにjQueryライブラリファイルとjEasyUIライブラリファイル（jquery.easyui.min.jsとeasyui.css）をインポートします。
- HTMLテーブルの作成:
<table>タグを使用して、基本的なHTMLテーブル構造を作成します。<thead>と<tbody>を使用して、テーブルヘッダーとデータ行を定義します。<th>を使用してテーブルヘッダーセルを定義し、<td>を使用してデータセルを定義します。
- JavaScriptを使用してDataGridを初期化:
- jQueryセレクターを使用してHTMLテーブル要素を選択します。
.datagrid()メソッドを呼び出して、DataGridを初期化します。
- DataGridオプションの構成:
- JSONオブジェクトを
.datagrid()メソッドに渡すことにより、DataGridの外観と動作をカスタマイズします。 - たとえば、列幅、タイトル、データソース、ページングなどを設定します。
- JSONオブジェクトを
三、コード例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI DataGrid 例</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<h2>基本データグリッド</h2>
<table id="dg">
<thead>
<tr>
<th data-options="field:'itemid',width:80">製品番号</th>
<th data-options="field:'productname',width:100">製品名</th>
<th data-options="field:'unitprice',width:80,align:'right'">単価</th>
<th data-options="field:'status',width:60,align:'center'">状態</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>マウス</td>
<td>20.00</td>
<td>有効</td>
</tr>
<tr>
<td>2</td>
<td>キーボード</td>
<td>40.00</td>
<td>有効</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
$('#dg').datagrid();
});
</script>
</body>
</html>