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

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

DataSet构造

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

构造后，可通过 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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

DataSet 包含方法

增删改

On：监听

DataSet.on(event, callback)
1

Off：关闭监听

DataSet.off(event, callback)
1

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

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

Add：新增

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

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

UpdateOnly：更新

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

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

Update ：更新|新增

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

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

Remove：删除

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

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

Clear：清除

var removedIds = DataSet.clear([senderId])
1

演示

// 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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

dataset