EditableListウィジェット

複雑な要素になることができるような項目を<ol>要素に置換します。 SwitchおよびChangeといったコアノードで利用されています。

オプション

addButton

型: Boolean|String

クリックされた際、リストに新しい項目を追加するボタンを リスト下部に表示するか否かを決定します。

設定されていない場合、またはtrue(boolean)が設定された場合、「追加する」というテキスト付きのボタンが表示されます。

false(boolean)が設定された場合、ボタンは非表示になります。

空白以外の文字列が設定された場合、その値がテキストとして利用されたボタンが表示されます。

$("ol.list").editableList({
    addButton: "pets"
});

addItem( row, index, data )

型: Function

リストに新しい項目が追加されたとき、呼び出されるコールバック関数です。

  • row - 行内容を追加するjQuery DOM要素
  • index - 行のインデックス
  • data - 行のデータオブジェクト

「追加ボタン」のクリックをトリガーとして、data{}になります。 言い換えれば、dataはaddItemメソッドの引数として渡されるデータです。

$("ol.list").editableList({
    addItem: function(row, index, data) {
        $(row).html("Item "+index);
    }
});

connectWith

型: 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>")),
});

height

型: String|Number

可能であれば、追加ボタンを含めたリストの高さを設定します。heightに「auto」を設定すると、垂直方向のスクロールバーを除去し、コンテンツを収容するために必要な全高でリストを表示します。

$("ol.list").editableList({
    height: 300
});

filter( data )

型: Function

リストに表示される項目を絞り込むために呼び出されるコールバック関数。

  • data - 行のデータオブジェクト

項目が表示されるべきか否かを示すため、 この関数はtrue/false(boolean)を返却しなくてはいけません。

$("ol.list").editableList({
    filter: function(data) {
        return data.index%2 === 0
    }
});

resize()

型: Function

リストのサイズが変更されたときに呼び出される関数です。

$("ol.list").editableList({
    resize: function() {
        console.log("I have changed in size")
    }
});

resizeItem( row, index )

型: Function

リストのサイズが変更されたとき、 リストの各項目に対して呼び出される関数。

  • row - 行のjQuery DOM要素
  • index - 行のインデックス

項目の元のデータはdataプロパティに保管されています。

このコールバック関数は、メインであるresizeコールバック関数が呼び出された後に呼び出されます。

$("ol.list").editableList({
    resizeItem: function(row,index) {
        var originalData = $(row).data('data');
        consol.log("Resize the row for item:", originalData)
    }
});

scrollOnAdd

型: Boolean

新しい項目が追加されるたび、 リストの最後尾まで自動的にスクロールされるか否かを決定します。

設定されていない場合、またはtrue(boolean)の場合、 新しく追加された項目にリストがスクロールされます。

false(boolean)が設定された場合、リストはスクロールされません。

$("ol.list").editableList({
    scrollOnAdd: false
});

sort( itemDataA, itemDataB )

型: Function

リストの2つの項目を比較し、 項目の順序を決定するために呼び出されるコールバック関数。

  • itemDataA - データ項目
  • itemDataB - データ項目

この関数が0より小さい値を返した場合、itemDataAitemDataBの前になります。

この関数が0を返した場合、項目の並びは変わりません。

この関数が0より大きい値を返した場合、itemDataAitemDataBの後になります。

$("ol.list").editableList({
    sort: function(dataA, dataB) {
        return dataA.index-dataB.index;
    }
});

sortable

型: Boolean|CSS Selector

リストの項目をドラッグして並び替えることができるか否かを決定します。

true(boolean)が設定された場合、デフォルトのドラッグハンドルが項目の横に表示されます。

CSSセレクタが設定された場合、 そのセレクタは項目のコンテンツ要素内のドラッグハンドルとして使われる要素を特定するために利用されます。

$("ol.list").editableList({
    sortable: true
});

sortItems( items )

型: Function

リスト内の項目が移動させられたあとに呼び出される関数。

  • items - 各行のjQuery DOM要素の配列

各行の要素は、項目の元のデータをdataプロパティに保管しています。

$("ol.list").editableList({
    sortItems: function(items) {
        console.log("The items have changed order")
    }
});

removable

型: Boolean

trueが設定された場合、各行は右側に削除ボタンを含んで表示されます。 このボタンをクリックするとリストから行が削除され、 もし設定されていればremoveItemコールバック関数を呼び出します。

$("ol.list").editableList({
    removable: true
});

removeItem( data )

型: Function

リストから項目が削除されたときに呼び出される関数。

  • data - 項目の元のデータ

削除は、項目の削除ボタンがクリックされたとき、 またはremoveItemメソッドが呼び出されたときに実施されます。

$("ol.list").editableList({
    removeItem: function(data) {
        console.log("An item has been removed")
    }
});

メソッド

addItem( itemData )

リストの最後尾に項目を追加します。 itemDataはリストの項目になるオブジェクトです。

$("ol.list").editableList('addItem',{fruit:"banana"});

addItems( itemData )

配列に含まれている項目をリストの最後尾に追加します。 itemDataはリストの項目になるオブジェクトの配列です。

$("ol.list").editableList('addItem',[{fruit:"banana"},{fruit:"apple"},{fruit:"pear"}]);

removeItem( itemData )

リストから項目を削除します。 itemDataは削除する項目を特定するオブジェクトです。

$("ol.list").editableList('removeItem',{fruit:"banana"});

width( width )

editableListの幅を設定します。 コンポーネントのリサイズが適切に実施されるようにするため、一般的なjQuery.width()関数の代わりにこの関数を使用する必要があります。

$("ol.input").editableList('width', '200px');

height( height )

editableListの高さを設定します。 コンポーネントのりサイズが適切におこなわれるため、一般的なjQuery.height()関数の代わりにこの関数を使用する必要があります。

$("ol.input").editableList('height', '200px');

items()

型: Array

リストの全項目の配列を取得します。各要素は、項目のjQuery DOM要素です。

各要素は、項目の元のデータをdataプロパティに保管しています。

var items = $("ol.list").editableList('items');

empty()

リストの全項目を削除します。この関数は他のコールバック関数を呼び出しません。

$("ol.list").editableList('empty');

filter( filter )

型: Number

利用可能なフィルター関数にもとづいてリスト内の項目の表示/非表示を仕分けし、 表示する項目の数を返します。

フィルター関数の詳細は、 filterを参照してください。

filterが設定されていない場合、 リストは現在利用可能なフィルター関数を使って仕分けをおこないます。

filternullの場合、フィルターは削除されます。

var filteredCount = $("ol.list").editableList('filter',function(data) {
    return data.index%2 === 0
});

show( item )

0.20.0から

特定の項目が表示されるようにするため、リストをスクロールします。

$("ol.list").editableList('show', item);

sort( sort )

利用可能なソート関数を用いてリストを並べ替えます。

sortは2つの項目を比較し、 リスト内の項目の順序を決定するために呼び出されるコールバック関数です。

  • itemDataA - データ項目
  • itemDataB - データ項目

ソート関数の詳細は、 sortを参照してください。

sortが設定されていない場合、 リストは現在利用可能なソート関数によって並び替えられます。

$("ol.list").editableList('sort', function(dataA, dataB) {
    return dataA.index-dataB.index;
});

length()

型: Number

リストの項目数を取得します。

var length = $("ol.list").editableList('length');