jQWidgets jqxTagCloud displayMember 属性介绍

简介

jQWidgets 是一个基于 jQuery 的开源 UI 组件库，提供了丰富的前端 UI 组件，其中 jqxTagCloud 是其中之一，它是一个标签云控件，可以根据数据源中的值在页面上以云朵的形式展现数据。

displayMember 是 jqxTagCloud 的一个重要属性，它定义了数据源中要显示的值的字段名。

用法

定义 displayMember 属性

在使用 jqxTagCloud 控件时，可以通过定义 displayMember 属性来确定数据源中要显示在标签云中的字段名。如下例子所示：

$("#jqxTagCloud").jqxTagCloud({
  displayMember: "name", // 数据源中要显示的字段名
  ...
});

数据源示例

为了展现 displayMember 属性的作用，这里提供了一个简单的数据源示例：

const dataSource = [
  { name: "JavaScript", weight: 10 },
  { name: "HTML", weight: 8 },
  { name: "CSS", weight: 6 },
  { name: "React", weight: 8 },
  { name: "Angular", weight: 7 },
  { name: "Vue.js", weight: 5 },
  { name: "Node.js", weight: 6 },
  { name: "Express.js", weight: 3 },
  { name: "MongoDB", weight: 4 },
  { name: "MySQL", weight: 4 },
];

使用示例

以下是一个完整的使用示例，其中定义了 displayMember 属性，确保数据源中的 name 字段被展现在标签云中：

const dataSource = [
  { name: "JavaScript", weight: 10 },
  { name: "HTML", weight: 8 },
  { name: "CSS", weight: 6 },
  { name: "React", weight: 8 },
  { name: "Angular", weight: 7 },
  { name: "Vue.js", weight: 5 },
  { name: "Node.js", weight: 6 },
  { name: "Express.js", weight: 3 },
  { name: "MongoDB", weight: 4 },
  { name: "MySQL", weight: 4 },
];

$("#jqxTagCloud").jqxTagCloud({
  displayMember: "name",
  source: dataSource,
  width: 600,
  height: 400,
});

注意事项

• displayMember 属性必须是数据源中的字段名。
• 若数据源中的字段名与 displayMember 属性不同，则无法将对应的数据展现在标签云中。

总结

displayMember 属性是 jqxTagCloud 的一个重要属性，用于指定数据源中要显示的字段名，以便将对应的数据展现在标签云中。在使用该属性时，需要注意数据源中的字段名与 displayMember 属性的一致性，以确保控件能够正确地展现数据。