jQWidgets jqxTreeGrid getCheckedRows()方法详解

简介

getCheckedRows()方法是jQWidgets jqxTreeGrid插件中提供的一个方法，用于获取选中的行数据。在一个树形表格（treegrid）中，我们可能需要选择多个节点来进行操作。此时，我们就可以使用该方法来获取选中的数据并进行相关操作。

方法签名

getCheckedRows(): Array<Object>

参数说明

该方法没有参数。

返回值

该方法返回一个包含选中行数据的数组。每行数据都是存储在一个Object对象中的。具体Object中存储的内容取决于我们在初始化treegrid对象时定义的数据结构和字段名称。

示例说明

下面通过两个不同的示例来说明该方法的使用方法。

示例一

代码如下：

var treeGridData = [
  { "id": "1", "name": "Parent 1", "children": [
    { "id": "2", "name": "Child 1" },
    { "id": "3", "name": "Child 2" },
    { "id": "4", "name": "Child 3", "children": [
      { "id": "5", "name": "Sub-child 1" },
      { "id": "6", "name": "Sub-child 2" }
    ]}
  ]},
  { "id": "7", "name": "Parent 2", "children": [
    { "id": "8", "name": "Child 4" },
    { "id": "9", "name": "Child 5", "children": [
      { "id": "10", "name": "Sub-child 3" }
    ]}
  ]}
];

var treeGridSource = {
    dataType: "json",
    dataFields: [
        { name: "id", type: "string" },
        { name: "name", type: "string" },
        { name: "children", type: "array" }
    ],
    hierarchy: {
        root: "children"
    },
    localData: treeGridData
};

var gridSettings = {
    width: "100%",
    theme: "material",
    source: new $.jqx.dataAdapter(treeGridSource),
    columnsResize: true,
    columns: [
        { text: "ID", dataField: "id" },
        { text: "Name", dataField: "name" }
    ]
};

$("#jqxTreegrid").jqxTreeGrid(gridSettings);

$("#submitButton").click(function(){
  var checkedRows = $("#jqxTreegrid").jqxTreeGrid('getCheckedRows');
  console.log(checkedRows);
});

在本示例中，我们定义了一个树形表格插件并初始化。其中treeGridData变量是模拟的数据，模拟了一个包含多层节点的树形结构。我们使用treeGridSource变量来定义数据源，并且在树形表格初始化时将其作为参数传入。

我们还定义了一个按钮，当点击该按钮时，我们通过getCheckedRows()方法来获取选中的行数据并将其输出到控制台中。

示例二

代码如下：

var treeGridData = [
  { "id": "1", "name": "Parent 1", "isSelected": false, "children": [
    { "id": "2", "name": "Child 1", "isSelected": false },
    { "id": "3", "name": "Child 2", "isSelected": false },
    { "id": "4", "name": "Child 3", "isSelected": false, "children": [
      { "id": "5", "name": "Sub-child 1", "isSelected": false },
      { "id": "6", "name": "Sub-child 2", "isSelected": false }
    ]}
  ]},
  { "id": "7", "name": "Parent 2", "isSelected": false, "children": [
    { "id": "8", "name": "Child 4", "isSelected": false },
    { "id": "9", "name": "Child 5", "isSelected": false, "children": [
      { "id": "10", "name": "Sub-child 3", "isSelected": false }
    ]}
  ]}
];

var treeGridSource = {
    dataType: "json",
    dataFields: [
        { name: "id", type: "string" },
        { name: "name", type: "string" },
        { name: "isSelected", type: "bool" },
        { name: "children", type: "array" }
    ],
    hierarchy: {
        root: "children"
    },
    localData: treeGridData
};

var gridSettings = {
    width: "100%",
    theme: "material",
    source: new $.jqx.dataAdapter(treeGridSource),
    columnsResize: true,
    columns: [
        { text: "ID", dataField: "id" },
        { text: "Name", dataField: "name", editable: true }
    ],
    checkboxes: true
};

$("#jqxTreegrid").jqxTreeGrid(gridSettings);

$("#submitButton").click(function(){
  var checkedRows = $("#jqxTreegrid").jqxTreeGrid('getCheckedRows');
  console.log(checkedRows);
});

在本示例中，我们定义了一个包含checkbox的树形表格。我们在数据源中增加了一个isSelected字段来记录每个节点是否被选中。

在树形表格初始化时，我们在gridSettings对象中增加了checkboxes: true，使每个节点都显示一个checkbox。

我们还定义了一个按钮，当点击该按钮时，我们通过getCheckedRows()方法来获取选中的行数据并将其输出到控制台中。

结论

通过以上两个示例，我们可以看出，使用getCheckedRows()方法是非常简单和方便的。通过该方法，我们可以轻松地获取到选中的节点信息，并进行相关操作。同时，在树形表格中使用带有checkbox的选项来进行多选操作也非常方便。