docs • api • ui• editablelist

- 编辑器
- APIs
- RED.actions
- RED.events
- RED.notify
- RED.sidebar
- Widgets
- 自动补全
- EditableList
- SearchBox
- TreeList
- TypedInput
- Themes
- 主题插件

可编辑列表小部件

用于替代

元素的组件，其中的项目本身可以是复杂元素。被核心Switch和Change节点所使用。

选项
方法

选项

addButton

类型: 布尔值|字符串

决定是否在列表下方显示一个按钮，点击该按钮将在列表中添加一个新条目。

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

如果设置为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 )

类型：数组

一组按钮对象，需要添加到可编辑列表底部。每个按钮对象可以包含以下属性：

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

请注意，当addButton被激活时，"添加按钮"会被隐式添加到这个数组中。

$("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("I have changed in size")
    }
});

resizeItem( row, index )

类型: 函数

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

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)
    }
});

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("The items have changed order")
    }
});

removable

类型: 布尔值

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

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

removeItem( data )

类型: 函数

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

data - 该项对应的原始数据条目

移除操作可以通过点击项目的移除按钮触发，或者调用remoteItem方法来实现。

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

可编辑列表小部件

选项

方法

事件

类型

选项

方法