文档 • API • UI• editablelist

- 编辑器
- API
- RED.actions
- RED.events
- RED.notify
- RED.sidebar
- 小部件
- AutoComplete
- EditableList
- SearchBox
- TreeList
- TypedInput
- 主题
- 主题插件

EditableList 小组件

用于替代 <ol> 元素，其中项目本身可以是复杂的元素。由核心 Switch 和 Change 节点使用。

选项
方法

选项

addButton

类型: Boolean|String

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

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

如果设置为 false (布尔值)，则不显示该按钮。

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

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

addItem( row, index, data )

类型: Function

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

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 - 点击按钮时将执行的回调函数

请注意，当 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 Selector

如果列表是可排序的，此选项允许项目从该列表拖动到任何其他 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

类型: String|Number

设置列表的高度，包括（如果启用）其添加按钮。将高度设置为“auto”会移除垂直滚动条，并以包含内容所需的完整高度显示列表。

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

filter( data )

类型: Function

用于过滤列表中哪些项目可见的回调函数。

data - 行的数据对象

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

$("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');
        console.log("Resize the row for item:", originalData)
    }
});

scrollOnAdd

类型: Boolean

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

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

如果设置为 false (布尔值)，列表将不会滚动。

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

sort( itemDataA, itemDataB )

类型: Function

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

itemDataA - 数据项 A
itemDataB - 数据项 B

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

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

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

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

sortable

类型: Boolean|CSS Selector

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

如果设置为 true (布尔值)，则在项目旁边显示一个默认的拖动手柄。

如果设置为 CSS Selector，则用于标识项目内容元素中应作为拖动手柄的元素。

$("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 - 项目的原始数据项

删除操作可以由点击项目的删除按钮触发，也可以通过调用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 )

类型: Number

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

有关过滤函数的详细信息，请参阅 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 - 数据项 A
itemDataB - 数据项 B

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

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

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

length()

类型: Number

获取列表项的数量。

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

cancel()

自 3.1.0 起

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

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

EditableList 小组件

选项

方法

事件

类型

选项

方法