JavaScriptのGridライブラリでデータが連想配列の場合どのように出力するのが良いですか？

お世話になります。

現在、趣味でWeb開発をしているのですが、編集可能な表を実装したいと思っています。
一から作るのは大変すぎるのでライブラリを導入しようと考えていろいろ調べてみました。

するとhttp://jspreadsheets.com というサイトに
主だったものがまとまっているようで、この中から検討中です。

JavaScriptのGridライブラリ決定版 - SlickGrid という記事があり、最初はこれにしようかと思ったのですが、開発が止まってるっぽい。いちおう別の人がメンテを継続しているようですが若干不安

ということで、DataTablesを試してみたのですが、これは編集機能が有料のようなので趣味開発では却下！！！
ということで、SlickGridに戻ってきたのですが、Exampleをいくつか見てるとデータがJavaScriptで書かれています。 (ちなみにDataTablesは、通常のTableタグにIDを入れる形式)

最近ぽい開発の知識は、この開発をしながらキャッチアップ中なのでちょっと悩んでいるのですが。
JSにデータがある場合にどうやって吐くのがいいの？ということです。

HTMLの中に埋め込んだJavaScriptに出力
JavaScriptファイルをPHPなりでJavaScriptソースとして動的に作成して出力
２と似ていますが、データ部分のみのJavaScriptをPHPなりで動的に出力
その他

やりたいこととしては、

ページごとにいろいろな形の表を出したいので行列とも可変の表を出力したい
ページ遷移せずに編集可能となり、ページ遷移せずに更新したい(要は多分Ajax)

なので、上記のことが解決できれば、SlickGridで無くても良いのですが、
JavaScriptにデータが来る形式のライブラリの場合、同じことで悩まないといけなくなります。
あと先のことも考えると最新のライブラリよりも多少枯れているくらいの方が良いかなと思っています。

仕事ではないので、あまり縛られることも無いのですが、作り始めてから、「あ！」ってなると乗り換えたりとかも大変であまりうれしくないので、みなさんだったらどうするかなーということを聞いてみたいです。

よろしくお願い致します

2016/07/04 13:11追記

言葉が足りずにすいません、吐くといってるのは出力のことです。

SlickGridのサンプルを見るとHTMLに中のJavaScriptを埋め込む形式で書かれています。
https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-autotooltips.html

ヘッダ部分

JavaScript
1
2 var columns = [
3    {id: "title", name: "Title", field: "title"},
4    {id: "duration", name: "Duration", field: "duration"},
5    {id: "%", name: "% Complete", field: "percentComplete"},
6    {id: "start", name: "Start", field: "start"},
7    {id: "finish", name: "Finish", field: "finish"},
8    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
9  ];

データ部分

JavaScript
1var data = [];
2    for (var i = 0; i < 500; i++) {
3      data[i] = {
4        title: "Task " + i,
5        duration: "5 days",
6        percentComplete: Math.round(Math.random() * 100),
7        start: "01/01/2009",
8        finish: "01/05/2009",
9        effortDriven: (i % 5 == 0)
10      };
11    }

要は連想配列ですがこのような場合にどう出力するのがいいのかということです

「JavaScriptにデータが来る形式」と書いたのは、DataTablesの場合は、HTMLのTableでの出力を加工する形式のためこのような表現になりました。

データは、外部APIは使用しません。
サーバ側のデータベースに入っていて更新したいですが、
件数としては、１ページに最大10万件ほどのものを扱えるようにしたいです。
(一度に表示するのは、非現実というのは理解できていますが、この辺はまだ、自分の中でまとまっていないです)

今のところPHPからHTMLを直接出力していますが、将来的にはWeb以外の形でも
入出力を行いたいので、最初からAPI化しておいて非同期で取得するのが良いのかなと
質問をしてから思いました。

知識が古いため最近のモダンな仕組みを少しは取り入れたいと思っていますが、これもどうしようとちょっと思案しています。

質問が長くなってしまいましたが、最近はこうじゃないのとか、スキルアップのためにこうするとか、ざっくばらんな回答で構いませんので、たくさん回答が頂けたら嬉しく思います。

では、改めてよろしくお願い致します。

kei344

2016/07/04 03:52

「JSにデータがある場合」「吐く」「JavaScriptにデータが来る形式」とはどういうものでしょうか。具体的にお願いします。また、データの保存をどのような形（DBなのか外部APIなのかなど）で考えられていますでしょうか。

Mr_Roboto

2016/07/04 04:10

ありがとうございます、追記しますのでお待ち下さい。

行動規範の内容に同意します

回答2件

ベストアンサー

Ajax通信するためのサンプルも一応あるようです。URLをハードコーディングされているので使う場合書き直し必須ですが･･･。

JavaScript
1var loader = new Slick.Data.RemoteModel();

【SlickGrid/example6-ajax-loading.html at gh-pages · mleibman/SlickGrid · GitHub】
https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example6-ajax-loading.html

【SlickGrid/slick.remotemodel.js at gh-pages · mleibman/SlickGrid · GitHub】
https://github.com/mleibman/SlickGrid/blob/gh-pages/slick.remotemodel.js

「大量のデータに対応」を謳うライブラリもあるようです。クリック行を取得できるので、インターフェイスさえ作ってしまえば書き換えも可能です。

【ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌】
http://phpspot.org/blog/archives/2015/05/50clusterizejs.html

【Clusterize.js】
http://clusterize.js.org/

投稿2016/07/04 06:50

kei344

総合スコア69400

Mr_Roboto

2016/07/04 12:05

key344様ご回答ありがとうございます。なるほど、Exampleに既にありますね、たくさんあって見逃していました。 clusterize.jsも一度サイトを見たのですが、意味がよくわからずでスルーでしたｗ SlickGridも一応、５０万件は謳っているようなので、これでいいかなとも思いますが、clusterize.jsも検討してみます^^ 現時点でご回答いただいているお二方どちらも役に立つご回答でありがとうございました。

行動規範の内容に同意します

サンプルをいじって、データを ajax で取得してみるサンプルを書いてみました。

html
1<!DOCTYPE HTML>
2<html>
3	<head>
4		<title>SlickGrid example 1: Basic grid</title>
5		<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
6		<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
7		<link rel="stylesheet" href="examples.css" type="text/css"/>
8	</head>
9	<body>
10		<table width="100%">
11			<tr>
12				<td valign="top" width="50%">
13					<div id="myGrid" style="width:600px;height:500px;"></div>
14				</td>
15			</tr>
16		</table>
17
18		<script src="../lib/jquery-1.7.min.js"></script>
19		<script src="../lib/jquery.event.drag-2.2.js"></script>
20
21		<script src="../slick.core.js"></script>
22		<script src="../slick.grid.js"></script>
23
24		<script>
25			var grid;
26			var columns = [
27				{id: "title", name: "Title", field: "title"},
28				{id: "duration", name: "Duration", field: "duration"},
29				{id: "%", name: "% Complete", field: "percentComplete"},
30				{id: "start", name: "Start", field: "start"},
31				{id: "finish", name: "Finish", field: "finish"},
32				{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
33			];
34
35			var options = {
36				enableCellNavigation: true,
37				enableColumnReorder: false
38			};
39
40			$(function () {
41				var url = 'ajax.php';
42				$.getJSON(url, null, function (json) {
43					grid = new Slick.Grid("#myGrid", json, columns, options);
44				});
45			});
46		</script>
47	</body>
48</html>

ajax.php

php
1<?php
2
3$arr = [
4	[
5		title => "Task 1",
6		duration => "5 days",
7		percentComplete => 30,
8		start => "01/01/2009",
9		finish => "01/05/2009",
10		effortDriven => 0
11	]
12	, [
13		title => "Task 2",
14		duration => "5 days",
15		percentComplete => 30,
16		start => "01/01/2009",
17		finish => "01/05/2009",
18		effortDriven => 0
19	]
20];
21
22header('application/json');
23echo json_encode($arr);

投稿2016/07/04 05:02

退会済みユーザー

総合スコア0

Mr_Roboto

2016/07/04 05:46

Kosuke_Shibuya様ご回答ありがとうございます。ソースを出されてみるとそうだよな、普通に考えてそうだなと思いました。私の中にJSONとAjaxの経験値が少ないため出てこないのだろうということですね。これがすっと出てこない辺りに知識の古さを感じてしまいます。 HTMLかJSファイルに出すことしか思いつかないという ^_^；ほぼ、ビンゴっぽいですが、一応他の方が別回答くれないか期待してもう少し待ちます。

行動規範の内容に同意します

あなたの回答