docs • api • ui• editablelist

- Editor
- APIs
- RED.actions
- RED.events
- RED.notify
- RED.sidebar
- Widgets
- AutoComplete
- EditableList
- SearchBox
- TreeList
- TypedInput
- Themes
- Theme Plugins

可编辑列表小部件

一个替代<ol>元素的列表，其中的项可以是复杂元素。由核心的 Switch 和 Change 节点使用。

选项
方法

选项

addButton

类型：布尔值|字符串

确定是否在列表下方显示一个按钮，当点击它时，将向列表添加一个新条目。

如果未指定或设置为true（布尔值），则显示一个文本为’Add’的按钮。

如果设置为false（布尔值），则按钮不显示。

如果设置为非空字符串，则显示一个按钮，并将其值作为按钮的文本。

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

addItem( row, index, data )

类型：函数

当添加新项目到列表时调用的回调函数。

row - 要添加任何行内容的jQuery DOM元素
index - 行的索引
data - 行的数据对象

如果是通过点击’添加按钮’触发的，data将是{}。否则，它将是传递给addItem方法调用的数据。

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

buttons( array )

类型：数组

一个按钮对象的数组，需要在editableList底部添加。每个按钮对象可以具有以下属性：

label - （可选）按钮标签
icon - （可选）按钮图标
title - （可选）按钮工具提示文本
click - 当点击按钮时执行的回调函数

请注意，’添加按钮’在激活时隐式添加到此数组中。

$("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");
        }
   }]
});

connectWith

类型：CSS选择器

如果列表是可排序的，此选项允许项目从此列表拖动到任何其他jQuery sortable列表，例如另一个editableList。

$("ol.list").editableList({
    connectWith: ".my-other-list"
});

类型：DOM/JQuery对象

将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

类型：字符串|数字

设置列表的高度，包括（如果启用）其添加按钮。将高度设置为’auto’会移除垂直滚动条，并以足够的高度显示列表，以容纳内容。

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

filter( data )

类型：函数

一个被调用的回调函数，用于过滤列表中可见的项目。

data - 行的数据对象

该函数应返回true/false（布尔值）以指示项目是否应可见。

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

resize()

类型：函数

当列表的大小发生变化时调用的函数。

$("ol.list").editableList({
    resize: function() {
        console.log("我已经改变了大小")
    }
});

resizeItem( row, index )

类型：函数

当列表大小发生变化时，对列表中的每个项目调用的函数。

row - 行的jQuery DOM元素
index - 行的索引

项目的原始数据存储在名为data的属性下。

在主要的resize回调被调用后，将调用此回调。

$("ol.list").editableList({
    resizeItem: function(row,index) {
        var originalData = $(row).data('data');
        console.log("调整项目的行:", originalData)
    }
});

scrollOnAdd

类型：布尔值

确定列表每当添加新项目时是否应自动滚动到底部。

如果未指定或设置为true（布尔值），列表将滚动以显示新添加的项目。

如果设置为false（布尔值），列表将不滚动。

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

sort( itemDataA, itemDataB )

类型：函数

一个被调用的回调函数，用于比较列表中的两个项目以确定它们的顺序。

itemDataA - 数据项
itemDataB - 数据项

如果函数返回一个小于0的值，则itemDataA在itemDataB之前。

如果函数返回0，则项目保持不变。

如果函数返回一个大于0的值，则itemDataA在itemDataB之后。

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

sortable

类型：布尔值|CSS选择器

确定列表项是否可以拖动来进行排序。

如果设置为true（布尔值），则在项旁边显示默认的拖动手柄。

如果设置为CSS选择器，则用于识别应在项目的内容元素中作为拖动手柄使用的元素。

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

sortItems( items )

类型：函数

在列表中的某个项目被移动后调用的函数。

items - 每行的jQuery DOM元素的数组，按顺序排列。

每个行元素在名为data的属性下存储项目的原始数据。

$("ol.list").editableList({
    sortItems: function(items) {
        console.log("项目的顺序已改变")
    }
});

removable

类型：布尔值

如果设置为true，每行将在右侧显示一个删除按钮。点击按钮将从列表中删除该行，并触发removeItem回调（如果已设置）。

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

removeItem( data )

类型：函数

当从列表中移除项目时调用的函数。

data - 项目的原始数据

删除可以通过点击某个项目的删除按钮或调用removeItem方法来触发。

$("ol.list").editableList({
    removeItem: function(data) {
        console.log("一个项目已被移除")
    }
});

方法

addItem( itemData )

将一个项目添加到列表的末尾。itemData是将与列表中的项目关联的对象。

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

addItems( itemData )

将包含在数组中的项目添加到列表的末尾。itemData是将与列表中的项目关联的对象数组。

$("ol.list").editableList('addItems',[{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()

类型：数组

获取所有列表项的数组。每个项是该项的jQuery DOM元素。

每个元素在名为data的属性下存储该项的原始数据。

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

empty()

清空列表中的所有项。这不会触发任何回调。

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

filter( filter )

类型：数字

根据活动过滤函数过滤列表以显示/隐藏项目，并返回可见项目的数量。

有关过滤函数的详细信息，请参见filter。

如果未提供filter，则使用当前活动过滤函数来过滤列表。

如果filter为null，则移除过滤器。

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 )

使用活动排序函数对列表进行排序。

一个被调用的回调函数，用于比较列表中的两个项目以确定它们的顺序。

itemDataA - 数据项
itemDataB - 数据项

有关排序函数的详细信息，请参见sort。

如果未提供sort，则使用当前活动排序函数对列表进行排序。

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

length()

类型：数字

获取列表项的数量。

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

cancel()

自3.1.0起

取消列表上的项目排序操作。

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

可编辑列表小部件

选项

方法

事件

类型

选项

方法