タイトルのとおり、ASP.NET MVC5でjavascriptグリッドのTabulatorを使用して行操作する方法(reactiveData)のサンプルコードを記載します。
いろいろはまったのでメモとして。同じようなことを考えている人のご参考になれば幸いです。
このURLを参考にしました。
http://tabulator.info/docs/4.6/reactivity#reactive-data
Grid直接編集画面などで行操作する場合は、TabulatorオプションのreactiveDataを使用したほうが良いかなと思いました。
そのわけは、TabulatorでURLでsetData()したり、setSort()を使用すると、Gridのスクロール位置が初期化されてしまうからです。データのDB更新後は再セットする必要はありますが。
また、URLを直接指定せず、オブジェクトの配列の操作で管理したほうがラクということもあります。
- サンプルコードを動かすためには、javascriptライブラリで下記のものが必要です。
1. tabulator.js
2. fetch-2.0.4.js (Tabulatorはfetchが3.0.0だと動かなかった)
3. promise-7.0.4.js
fetchとpromise(promiseはいろいろ複数ある)をそれぞれ見つけるのが難しかったのですが、下記URLのものを使用しています。
https://cdnjs.com/libraries/fetch/2.0.4
https://github.com/ForbesLindesay/promisejs.org/tree/master/polyfills/output
reactiveDataを使用する場合は、ajax URLでsetData()したりできなかったので、
データを$.getJSON()で取得して、配列にしてからデータセットしてあげる必要があるみたいです。reactiveDataはjavascriptのshift(), push(), unshift(), pop(), splice()によってトリガーされます。
プログラムの動き上、行追加と行削除は以下の方法が必要です。
行追加 splice()とpush()
行削除 splice()
※行追加でpush()を使用する理由は 最終行を選択した時、splice()では行追加できないから。TabulatorでreactiveDataを使用する場合は、TabulatorのaddRow()、updateRow()、DeleteRow()は使わない(使えない)ものと考えてよさそう。
下記がTabulatorで行追加・行削除をするサンプルコードです。
データ取得部分のgetJSON、データ登録の$.ajaxはサンプルコードでは省略してます。
※movable rowの時の順序変更に対応してないので後で見直しします。
@modelIEnumerable<WebApplication.Models.Member>@{ViewBag.Title="Index";}<divclass="row">
<divclass="colcol-md-12">
<divid="table"></div></div></div><divclass="row">
<divclass="colcol-md-12">
<buttontype="button"class="btn" id="addRow">行追加</button>
<buttontype="button"class="btn" id="deleteRow">行削除</button>
<buttontype="button"class="btn" id="register">登録</button>
<buttontype="button"class="btn" id="updateRow">選択行の更新(テスト用、ボタンでは実施しない)</button>
</div></div>@sectionScripts{@Scripts.Render("~/bundles/jqueryval")<script>vartableData=null;vartable=null;varrowPosition=null;(functionindex(){// 実際は$.getJSON()でデータ取得 // $.getJSON(url, null, function (response) {tableData=[ {id:1,name:"Billy Bob",age:"12",gender:"male",height:1,col:"red",dob:"",cheese:1},{id:2,name:"Mary May",age:"1",gender:"female",height:2,col:"blue",dob:"14/05/1982",cheese:true},{id:3,name:"Christine Lobowski",age:"42",height:0,col:"green",dob:"22/05/1982",cheese:"true"},{id:4,name:"Brendon Philips",age:"125",gender:"male",height:1,col:"orange",dob:"01/08/1980"},{id:5,name:"Margret Marmajuke",age:"16",gender:"female",height:5,col:"yellow",dob:"31/01/1999"},];table=createTable(); // });})();functioncreateTable(){returnnewTabulator("#table",{height:300,data:tableData,movableRows:true,reactiveData:true,selectable:1,tooltips:true,tooltipsHeader:true,columns:[{rowHandle:true,formatter:"handle",frozen:true,width:30,minWidth:30,frozen:true,},{title:"Name",field:"name",editor:"input",editorParams:{elementAttributes:{maxlength:"255",},},validator:"string",},{title:"Age",field:"age",editor:"number",editorParams:{min:0,max:200,},validator:"min:0",},{title:"Favourite Color",field:"col",editor:"input",},{title:"Date Of Birth",field:"dob",editor:"input",formatter:function(cell,formatterParams,onRendered){// return moment(cell.getValue()).format("YYYY-MM-DD HH:mm:ss");}},],rowClick:function(e,row){rowPosition=row.getPosition();},validationFailed:function(cell,value,validators){// ここにValidation処理},});}$("#addRow").click(function(){if(tableData!=null&&rowPosition!=null){if((tableData.length-1)==rowPosition){tableData.push({name:"Test(Add row bottom)",age:32});}else{tableData.splice(rowPosition+1,0,{name:"Test(Add row)",age:32});}}});$("#deleteRow").click(function(){if(tableData!=null&&rowPosition!=null){if(confirm("行削除をしてもよろしいでしょうか?")){tableData.splice(rowPosition,1);rowPosition=null;}}});$("#updateRow").click(function(){if(tableData.length>0&&rowPosition!=null){tableData.splice(rowPosition,1,{name:"Test(Update row)",age:32});}});$("#register").click(function(){// オブジェクトの配列を$.ajax()で送信});</script>}実際はgetJSONや$.ajaxデータ送信、Validationの部分などのコードも作成はしてますが。続きを書くかも。