jQuery-DataTablesで作成されたテーブルを編集するプラグイン DataTables-Editableについて

#ご紹介

github:DataTables-Editable

dataTables公式の"Editor"は有料なのでなんとかできないものかと作ってみました。

使ってみて頂ければ幸いです。

以下は使用方法。日本語を英訳したgithubのREADMEを和訳したものです。

DataTables-Editable

jQuery.dataTables用のシンプルなテーブルエディターです。

このプラグインは、行の追加、行の削除、セルの直接編集、およびajaxを利用してサーバーへのフォームの送信が可能です。

使用方法

下記のライブラリが必須です。

1. jQuery
2. jquery.dataTables(1.10.8以上)
3. dataTables.buttons

いつも通りテーブルにdataTablesを適用します。

その際オプションで　dom　buttons　 editable　を設定すれば使用可能です。

送信データの構造

送信されるデータは既存データの訂正、新規データの追加、既存データの削除それぞれに別の名前で送信されます。どの行を更新、削除したかを判別する為のキーはデフォルトでは行番号ですがオプションで特定カラムの値に変更可能です。

{
    updates:{
        keyData : {
            name : data
        },
        keyData:{
            name : data
        },
    },
    inserts:[
        {
            name : data,
            name : data,...
        },
    ],
    deletes:[
        keyData , keyData, ....
    ]
}

オプション

設定可能なオプション。

Option	Type of accepted value	default	Description
add	boolean	true	行の追加を可能にします
delete	boolean	true	行の削除を可能にします
columns	boolean / array	true	編集を許可するカラムのインデックスを配列で指定できます。デフォルトでは全てのカラムが編集可能です。
rows	boolean / array	true	編集を許可する行のインデックスを配列で指定できます。デフォルトでは全ての行が編集可能です。
cells	null / array	null	特定のセルの編集を許可します。
inputType	string	text	編集時に表示されるインプットタグの種類を設定できます。 text number date select textarea のいずれかでデフォルトはtextです。
attr	object	{}	インプットタグに任意の属性を設定できます。
format	object	Y-m-d	インプットタグで日付入力した際の表示形式を設定できます。
formula	object	{}	セレクトタグの場合オプションタグを設定できます。
columnDefs	array	[]	カラム毎にインプットタグを変更する場合はこちらで設定します。
saveType	string	auto	データの保存のタイミングを設定します。autoの場合はセル又は行の追加、削除をする度に保存されます。manualの場合はsubmitボタンを押すまで設定の保存はされません。
ajax	object		データ送信用のajaxの設定項目です。
keyData	string / boolean	false	行を特定する為の値を持つカラムを設定できます。デフォルトでは行番号です。
validateDraw	string / boolean	false	saveTypeがマニュアルの場合に行、又はテーブルの再計算を編集ごとにする場合に設定します。セルの値が他のセルの値に依存して決まる表の場合に役に立ちます。
onSave	function		編集を送信後(成功、失敗を問わず)のコールバック
onSaveDone	function		編集を送信し成功した際のコールバック
onSaveFailed	function		編集を送信し失敗した際のコールバック

inputType

text,number,date,select,textarea

編集時に表示されるインプット(セレクト又はテキストアエリア)タグを設定します。
属性やオプションタグをつける場合にはattr、foramt、formulaオプションで設定してください。
セレクトタグの場合にはformulaオプションでオプションタグの設定が必須です。
カラム毎に入力方法を変える場合にはcolumnDefsオプションで設定してください。

simple example

var table = $('#example').DataTable({
    ajax:"example.json",
    dom: 'Bfrtip',
    editable:{
        inputType:"number",
        attr:{
            "min": 1,
            "max": 9999,
        },
        columnDefs{
            target:[3],
            inputType:"select",
            formula:[
                "選択肢１",
                "選択肢２",
                "選択肢３",
            ]
        },
    },
    buttons: []
});

詳しくはgithubのソースからexampleをご覧ください。

saveType

auto manual

manualを設定するとsubmitとcancelのボタンが出現して、submitが押されるまで保存(送信)が保留されます。またcancelを押すと最終保存の直後までテーブルを巻き戻せます。

ajax

編集したデータをサーバ等に送信するにはajaxオプションの設定が必要です。
最低限_url_さえ設定すればOKです。

url(ajax.url)string-Set url to send data.

type(ajax.type)string-"post" か _"get"_を指定できます。デフォルトはPOSTです

data(ajax.data)object-テーブルを編集したデータの他に一緒に送りたいデータがある場合はここで設定してください。

simple example

var table = $('#example').DataTable({
    ajax:"example.json",
    dom: 'Bfrtip',
    editable:{
        ajax:{
            url:"example10.php",
            type:"post",
            data:{
                user:"username",
                date:"2021-05-07",
            }
        },
    },
    buttons: []
});

keyData

データが送信された場合どの行が編集されたのかを特定する為に何らかのキーが必要なはずです。　　
デフォルトでは行番号が設定されますがこのオプションで特定のカラム(id等を想定)の値を行のキーに使用できます。

*注意 設定したカラムの持つ値がユニークかどうかは判定されません。

validateDraw

マニュアルセーブタイプの場合保存が実行されるまで編集をしたセル以外の場所は再描画されません。普通は問題ないはずですが他のセルに依存して内容が決まるセル(column.renderを使っている場合など)がある場合には不都合があるかもしれません。

このオプションを設定するとセル編集時に行、又はテーブル全体を再描画させます。場合によっては重くなるのでON,OFFボタンも同時に出現します。