複雑な要素になることができるような項目を<ol>要素に置換します。
SwitchおよびChangeといったコアノードで利用されています。
オプション
型: Boolean|String
クリックされた際、リストに新しい項目を追加するボタンを
リスト下部に表示するか否かを決定します。
設定されていない場合、またはtrue（boolean）が設定された場合、「追加する」というテキスト付きのボタンが表示されます。
false（boolean）が設定された場合、ボタンは非表示になります。
空白以外の文字列が設定された場合、その値がテキストとして利用されたボタンが表示されます。
$("ol.list").editableList({
addButton: "pets"
});
型: Function
リストに新しい項目が追加されたとき、呼び出されるコールバック関数です。
row - 行内容を追加するjQuery DOM要素index - 行のインデックスdata - 行のデータオブジェクト
「追加ボタン」のクリックをトリガーとして、dataは{}になります。
それ以外の場合は、dataはaddItemメソッドの引数として渡されるデータです。
$("ol.list").editableList({
addItem: function(row, index, data) {
$(row).html("Item "+index);
}
});
Type: Array
An array of button objects, that need to be added at the bottom of the editableList.
Each button object can have the following properties:
label - the (optional) button labelicon - the (optional) button icontitle - the (optional) button tooltip textclick - the callback function that will be executed when the button is clicked
Note that the ‘add button’ is added implicit to this array, when the addButton is activated.
$("ol.list").editableList({
addItem: function(row, index, data) {
$(row).html("Item "+index);
}
buttons: [{
label: "with icon",
icon: "fa fa-star",
title: "my custom button",
click: function(evt) {
alert("button clicked");
}
}]
});
型: CSS Selector
リストがソート可能である場合、
このオプションはこのリストから他のjQueryのsortableなリスト、つまり他のeditableListに項目をドラッグして移動できるようにします。
$("ol.list").editableList({
connectWith: ".my-other-list"
});
型: DOM/JQuery object
リストのヘッダとしてDOM/jQueryオブジェクトに追加します。
$("ol.list").editableList({
header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid'>Name</div><div style='display: inline-grid'>Type</div>")),
});
型: String|Number
可能であれば、追加ボタンを含めたリストの高さを設定します。heightに「auto」を設定すると、垂直方向のスクロールバーを除去し、コンテンツを収容するために必要な全高でリストを表示します。
$("ol.list").editableList({
height: 300
});
型: Function
リストに表示される項目を絞り込むために呼び出されるコールバック関数。
項目が表示されるべきか否かを示すため、
この関数はtrue/false（boolean）を返却しなくてはいけません。
$("ol.list").editableList({
filter: function(data) {
return data.index%2 === 0
}
});
型: Function
リストのサイズが変更されたときに呼び出される関数です。
$("ol.list").editableList({
resize: function() {
console.log("I have changed in size")
}
});
型: Function
リストのサイズが変更されたとき、
リストの各項目に対して呼び出される関数。
row - 行のjQuery DOM要素index - 行のインデックス
項目の元のデータはdataプロパティに保管されています。
このコールバック関数は、メインであるresizeコールバック関数が呼び出された後に呼び出されます。
$("ol.list").editableList({
resizeItem: function(row,index) {
var originalData = $(row).data('data');
console.log("Resize the row for item:", originalData)
}
});
型: Boolean
新しい項目が追加されるたび、
リストの最後尾まで自動的にスクロールされるか否かを決定します。
設定されていない場合、またはtrue（boolean）の場合、
新しく追加された項目にリストがスクロールされます。
false（boolean）が設定された場合、リストはスクロールされません。
$("ol.list").editableList({
scrollOnAdd: false
});
型: Function
リストの2つの項目を比較し、
項目の順序を決定するために呼び出されるコールバック関数。
itemDataA - データ項目itemDataB - データ項目
この関数が0より小さい値を返した場合、itemDataAはitemDataBの前になります。
この関数が0を返した場合、項目の並びは変わりません。
この関数が0より大きい値を返した場合、itemDataAはitemDataBの後になります。
$("ol.list").editableList({
sort: function(dataA, dataB) {
return dataA.index-dataB.index;
}
});
型: Boolean|CSS Selector
リストの項目をドラッグして並び替えることができるか否かを決定します。
true（boolean）が設定された場合、デフォルトのドラッグハンドルが項目の横に表示されます。
CSSセレクタが設定された場合、
そのセレクタは項目のコンテンツ要素内のドラッグハンドルとして使われる要素を特定するために利用されます。
$("ol.list").editableList({
sortable: true
});
型: Function
リスト内の項目が移動させられたあとに呼び出される関数。
items - 各行のjQuery DOM要素の配列
各行の要素は、項目の元のデータをdataプロパティに保管しています。
$("ol.list").editableList({
sortItems: function(items) {
console.log("The items have changed order")
}
});
型: Boolean
trueが設定された場合、各行は右側に削除ボタンを含んで表示されます。
このボタンをクリックするとリストから行が削除され、
もし設定されていればremoveItemコールバック関数を呼び出します。
$("ol.list").editableList({
removable: true
});
型: Function
リストから項目が削除されたときに呼び出される関数。
削除は、項目の削除ボタンがクリックされたとき、
またはremoveItemメソッドが呼び出されたときに実施されます。
$("ol.list").editableList({
removeItem: function(data) {
console.log("An item has been removed")
}
});
メソッド
リストの最後尾に項目を追加します。
itemDataはリストの項目になるオブジェクトです。
$("ol.list").editableList('addItem',{fruit:"banana"});
配列に含まれている項目をリストの最後尾に追加します。
itemDataはリストの項目になるオブジェクトの配列です。
$("ol.list").editableList('addItems',[{fruit:"banana"},{fruit:"apple"},{fruit:"pear"}]);
リストから項目を削除します。
itemDataは削除する項目を特定するオブジェクトです。
$("ol.list").editableList('removeItem',{fruit:"banana"});
editableListの幅を設定します。
コンポーネントのリサイズが適切に実施されるようにするため、一般的なjQuery.width()関数の代わりにこの関数を使用する必要があります。
$("ol.input").editableList('width', '200px');
editableListの高さを設定します。
コンポーネントのりサイズが適切におこなわれるため、一般的なjQuery.height()関数の代わりにこの関数を使用する必要があります。
$("ol.input").editableList('height', '200px');
型: Array
リストの全項目の配列を取得します。各要素は、項目のjQuery DOM要素です。
各要素は、項目の元のデータをdataプロパティに保管しています。
var items = $("ol.list").editableList('items');
リストの全項目を削除します。この関数は他のコールバック関数を呼び出しません。
$("ol.list").editableList('empty');
型: Number
利用可能なフィルター関数にもとづいてリスト内の項目の表示/非表示を仕分けし、
表示する項目の数を返します。
フィルター関数の詳細は、
filterを参照してください。
filterが設定されていない場合、
リストは現在利用可能なフィルター関数を使って仕分けをおこないます。
filterがnullの場合、フィルターは削除されます。
var filteredCount = $("ol.list").editableList('filter',function(data) {
return data.index%2 === 0
});
0.20.0から
特定の項目が表示されるようにするため、リストをスクロールします。
$("ol.list").editableList('show', item);
利用可能なソート関数を用いてリストを並べ替えます。
sortは2つの項目を比較し、
リスト内の項目の順序を決定するために呼び出されるコールバック関数です。
itemDataA - データ項目itemDataB - データ項目
ソート関数の詳細は、
sortを参照してください。
sortが設定されていない場合、
リストは現在利用可能なソート関数によって並び替えられます。
$("ol.list").editableList('sort', function(dataA, dataB) {
return dataA.index-dataB.index;
});
型: Number
リストの項目数を取得します。
var length = $("ol.list").editableList('length');
3.1.0から
リストのアイテムソート操作をキャンセルします。
$("ol.list").editableList('cancel');
