如何选中Webix DataTable的行/单元格以支持方向键导航？

Hey there! I’ve dealt with this exact quirk in Webix DataTables before, so I know exactly what’s going on and how to fix it.

The Root Cause #

When you use a button to trigger a selection (either a row or cell), Webix only updates the visual selected state—it doesn’t give the table keyboard focus. Mouse clicks automatically handle both the selection and focus, which is why direction keys work after clicking manually.

The Solution #

After programmatically selecting a row or cell, you just need to explicitly give the table keyboard focus using the focus() method. This tells the browser to route keyboard events (like direction keys) to the table, enabling navigation.

For Row Selection Mode (select:"row")

// Attach click handler to your button
$$("selectRowBtn").attachEvent("onItemClick", function() {
  const table = $$("myDataTable");
  
  // Select the first row
  table.select(0);
  // Give the table keyboard focus
  table.focus();
});

For Cell Selection Mode (select:"cell")

For cell mode, you’ll also want to ensure the selected cell is active (and visible if your table has scrolling):

$$("selectCellBtn").attachEvent("onItemClick", function() {
  const table = $$("myDataTable");
  
  // Select the first cell (row 0, column 0)
  table.selectCell(0, 0);
  // Give the table focus
  table.focus();
  // Optional: Ensure the cell is visible in the viewport
  table.showCell(0, 0);
});

Full Working Example #

Here’s a complete snippet to see this in action:

webix.ui({
  rows: [
    { 
      cols: [
        { view:"button", id:"selectRowBtn", value:"Select First Row", width:150 },
        { view:"button", id:"selectCellBtn", value:"Select First Cell", width:150 }
      ]
    },
    { 
      view:"datatable", id:"myDataTable", 
      select:"cell", // Switch to "row" for row selection mode
      columns: [
        { id:"id", header:"ID", width:80 },
        { id:"name", header:"Full Name", fillspace:true },
        { id:"email", header:"Email", fillspace:true }
      ],
      data: [
        { id:1, name:"John Doe", email:"john@example.com" },
        { id:2, name:"Jane Smith", email:"jane@example.com" },
        { id:3, name:"Bob Brown", email:"bob@example.com" },
        { id:4, name:"Alice Lee", email:"alice@example.com" }
      ]
    }
  ]
});

// Row selection handler
$$("selectRowBtn").attachEvent("onItemClick", function() {
  const table = $$("myDataTable");
  table.select(0);
  table.focus();
});

// Cell selection handler
$$("selectCellBtn").attachEvent("onItemClick", function() {
  const table = $$("myDataTable");
  table.selectCell(0, 0);
  table.focus();
  table.showCell(0, 0);
});

Why This Works #

Calling focus() makes the DataTable the active element for keyboard input. Webix’s built-in keyboard navigation logic only triggers when the table has focus, so this bridges the gap between programmatic selection and manual (mouse-driven) selection behavior.

内容的提问来源于stack exchange，提问作者TheAthlete