slickgridで行ごとに編集可否を設定する

Question

slickgridで、現在行を追加するボタンは実装できているのですが、
追加した行のカラムのみ編集可能にしたいです。
また、その中でも編集可能にしたい列と不可にしたい列があります。
どのようにして実装すればよいのでしょうか。

Answer 1

実コードを貼ることができないので、以下のソースを見ながら読んでください。
https://github.com/6pac/SlickGrid/blob/master/slick.editors.js#L24

前に業務で実装したときは、行ごとに追加した行か否かのフラグをもたせて、
セルのeditorを実装して（上記のTextEditorをコピペすれば基本OK）、this.initで行にセットされたフラグを参照し（args.item.hogehoge で参照可能です)

編集不許可の場合は、以下のようなコードで編集をキャンセルする

 $(args.container).removeClass("editable"); // セルの色が変わるので戻す
 args.cancelChanges();  // 編集キャンセル

という実装をしました。

サンプルをgithubにアップしました。
https://github.com/yakumo-saki/slickgrid-celllock-example/

Comments

[sacba]

ダメもとで質問したので、回答してくださって本当に助かります。ありがとうございます。

以下のように実装したのですが、
（追加行だけ編集できるようにしたいので、追加行はOfficialPlanが0になるようにしている）

既存行（OfficialPlanは１）の、editorを設定しているセルを選択すると、以降他のセルを選択できなくなってしまいます。（ifとelseどちらかに入ると、以降全てのセルでその処理になってしまう）

どう実装すればよいでしょうか。申し訳ありませんがお願いいたします。

this.init = function () {
var navOnLR = args.grid.getOptions().editorCellNavOnLRKeys;
if(args.item.OfficialPlan == 0){　　　　　　　　　　　　　　// フラグ判別
$input = $("<INPUT type=text class='editor-text' />")
.appendTo(args.container)
.on("keydown.nav", navOnLR ? handleKeydownLRNav : handleKeydownLRNoNav)
.focus()
.select();
} else {
$(args.container).removeClass("editable"); // セルの色が変わるので戻す
args.cancelChanges(); // 編集キャンセル
}
};

[YakumoSaki]

手元で動作を確認したものをサンプルとしてgithubにアップロードしました。
https://github.com/yakumo-saki/slickgrid-celllock-example/

[sacba]

無事できました！
ご丁寧にサンプルまで作成していただいて、本当に助かりました。
ありがとうございました。