layuiフレームワーク概要
layuiはモジュール化されたオープンソースのフロントエンドUIフレームワークで、バックエンド管理システムの開発に最適です。VFP(Visual FoxPro)との組み合わせにより、迅速な開発が可能になります。
基本実装例
メイン画面 (contact.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>連絡先管理</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script type="text/html" id="actionTpl">
<a class="layui-btn layui-btn-xs" lay-event="edit">編集</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">削除</a>
</script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<input type="text" id="searchInput" placeholder="検索条件" class="layui-input">
<button id="searchBtn" class="layui-btn">検索</button>
<button id="addBtn" class="layui-btn layui-btn-normal">追加</button>
</div>
</div>
<table id="dataTable" lay-filter="dataFilter"></table>
</div>
<script>
layui.use(['table', 'layer'], function(){
const table = layui.table;
const layer = layui.layer;
// テーブル初期化
table.render({
elem: '#dataTable',
url: '/api/contacts',
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '名前', width: 120},
{field: 'phone', title: '電話番号', width: 150},
{field: 'memo', title: '備考'},
{fixed: 'right', title: '操作', toolbar: '#actionTpl', width: 150}
]],
page: true
});
// 各種イベント処理...
});
</script>
</body>
</html>
VFPバックエンド実装 (ctl_contact.prg)
DEFINE CLASS ContactController AS Session
PROCEDURE GetContactList
LOCAL lcSearchTerm, lnPage, lnLimit
lcSearchTerm = HttpQueryParams("search")
lnPage = VAL(HttpQueryParams("page"))
lnLimit = VAL(HttpQueryParams("limit"))
TEXT TO lcSQL NOSHOW
SELECT * FROM contacts
WHERE 1=1
ENDTEXT
IF !EMPTY(lcSearchTerm)
lcSQL = lcSQL + " AND (name LIKE '%" + lcSearchTerm + "%' OR phone LIKE '%" + lcSearchTerm + "%')"
ENDIF
lcSQL = lcSQL + " LIMIT " + TRANSFORM((lnPage-1)*lnLimit) + "," + TRANSFORM(lnLimit)
// データベース接続とクエリ実行...
RETURN JSONResult()
ENDPROC
PROCEDURE SaveContact
LOCAL loData
loData = JSONToObject(HttpGetPostData())
// データ検証と保存処理...
RETURN JSONResult(.T., "保存成功")
ENDPROC
ENDDEFINE
実装ポイント
- layuiのtableモジュールでデータグリッドを簡単に実装
- VFP側でRESTfulなAPIを実装
- ページネーションと検索機能の統合
- モーダルダイアログを使用したデータ編集