テーブルをエクセルみたいに編集できるライブラリのjquery.edit-table.js

jquery.edit-table.jsというライブラリをぼちぼち開発しています。

これは普通のtableタグのIDに対して$('#table_id').editTable()とするとテーブル内が編集できるようになるライブラリです。

ダブルクリック、もしくはF2を押下することでセルが編集モードになります。

カーソルでのセル移動やまだまだ未熟ですがセルのコピー機能などもあります。

エクセルのようなイメージです。

$('table_id').getJson()を使うことでテーブル内のデータをjsonで取得できます。

初期表示でajaxで取得したデータをテーブルにインポートしたい場合はeditTable()のオプションで指定することで

データをインポートすることができます。

まだまだ不十分ですがこちらのDEMOページをご参考ください。
http://ewai.info/jquery.edit-table/jquery.edit-table.html

githubはこちら
https://github.com/ewai/jquery.edit-table

対応中のIssueはこちら
https://github.com/ewai/jquery.edit-table/issues

カテゴリー: IT   タグ:   この投稿のパーマリンク

テーブルをエクセルみたいに編集できるライブラリのjquery.edit-table.js への4件のコメント

  1. yoshitake.s より:

    自分も今タスク管理サービス開発してまして、
    ちょっと前にeditableな表を作れるjsのライブラリ探してました。

    結局handsontableを使いましたけど、
    こちらもカスタマイズできそうだし使いやすそうですね~

    smartphoneからでも使えたりしますか?

  2. ewai より:

    これ知りませんでした、すごいクオリティですね。
    やろうとしていることがほとんど同じですが、
    レベルが違いすぎますね^^;

    jquery.edit-tableは始めはライブラリではなく他のサービスで使っていた
    JSなのですが、せっかくなのでライブラリにしてみた。

    セルにフォーカスした際に太枠になりますが、
    自分の中ではどうやって実装しようか悩んだとこなんです。
    なぜかというとTDを単純に太線にしたり中にaddしたInput要素なんかを
    太線にするとデザインが崩れたりするんです。
    なので結局しょうがないのでセルの左、上、右、下に固定配置のDIVを
    置いて太線を作りました。

    handsontableも同じ実装でDIV4つで実現させていますね。
    やっぱそうか・・・と一人で苦笑いしてしまいました。

    >smartphoneからでも使えたりしますか?
    スマホからは使えないですね。
    今はダブルクリックとF2でセルの編集なんです。

  3. へろへろ より:

    2年以上前の記事に恐縮ですが、初期表示でajaxで取得したデータをインポートさせたいんですが、デモには無いですよね。

    • ewai より:

      そうですね、取得した後が前提になっていますね。
      試したことはないですが、以下のようなやり方でうまくいかないでしょうか?

      $(function() {
       $.getJSON(“get.json”, function(jsonData) {
        // ここでeditTableしてはどうでしょうかね?
        $(‘#editTable’).editTable({
         headerNames:["xx","xx","xx"],
         types:["Date","String","String"],
         datas:jsonData
        });
       });
      });

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>