今回も tips ではなく公式ドキュメントから抜粋になります。 Row, Columns, Cell, Group, Table が使用できる関数の備忘録として掲載しました。
Tableが使用できる関数一覧 (詳細へのリンク)
table.replaceData("/data.php") //load data from data/php via ajax request
table.updateData([{id:1, name:"bob"}]); //update data
table.addData([{id:1, name:"bob", gender:"male"}], true)
table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}]);
table.clearData();
var data = table.getData("active"); //return currently filtered data
var rowCount = table.getDataCount("active");
var row = table.getRow(1); //return row component with index of 1
var rows = table.getRows();
var data = table.searchData("age", ">", 12);
var position = table.getRowPosition(row, true);
var rows = table.getRowFromPosition(5, true);
var htmlTable = table.getHtml(true, true, {columnGroups:false});
table.addRow({name:"Billy Bob", age:"12", gender:"male", height:1}, true);
table.updateRow(1, {id:1, name:"bob", gender:"male"});
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"})
var rowElement = row.getElement();
table.deleteRow(15); //delete row with an id of 15
Row Component が使用できる関数一覧(詳細へのリンク)
var rowData = row.getData()
var rowElement = row.getElement()
var table = row.getTable()
var nextRow = row.getNextRow()
var prevRow = row.getPrevRow()
var cells = row.getCells()
var cell = row.getCell(column)
var rowIndex = row.getIndex()
var rowPosition = row.getPosition(true)
var group = row.getGroup()
row.delete()
row.scrollTo()
row.pageTo()
row.move(12, true)
row.update({"name":"steve"})
row.select()
row.deselect()
row.toggleSelect()
var selected = row.isSelected()
row.normalizeHeight()
row.reformat()
row.freeze()
row.unfreeze()
row.treeExpand()
row.treeToggle()
var parent = row.getTreeParent()
var children = row.getTreeChildren()
Column Component が使用できる関数一覧(詳細へのリンク)
var columnElement = column.getElement();
var table = column.getTable();
var columnDefinition= column.getDefinition();
column.updateDefinition({title:"Updated Title"}) // 列のタイトルを変更
var columnField = column.getField();
var cells = column.getCells();
var nextColumn = column.getNextColumn();
var prevColumn = column.getPrevColumn();
var visible = column.getVisibility();
column.show();
column.hide();
column.toggle();
column.delete();
column.scrollTo()
column.move("age", true);
var subColumns = column.getSubColumns();
var parentColumn = column.getParentColumn();
column.headerFilterFocus();
column.setHeaderFilterValue("steve");
column.reloadHeaderFilter();
Cell Component が使用できる関数一覧(詳細へのリンク)
var cellValue = cell.getValue();
var cellOldValue = cell.getOldValue();
cell.restoreOldValue();
var cellElement = cell.getElement();
var table = cell.getTable();
var row = cell.getRow();
var column = cell.getColumn();
var data = cell.getData();
var field = cell.getField();
cell.setValue("Steve", true);
cell.checkHeight();
cell.edit();
cell.edit(true);
cell.cancelEdit();
cell.nav().left();
Group Component が使用できる関数一覧(詳細へのリンク)
var groupElement = group.getElement();
var table = group.getTable();
var key = group.getKey();
var field = group.getField();
var rows = group.getRows();
var subGroups = group.getSubGroups();
var parentGroup = group.getParentGroup();
var visible = group.getVisibility();
group.show();
group.hide();
group.toggle();
Tableが使用できる関数(詳細)
Table 公式ドキュメント Updating Data から抜粋。
replaceData関数を使用すると、スクロール位置、ソート、またはフィルタリングを更新せずに、ajax読み込みポップアップをトリガーすることなく、テーブル内のすべてのデータをサイレントに置換できます。これは、ユーザーに変更を通知せずに、新しい情報または更新された情報で定期的に更新するテーブルがある場合に便利です。
setData関数と同じ引数を取り、データのロード時に同じように動作します （つまり、ajaxリクエストやJSONを解析ができます）
table.replaceData([
{id:1, name:"bob", gender:"male"},
{id:2, name:"Jenny", gender:"female"}]) //load data array
table.replaceData("/data.php") //load data from data/php via ajax request
table.replaceData() // trigger reload of ajax data from ajaxURL property
replaceData関数はpromiseを返します。
table.replaceData(tableData)
.then(function(){
//run code after table has been successfuly updated
})
.catch(function(error){
//handle error loading data
});
setDataメソッドのようにデータを完全に置き換えずに、 テーブル内の既存のデータセットを更新する場合は、 updateData関数を使用できます。
この関数は行オブジェクトの配列を取り、 インデックス値に基づいて各行を更新します。 （インデックスのデフォルトは「id」パラメータです。これは、タブレータコンストラクタのインデックスオプションを使用して設定できます）。 インデックスのないオプションは、テーブルデータにまだないインデックスのあるアイテムと同様に無視されます。 テーブルに新しいデータを追加するには、addRow関数を使用する必要があります。
table.updateData([
{id:1, name:"bob", gender:"male"},
{id:2, name:"Jenny", gender:"female"}]);
この関数は、行を提供されたデータで置き換えません。提供されたパラメーターのいずれかのみを更新します。
//data before update {id:1, name:"Steve", gender:"male", age:20}
table.updateData([{id:1, name:"bob"}]); //update data
//data after update = {id:1, name:"bob", gender:"male", age:20}
updateData関数はpromiseを返します。
table.updateData([{id:1, name:"bob"}])
.then(function(){
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
addData関数を使用して、既存のテーブルデータにデータを追加できます。
最初の引数は、行データオブジェクトの配列でなければなりません。列のデータを渡さない場合、空のままになります。
2番目の引数はオプションであり、データをテーブルの上部に追加するか下部に追加するかを決定します。値がtrueの場合、データはテーブルの上部に追加され、値がfalseの場合、データはテーブルの下部に追加されます。パラメーターが設定されていない場合、データはaddRowPosグローバルオプションに従って配置されます。
table.addData([
{id:1, name:"bob", gender:"male"},
{id:2, name:"Jenny", gender:"female"}],
true);
デフォルトでは、新しい行はテーブルの下部に追加されます。これを上部に変更するには、 addRowPosオプションを「top」に設定します。
既存の行の隣にデータを挿入する場合は、 オプションの3番目の引数を関数に渡して、 指定した行の隣に新しい行を配置できます （2番目の引数の値に基づいて上または下）。 この引数は、標準の行コンポーネント検索オプションのいずれかを取ります。
table.addData([
{id:6, name:"bob", gender:"male"},
{id:7, name:"Jenny", gender:"female"}],
true, 3); //インデックス3で既存の行の上に新しいデータを追加します
addData関数はpromiseを返します。
table.addData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}], true)
.then(function(rows){
//rows - array of the row components for the rows updated or added
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
テーブルに渡すデータに、 更新する既存の行と追加する新しい行が混在している場合、 updateOrAddData関数を呼び出します。 これにより、提供された各行オブジェクトがチェックされ、 利用可能な場合は既存の行が更新されます。 または、データを使用して新しい行が作成されます。
table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}]);
この関数は promise を返します。
table.updateOrAddData([{id:1, name:"bob"}, {id:3, name:"steve"}])
.then(function(rows){
//rows - array of the row components for the rows updated or added
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
clearData関数を使用して、テーブルからすべてのデータを削除できます。
table.clearData();
getData関数を使用して、テーブルに保存されているデータを取得できます。
var data = table.getData();
これは、テーブル内の各行のデータオブジェクトを含む配列を返します。
デフォルトでは、getDataはTabulatorに保持されているすべてのデータを含む配列を返します。 次の文字列のいずれかを関数に渡すことにより、返されるデータを制限できます。
- active 現在のフィルターを通過した行のデータのみを返します
- visible テーブルビューポートで現在表示されている行のデータのみを返します
var data = table.getData("active"); //return currently filtered data
getDataCount関数を使用して、テーブルに格納されている行数のカウントを取得できます。
var rowCount = table.getDataCount();
次の文字列のいずれかを関数に渡すことで、カウントを行のサブセットに制限できます。
- active 現在のフィルターを通過する行のみをカウントします
- visible テーブルビューポートで現在表示されている行のみをカウントします
//count only rows that pass the currently filtered data
var rowCount = table.getDataCount("active");
特定の行のデータを取得するには、getRow関数を使用して行コンポーネントを取得し、 コンポーネントでgetData関数を使用します。 最初の引数は探している行であり、標準の行コンポーネント検索オプションを使用します。
var row = table.getRow(1); //return row component with index of 1
var rowData = row.getData();
getRows関数を使用して、テーブル内のすべての行コンポーネントを取得できます。
var rows = table.getRows();
これは、テーブルの各行の行コンポーネントを含む配列を返します。
デフォルトでは、getRowsはTabulatorに保持されているすべての行コンポーネントを含む配列を返します。次の文字列のいずれかを関数に渡すことにより、データ行を制限できます。
- active-現在のフィルターを通過する行のみを返します
- visible-テーブルビューポートで現在表示されている行のみを返します
var rows = table.getRows("active"); //return currently filtered rows
searchRows関数を使用すると、渡したフィルターに一致する行コンポーネントの配列を取得できます。 引数の指定はsetFilter関数と同じです。
//get row components for all rows with an age greater than 12
var rows = table.searchRows("age", ">", 12);
searchData関数を使用すると、渡すフィルターに一致するテーブル行データの配列を取得できます。 引数の指定はsetFilter関数と同じです。
//get row data for all rows with an age greater than 12
var data = table.searchData("age", ">", 12);
getRowPosition関数を使用して、テーブル内の行の数値位置を取得します。 デフォルトでは、これは、現在テーブルから除外されているデータを含む、 すべてのデータの行の位置を返します。
最初の引数は探している行であり、標準の行コンポーネント検索オプションを使用します。 現在フィルター処理/並べ替えられたデータの行の位置を取得する場合は、 関数のオプションの2番目の引数にtrueの値を渡します。
// return the position of the row in the filtered/sorted data
var position = table.getRowPosition(row, true);
行の位置は0から始まります。行が見つからない場合、値-1が返されます。
getRowFromPosition関数を使用して、テーブル内の特定の位置にある行の行コンポーネントを取得できます。デフォルトでは、これは、テーブルから現在フィルタリングされているデータを含む、すべてのテーブルデータの位置に基づいて行を返します。
現在フィルタリング/ソートされたデータ内の位置に基づいて行を取得する場合は、 関数のオプションの2番目の引数にtrueの値を渡します。
//return 6th row in the visible table data
var rows = table.getRowFromPosition(5, true);
getHtml関数を使用して、テーブルデータを単純なHTMLテーブルとして取得できます。 これにより、テーブルデータのHTMLエンコード文字列が返されます。
var htmlTable = table.getHtml();
デフォルトでは、getHtmlの出力には列ヘッダーグループ、行グループ、および列計算が含まれます。 テーブル定義のhtmlOutputConfigオプションで値を設定することにより、出力からコンポーネントをグローバルに削除することを選択できます。
var table = new Tabulator("#example-table", { htmlOutputConfig:{ columnGroups:false, // HTMLテーブルの列ヘッダーに列グループを含めない rowGroups:false, // HTMLテーブルに行グループを含めない columnCalcs:false, // HTMLテーブルに列Calcを含めない }, });
既定では、getHtml関数は、テーブル内のすべてのアクティブな行を含むテーブルを返すために使用されます（フィルターと並べ替えに一致）。
出力を構成するために関数に渡すことができる3つの引数があります。
最初の引数は、出力テーブルにすべてのアクティブな行が含まれているか（false）、または現在表示されている行のみが含まれているか（true）を決定するブール値です。デフォルトではこれはfalseです。
2番目の引数は、関数の出力のスタイルをテーブルに一致させる（true）か、空のhtmlテーブルにする（false）かを決定するブール値です。
3番目の引数は、htmlOutputConfigプロパティで設定されたオブジェクトをオーバーライドするために使用できるオブジェクトを取ります
// グループ化された列ヘッダーなしで表スタイルをコピーする表の
// 表示行のスタイル付きHTMLを取得します
var htmlTable = table.getHtml(true, true, {columnGroups:false});
HTML出力に特定の列を表示したくない場合は、列定義オブジェクトのhtmlOutputプロパティをfalseに設定できます。
var table = new Tabulator("#example-table", {
columns:[
{title:"Hidden Column", field:"secret", htmlOutput:false} //hide data in HTML
]
});
列定義オブジェクトのhtmlOutputプロパティをtrueに設定することにより、HTML出力で非表示列を強制的に表示することもできます。
var table = new Tabulator("#example-table", {
columns:[
{title:"Hidden Column", field:"secret", visible:false, htmlOutput:true} //show hidden column in HTML
]
});
addRow関数を使用して、テーブルに行を追加できます。
最初の引数は行データオブジェクトでなければなりません。列のデータを渡さない場合、空のままになります。空行を作成するには（つまり、ユーザーが入力するため）、空のオブジェクトを関数に渡します。
2番目の引数はオプションで、行をテーブルの上部に追加するか下部に追加するかを決定します。値がtrueの場合は行がテーブルの上部に追加され、値がfalseの場合は行がテーブルの下部に追加されます。パラメーターが設定されていない場合、行はaddRowPosグローバルオプションに従って配置されます。
table.addRow({name:"Billy Bob", age:"12", gender:"male", height:1}, true);
デフォルトでは、新しい行はテーブルの下部に追加されます。これを上部に変更するには、addRowPosオプションを「top」に設定します。
既存の行の隣に行を追加する場合、指定した行の隣に新しい行を配置する関数にオプションの3番目の引数を渡すことができます（2番目の引数の値に基づいて上または下）。この引数は、標準の行コンポーネント検索オプションのいずれかを取ります。
//add new row above existing row with index of 3
table.addRow({name:"Billy Bob", age:"12"}, true, 3);
この関数は promise を返します。
table.addRow({name:"Billy Bob", age:"12"})
.then(function(row){
//row - the row component for the row updated or added
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
updateRow関数を使用して、テーブル内の任意の行を更新できます。
最初の引数は更新する行であり、標準の行コンポーネント検索オプションのいずれかを使用します。
2番目の引数は、行の更新されたデータオブジェクトである必要があります。 updateData関数と同様に、これは既存の行データオブジェクトを置き換えず、提供されたパラメーターのいずれかのみを更新します。
table.updateRow(1, {id:1, name:"bob", gender:"male"});
完了すると、この関数はrowUpdatedおよびdataEditedイベントをトリガーします。
この関数は、更新が成功した場合はtrueを返し、要求された行が見つからなかった場合はfalseを返します。新しいデータが既存の行データと一致する場合、更新は実行されません。
更新する行のRowComponentが既にある場合は、コンポーネントで更新関数を直接呼び出すことができます。
row.update({"name":"steve"}); //update the row data for field "name"
この関数は promise を返します。
table.updateRow(1, {id:1, name:"bob", gender:"male"})
.then(function(){
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
row.update({name:"steve"})
.then(function(){
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
行がすでに存在するかどうかわからない場合は、updateOrAddRow関数を使用できます。これは、一致するインデックスを持つ行が存在するかどうかを確認し、存在する場合は更新し、存在しない場合はそのデータで新しい行を追加します。これは、updateRow関数と同じ引数を取ります。
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"});
この関数は promise を返します。
table.updateOrAddRow(3, {id:3, name:"steve", gender:"male"})
.then(function(row){
//row - the row component for the row updated or added
//run code after data has been updated
})
.catch(function(error){
//handle error updating data
});
特定の行のDOMノードを取得するには、getRow関数でRowComponentを取得し、コンポーネントでgetElement関数を使用します。最初の引数は探している行であり、標準の行コンポーネント検索オプションを使用します。
var row = table.getRow(1); //return row component with index of 1
var rowElement = row.getElement();
deleteRow関数を使用して、テーブル内の任意の行を削除できます。最初の引数は削除する行であり、標準の行コンポーネント検索オプションのいずれかを使用します。
table.deleteRow(15); //delete row with an id of 15
行コンポーネントの検索オプションの配列をdeteleRow関数に渡すことにより、複数の行を一度に削除できます。
table.deleteRow([15,7, 9]); //delete rows with ids of 15, 7 and 9
削除する行のRowComponentが既にある場合は、コンポーネントで直接delete関数を呼び出すことができます。
row.delete();
deleteRowおよびrow.deletemethodsはpromiseを返します。
table.deleteRow(15)
.then(function(){
//run code after row has been deleted
})
.catch(function(error){
//handle error deleting row
});
row.delete()
.then(function(){
//run code after row has been deleted
})
.catch(function(error){
//handle error deleting row
});
Row Component が使用できる関数(詳細)
Row Component 公式ホームページ から抜粋。
getData関数は、行のデータオブジェクトを返します。
var rowData = row.getData()
getElement関数は、行のDOMノードを返します。
var rowElement = row.getElement()
getTable関数は、行を含むテーブルのTabulatorオブジェクトを返します。
var table = row.getTable()
getNextRow関数は、テーブル内の次の表示行の行コンポーネントを返します。次の行がない場合、値falseを返します。
var nextRow = row.getNextRow()
getPrevRow関数は、テーブル内の前の表示行の行コンポーネントを返します。前の行がない場合は、falseの値を返します。
var prevRow = row.getPrevRow()
getCells関数は、CellComponentオブジェクトの配列を返します。
var cells = row.getCells()
getCell関数は、この行の指定されたCellComponentを返します。
var cell = row.getCell(column)
getIndex関数は、行のインデックス値を返します。 （これは定義されたインデックス列の値であり、テーブル内の行の位置ではありません）
var rowIndex = row.getIndex()
getPosition関数を使用して、テーブル内の行の数値位置を取得します。 デフォルトでは、フィルタリングされているデータを含む、すべてのデータの行の位置を返します。
フィルタリング/ソートされたデータの行の位置を取得する場合、関数のオプションの最初の引数にtrueの値を渡します。
//フィルタリング/ソートされたデータの行の位置を返します
var rowPosition = row.getPosition(true)
グループ化された行を使用する場合、getGroup関数を使用して現在の行のグループコンポーネントを取得できます。
var group = row.getGroup()
delete関数は行を削除し、そのデータをテーブルから削除します
row.delete()
deleteメソッドはpromiseを返します。 これは行が削除された後にコマンドを実行するために使用できます。
row.delete()
.then(function(){
//行が削除された後にコードを実行します
})
.catch(function(error){
//行の削除エラーを処理します
});
scrollTo関数は、テーブルをスクロールします。 もし、フィルターをしている場合は、フィルター処理を行った後にスクロールします。 scrollToメソッドはpromiseを返します。
row.scrollTo()
pageTo関数は、フィルターを行った後、行のページを読み込みます。 この関数は、ローカルページネーションでのみ使用できます。リモートページネーションを使用する場合、Tabulatorには、要求された行がどのページにあるかを検索する方法があります。
row.pageTo()
move関数を使用して、行を別の行の隣に移動できます。 最初の引数は、移動先のターゲット行である必要があり、標準の行コンポーネント検索オプションのいずれかを指定できます。 2番目の引数は、行をターゲット行の上または下に移動するかどうかを決定します。値がfalseの場合、行はターゲット行の下に配置され、値がtrueの場合、行はターゲットの上に配置されます。
row.move(12, true)
update関数を使用して、行のデータを更新できます。更新するフィールドを含むオブジェクトを関数に渡す必要があります。このオブジェクトは行データを置き換えません。オブジェクトに含まれるフィールドのみが更新されます。update関数はpromiseを返します。
row.update({"name":"steve"})
select関数は現在の行を選択します。
row.select()
deselect関数は現在の行の選択を解除します。
row.deselect()
toggleSelect関数は、選択された状態を現在の行に切り替えます。
row.toggleSelect()
isSelected関数は、行の現在の選択状態を表すブール値を返します。
var selected = row.isSelected()
行内に含まれる要素を手動で調整している場合、 行内のすべてのセルの高さを再計算して、 それらが整列したままであることを確認する。 これを行うには、normalizeHeight関数を呼び出します。
row.normalizeHeight()
cell formatter とrowFormatterコールバックを再トリガーするためにレンダリングされた行を再フォーマットする場合は、reformat関数を呼び出します。
row.reformat()
freeze関数を呼び出すことで、テーブルの上部にある行を凍結できます。 これにより、テーブルヘッダーのテーブルのスクロール部分の上に行が挿入されます。
row.freeze()
凍結された行は、unfreeze関数を使用して凍結解除できます。 これにより、テーブルヘッダーから行が削除され、テーブルに再挿入されます。
row.unfreeze()
ツリー構造が有効な場合、treeExpand関数は現在の行を展開し、その子を表示します。
row.treeExpand()
ツリー構造が有効な場合、treeToggle関数は現在の行の折りたたみ状態を切り替えます。
row.treeToggle()
ツリー構造が有効な場合、getTreeParent関数はこの行の親の行コンポーネントを返します。親が存在しない場合、値falseが返されます。
var parent = row.getTreeParent()
ツリー構造が有効な場合、getTreeChildren関数は、この行の子の行コンポーネントの配列を返します。
var children = row.getTreeChildren()
Column Component が使用できる関数(詳細)
Column Component 公式ホームページ から抜粋。
getElement関数は、列のDOMノードを返します。
var columnElement = column.getElement();
getTable関数は、列を含むテーブルのTabulatorオブジェクトを返します。
var table = column.getTable();
getDefinition関数は、列の列定義オブジェクトを返します。
var columnDefinition= column.getDefinition();
列の定義を更新するには、更新オブジェクトを引数としてupdateDefinition関数を呼び出します。 更新オブジェクトに含まれていないプロパティは変更されません。
この関数は列が更新されたときにpromiseを返し、更新された列コンポーネントを引数として渡します。
column.updateDefinition({title:"Updated Title"}) // 列のタイトルを変更
.then(function(column){
//column-更新された列の列コンポーネント。
})
.catch(function(error){
// 列更新エラーを処理します
});
getField関数は、列のフィールド名を返します。
var columnField = column.getField();
getCells関数は、CellComponentオブジェクトの配列を返します。
var cells = column.getCells();
getNextColumn関数は、テーブル内の次の表示列の列コンポーネントを返します。次の列がない場合は、falseの値を返します。
var nextColumn = column.getNextColumn();
getPrevColumn関数は、テーブル内の前の表示列の列コンポーネントを返します。前の列がない場合は、falseの値を返します。
var prevColumn = column.getPrevColumn();
getVisibility関数は、列が表示されているかどうかを示すブール値を返します。値がtrueの場合、列が表示されていることを意味します。
var visible = column.getVisibility();
show関数は、列が非表示の場合、列を表示します。
column.show();
hide関数は、列が表示されている場合、列を非表示にします。
column.hide();
toggle関数は、列の表示/非表示を切り替えます。
column.toggle();
delete関数は列を削除し、テーブルから削除します。
column.delete();
scrollTo関数は、表示されている場合、テーブルを列にスクロールします。
column.scrollTo()
scrollToメソッドはpromiseを返します。
column.scrollTo()
.then(function(){
//run code after column has been scrolled to
})
.catch(function(error){
//handle error scrolling to column
});
move関数を使用して、列を別の列の隣に移動できます。
最初の引数は、移動先のターゲット列である必要があり、標準の列コンポーネント検索オプションのいずれかを指定できます。
2番目の引数は、列をターゲット列の前または後に移動するかどうかを決定します。値がfalseの場合、列はターゲット列の前に配置されます。値がtrueの場合、列はターゲットの後に配置されます。
column.move("age", true);
getSubColumns関数は、ColumnComponentオブジェクトの配列を返します。
var subColumns = column.getSubColumns();
getParentColumn関数は、この列の親列のColumnComponentを返します。親が存在しない場合、この関数はfalseを返します。
var parentColumn = column.getParentColumn();
headerFilterFocus関数は、この列が存在する場合、この列のヘッダーフィルター要素にフォーカスを置きます。
column.headerFilterFocus();
setHeaderFilterValue関数は、列ヘッダーフィルター要素の値を、最初の引数で指定された値に設定します。
column.setHeaderFilterValue("steve");
reloadHeaderFilter関数はヘッダーフィルター要素を再構築し、フィルターの生成に使用されたエディターに渡されたパラメーターを更新します。
column.reloadHeaderFilter();
Cell Component が使用できる関数(詳細)
Cell Component 公式ホームページ から抜粋。
getValue関数は、セルの現在の値を返します。
var cellValue = cell.getValue();
getOldValue関数は、セルの以前の値を返します。セル更新コールバックのイベントで非常に便利です。
var cellOldValue = cell.getOldValue();
restoreOldValue関数は、セル編集コールバックをトリガーせずに、セルの値を以前の値に戻します。
cell.restoreOldValue();
getElement関数は、セルのDOMノードを返します。
var cellElement = cell.getElement();
getTable関数は、セルを含むテーブルのTabulatorオブジェクトを返します。
var table = cell.getTable();
getRow関数は、セルを含む行のRowComponentを返します。
var row = cell.getRow();
getColumn関数は、セルを含む列のColumnComponentを返します。
var column = cell.getColumn();
getData関数は、セルを含む行のデータを返します。
var data = cell.getData();
getField関数は、セルを含む列のフィールド名を返します。
var field = cell.getField();
setValue関数を使用して、セルの値を変更できます。 最初のパラメーターはセルの新しい値である必要があり、 2番目のオプションのパラメーターはtrueに設定されている場合（デフォルト= true）、 値に列ミューテーターを適用します。
cell.setValue("Steve", true);//セルの値を「Steve」に設定し、列ミューテーターがあればそれを適用します。
セルに含まれる要素またはセル自体を手動で調整している場合、行内のすべてのセルの高さを再計算して、セルが整列したままであることを確認する必要がある場合があります。 checkHeight関数を呼び出して、セルの高さが変更されているかどうかを確認し、変更されている場合は行を正規化します。
cell.checkHeight();
セルを編集します。
cell.edit();
列定義の編集可能なプロパティを無視して強制的に編集する場合は、trueを関数に渡すことができます。
cell.edit(true);
セルの編集をキャンセルします。
cell.cancelEdit();
セルが編集されているとき、エディターフォーカスを現在のセルから隣のセルに移動できます。 フォーカスをさまざまな方向に移動するためにnav関数で呼び出すことができる関数がいくつかあります。
cell.nav().left();
次の機能を使用して、テーブルの周囲の任意の方向に移動できます。
- prev-左側の次の編集可能なセル。使用可能なものがない場合は、上の行の最も編集可能な右のセルに移動します。
- next-右側の次の編集可能なセル、使用可能なものがない場合、下の行の最も編集可能な左のセルに移動します
- left-左側の次の編集可能なセル、行で使用可能なものがない場合はfalseを返します
- right-右側の次の編集可能なセル。行で使用可能なものがない場合はfalseを返します
- up-上の行の同じセルに移動する
- down-下の行の同じセルに移動します
Group Component が使用できる関数(詳細)
Group Component 公式ホームページ から抜粋。
getElement関数は、グループヘッダーのDOMノードを返します。
var groupElement = group.getElement();
getTable関数は、グループを含むテーブルのTabulatorオブジェクトを返します。
var table = group.getTable();
getKey関数は、このグループのすべての行で共有される一意のキーを返します。
var key = group.getKey();
getField関数は、このグループのすべての行がグループ化されたフィールドの文字列を返します。 （フィールドではなく関数を使用して行をグループ化する場合、この関数はfalseを返します）
var field = group.getField();
getRows関数は、グループ内の各行に1つずつ、RowComponentオブジェクトの配列を返します。
var rows = group.getRows();
getSubGroups関数は、このグループの各サブグループに1つずつ、GroupComponentオブジェクトの配列を返します。
var subGroups = group.getSubGroups();
getParentGroup関数は、このグループの親グループのGroupComponentを返します。親が存在しない場合、この関数はfalseを返します。
var parentGroup = group.getParentGroup();
getVisibility関数は、グループが表示されているかどうかを示すブール値を返します。trueの値は、グループが表示されていることを意味します。
var visible = group.getVisibility();
show関数は、グループが非表示の場合、グループを表示します。
group.show();
hide関数は、グループが表示されている場合、非表示にします。
group.hide();
toggle関数は、グループの表示/非表示を切り替えます。
group.toggle();
以上です。