visjs 数据的增删改筛选（DataSet & DataView）

visjs中的 DatatSet，用于数据的保存，可操作非结构化数据，并可监听数据的变化。

DataSet构造

var data = new vis.DataSet([data] [, options])

构造后，可通过 add 、updateOnly 、update 、remove方法操作 data（DataSet） 中数据，使用 clear 方法情况数据集。

例：

// create a DataSet
var options = {};
var data = new vis.DataSet([{ id: 11, label: "Node 2" }], options);

// add items
data.add([
    {
        id: 1,
        text: "item 1",
        date: new Date(2013, 6, 20),
        group: 1,
        first: true,
    },
    { id: 2, text: "item 2", date: "2013-06-23", group: 2 }
]);

// 获取所有数据
var item1 = data.get();
console.log("item1", item1);

DataSet 包含方法

Method	Return Type	Description
add(data [, senderId])	Id[]	向 DataSet 添加一项(Object)或多项(Arrary)。当已存在具有相同id的数据时，添加该数据失败。
clear([senderId])	Id[]	清除 DataSet 中的所有数据。 该函数返回一个数组，其中包含已删除项目的 id。
distinct(field)	Array	查找指定字段的所有不同值。 返回一个包含所有不同值的无序数组。 如果数据项不包含指定的字段将被忽略。
flush()	none	Flush queued changes. Only available when the DataSet is configured with the option queue, see section Construction.
forEach(callback [, options])	none	为数据集中的每个项目执行回调函数。
get([options] [, data]) get(id [,options] [, data]) get(ids [, options] [, data])	Object | Array	从 DataSet 中获取单个项目、多个项目或所有项目。当请求单个 id 且未找到时，返回 null。 当请求多个 id 且未找到时，将返回一个包含 null 的数组。
getDataSet()	DataSet	获取数据集本身。 在 DataView 的情况下，此函数不返回 DataView 连接到的 DataSet。
getIds([options])	Id[]	获取所有项目或一组过滤项目的 ID。
map(callback [, options])	Array	映射数据集中的每个数据
max(field)	Object | null	查找指定字段数值最大的项。 如果没有找到项目，或者找到的项目都没有数字值，则返回 null。
min(field)	Object | null	查找指定字段数值最小的项。 如果没有找到项目，或者找到的项目都没有数字值，则返回 null。
off(event, callback)	none	取消订阅事件，删除事件侦听器。
on(event, callback)	none	订阅事件，添加事件监听器。
remove(id [, senderId]) remove(ids [, senderId])	Id[]	通过 id 或项目本身删除一个或多个项目。 返回一个包含已删除项目的 id 的数组。
setOptions(options)	none	Set options for the DataSet. Available options:queue Queue data changes (‘add’, ‘update’, ‘remove’) and flush them at once. The queue can be flushed manually by calling DataSet.flush(), or can be flushed after a configured delay or maximum number of entries. When queue is true, a queue is created with default options. When queue is false, an existing queue will be flushed and removed. Options can be specified by providing an object:delay: number The queue will be flushed automatically after an inactivity of this delay in milliseconds. Default value is null.max: number When the queue exceeds the given maximum number of entries, the queue is flushed automatically. Default value is Infinity.
update(data [, senderId])	Id[]	更新一项或多项现有项目。当一个项目不存在时，它将被创建。返回一个包含已删除项目的 id 的数组。
updateOnly(data [, senderId])	Id[]	更新一项或多项现有项目。当项目不存在时，抛出异常。 返回一个包含更新项的 id 的数组。

增删改

On：监听

DataSet.on(event, callback)

Off：关闭监听

DataSet.off(event, callback)

• 触发事件(event)：add、update、remove、*
• 返回函数(callback)：

 function (event, properties, senderId) {
   // handle the event
 });

Add：新增

var addedIds = DataSet.add(data [, senderId])

• data：Object | Arrary ，必须带id，否则随机生成id
• 当添加的数据已存在某个id时，抛出错误

UpdateOnly：更新

var updatedIds = DataSet.updateOnly(data [, senderId])

• data：Object | Arrary ，必须带id，否则抛出错误
• 新属性合并，已有属性更新
• 可以通过为属性分配 DELETE 符号来删除属性

Update ：更新|新增

var updatedIds = DataSet.update(data [, senderId])

• data：Object | Arrary ，必须带id，否则随机生成id
• 已存在数据，新属性合并，已有属性更新
• 不存在数据，添加新数据
• 无法通过此方法删除属性

Remove：删除

var removedIds = DataSet.remove(id [, senderId])

• id：Number | String | Arrary
• 单个数据的id或数据项 Number | String
• 多个数据的id数组或数据项 Arrary
• 忽略不存在数据的删除，并返回一个包含实际从 DataSet 中删除的数据 id 的数组

Clear：清除

var removedIds = DataSet.clear([senderId])

演示

// create a DataSet
var data = new vis.DataSet();

// 监听触发事件
data.on('*', function (event, properties, senderId) {
  console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
});

// 触发 'add' 事件
data.add({ id: 1, text: "item 1 (new)" });

// 触发 'update' 事件
data.updateOnly({ id: 1, text: "item 1 (updated)" });

// 触发 'update' 事件
data.update({ id: 1, text: "item 1 (updated again)" });

// 触发 'add' 事件
data.update({ id: 2, text: "item 2 (new)" });

// 触发 'add' 和 'update' 事件
data.update(
  { id: 1, text: "item 1 (updated once more)" },
  { id: 3, text: "item 3 (new)" }
);

// 触发 'remove' 事件
data.remove(1);

dataset