みかんせい

dhtmlxとnode.jsで複数クライアントで同期するwebアプリを作ってみた。
参照:http://docs.dhtmlx.com/dataprocessor__live_update.html
Grid、TreeGrid、Scheduler、DataViewの4つで利用可能です。

ここではGridを例にします。

node.jsを用意

[root@c ~]# yum --enablerepo=epel install nodejs

gridLive_nodejs.zip のserver.js

この圧縮ファイルは下記のページに置かれている
http://docs.dhtmlx.com/dataprocessor__live_update.html
2016y05m09d_230347752.png

これを取得して、展開します

[root@c src]# pwd
/opt/src
[root@c src]# ls -l gridLive_nodejs.zip
-rw-r--r-- 1 root root 40119  5月  9 22:31 gridLive_nodejs.zip
 
[root@c src]# unzip -d /opt/gridLive_nodejs gridLive_nodejs.zip

まだ早いけど、この中のserver.jsを動かしておきます。

[root@c src]# cd /opt/gridLive_nodejs/
[root@c gridLive_nodejs]#
[root@c gridLive_nodejs]# node nodejs/server.js
Server running

これをデーモン起動にすればいいのだが、、まだ方法が分からん。

live_updates.js

こちらは、Forumページにありました。
http://forum.dhtmlx.com/viewtopic.php?f=6&t=38711
2016y05m09d_230646999.png

dhtmlx本体

「Standard Edition v.4.6」をダウンロードします

live_updatesサンプルページ

下準備はそろいました。
簡単なサイトを準備します。基本はdataProcessor APIを使って、Grid表の修正、追加、行削除がそのままDB側にも反映できる形にして、
それからnodejsによるlive_update.jsを組み込むっていう感じです。

ここでは /var/www/lv を基点にページを作ります。
まずは dhtmlx をここに展開します。

[root@c ~]# mkdir /var/www/lv  && cd /var/www/lv
[root@c lv]# unzip /opt/src/dhtmlxSuite_v46_std.zip  codebase/*
[root@c lv]# vi index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
        <title>For demo purpose only :: &1</title>

  <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
  <script src="codebase/dhtmlx.js"></script>
  <script src="codebase/live_updates.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript" src="http://localhost:8008/sync.js"></script>
<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setHeader("Column A, Column B");
    mygrid.setInitWidths("100,*");
    mygrid.setColTypes("edtxt,ed");
    mygrid.setColSorting("connector,connector");
    mygrid.enableMultiselect(true);
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();
    mygrid.loadXML("php/get.php");
    var dp = new dataProcessor("php/update.php");
    dp.live_updates("http://localhost:8008/sync");
    dp.init(mygrid);
</script>
</head>
<body >
   <div id="gridbox" width="350px" height="550px" style="background-color:white;overflow:hidden"></div>
</body>
</html>
[root@c lv]#
最新の60件
2024-12-08 2024-12-05 2024-12-04 2024-11-28 2024-11-23 2024-11-22 2024-11-15 2024-11-14 2024-11-12 2024-11-06 2024-11-05 2024-11-04 2024-11-02 2024-11-01 2024-10-29 2024-10-28 2024-10-27 2024-10-23 2024-10-18 2024-10-17 2024-10-15 2024-10-14 2024-10-13 2024-10-11 2024-10-10 2024-10-09 2024-10-08 2024-10-05 2024-10-04 2024-10-03 2024-10-02 2024-10-01 2024-09-30 2024-09-29 2024-09-28 2024-09-27 2024-09-22 2024-09-20 2024-09-17

edit


トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-05-09 (月) 23:40:56