在渲染/表加载后选择行

Question

一旦数据或表被渲染/加载，我试图在Tabulator表中选择一行。我并不特别讨论使用哪个回调，但是当用户导航到此页面时，表格应该加载一个预定的记录（我将其解析为参数）。

回调本身效果很好，因为我可以显示JS警报，但是我仍然无法在Tabulator中选择一行。

//create Tabulator on DOM element with id "example-table"
var table = new Tabulator(
    "#example-table", {
        height: (window.innerHeight), // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically
        headerFilterPlaceholder: '', //default place holder text for filters
        selectable: 1, //allows row within table to be selected and have selected state (not to be confused with row click function), can be set to have multiple selected (integer), true or false
        data: [ **DATA1** ], //assign data to table
        dataTree: true,
        dataTreeStartExpanded: true,
        dataTreeBranchElement: false, //adds or removes right angle leading from parent to child
        dataTreeChildIndent: 25, //changes the indent padding
        dataTreeCollapseElement: !1,
        dataTreeStartExpanded: !0, //changes whether or not the entire table begins expanded
        dataTreeCollapseElement: "<span>▼ </span>",
        dataTreeExpandElement: "<span>► </span>",
        layout: "fitColumns", //fit columns to width of table (optional)
        columns: [ **COLUMN1** ],
        rowClick:function(e, row) //triggered when the row is clicked
        {
            var scriptParam = **SCRIPTPARAM1**;
            var rowId = row.getData().id;
            var fieldName = **FIELDNAME1**;
            var theList = [scriptParam, rowId, fieldName];
            var doThis = "fmp://$/**FILE**?script=**SCRIPT1**&param=" + theList;
            window.location.href = doThis;
        },
        rowDblClick:function(e, row) //triggered when the row is double clicked
        {
            table.selectRow(**ROWID**);
        },
        rowContext:function(e, row) //triggered when the row is right clicked
        {
            alert('right click');
            e.preventDefault(); //overrides the browsers native right click function
        },
        cellEdited: function(cell)
        {
            var parameter = 1.1;
            var distribute = cell.getColumn().getDefinition().distribute;
            var id = cell.getData().id;
            var table = cell.getColumn().getDefinition().fmTable;
            var field = cell.getColumn().getDefinition().fmTable + "::" + cell.getColumn().getDefinition().fmField;
            var table = cell.getColumn().getDefinition().fmTable;
            var scriptBefore = cell.getColumn().getDefinition().script_before;
            var scriptAfter = cell.getColumn().getDefinition().script_after;
            var value = cell.getValue();
            var theList = [parameter, distribute, id, table, field, value];
            var doThis = "fmp://$/**FileName**?script=**ScriptName**&param=" + theList;
            window.location.href = doThis;
        },
        rowFormatter: function(row) {
            var rowColor = row.getData().color
            row.getElement().style.backgroundColor = rowColor;
        },
        renderComplete:function()
        {
            table.selectRow(**ROWID**);
        }
    }
);

我希望一旦页面加载，我选择的行定义为**ROWID**（我的测试是ID 1）。仅供参考，双击功能（无论单击哪一行）都按预期执行，选择正确的行。

为了进一步说明这一点，我希望（有时）选择数据树的子行，例如：

const tabledata1 = [{
        id: "1",
        name: "Oli Bob",
        location: "United Kingdom",
        gender: "male",
        col: "red",
        dob: "14/04/1984",
        _children: [{
                id: "2",
                name: "Mary May",
                location: "Germany",
                gender: "female",
                col: "blue",
                dob: "14/05/1982"
            },
            {
                name: "Christine Lobowski",
                location: "France",
                gender: "female",
                col: "green",
                dob: "22/05/1982"
            },
            {
                name: "Brendon Philips",
                location: "USA",
                gender: "male",
                col: "orange",
                dob: "01/08/1980",
                _children: [{
                        name: "Margret Marmajuke",
                        location: "Canada",
                        gender: "female",
                        col: "yellow",
                        dob: "31/01/1999"
                    },
                    {
                        name: "Frank Harbours",
                        location: "Russia",
                        gender: "male",
                        col: "red",
                        dob: "12/05/1966"
                    },
                ]
            },
        ]
    },
    {
        name: "Jamie Newhart",
        location: "India",
        gender: "male",
        col: "green",
        dob: "14/05/1985"
    },
    {
        name: "Gemma Jane",
        location: "China",
        gender: "female",
        col: "red",
        dob: "22/05/1982",
        _children: [{
            name: "Emily Sykes",
            location: "South Korea",
            gender: "female",
            col: "maroon",
            dob: "11/11/1970"
        }, ]
    },
    {
        name: "James Newman",
        location: "Japan",
        gender: "male",
        col: "red",
        dob: "22/03/1998"
    },
];

const table = new Tabulator("#example-table", {
    height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data: tabledata1, //assign data to table
    selectable: true, //make rows selectable
    layout: "fitColumns", //fit columns to width of table (optional)
    autoColumns: true,
    dataTree: true,
    dataTreeStartExpanded: true,
    renderComplete: function() {
        console.log('done');
        this.selectRow(2);
    }
});

Answer 1

table.selectRow（ROWID）;在表初始化之前不能工作你必须这样做.selectRow

检查这个jsfiddle

  renderComplete: function() {
    const rows = this.getRows();
    console.log('rows', rows);
    for (let i = 0; i < rows.length; i++) {
      const childRows = rows[i].getTreeChildren();
      if (childRows.length > 0) {
        // console.log('childRows', childRows);

        // this.selectRow(childRows);
        for (let j = 0; j < childRows.length; j++) {
          const gender = childRows[j].getData().gender;
          console.log('gender', gender);
          if (gender === 'male') {
            this.selectRow(childRows[j]);
            const childRows2 = childRows[j].getTreeChildren();

          }
        }
      }
    }
  }
});