Webix 中的 Grid {select: "row"}

Webix是一个强大的Javascript UI库，提供了丰富的UI组件和工具，而Grid是其其中的一个核心组件之一。Grid是一个数据表格组件，支持行列排序、过滤、分页等功能。

在Webix的Grid组件中，通过设置其“select”属性，可以定义选择模式，而其中的“row”选项可以实现选择行的效果。

使用示例

在Grid的配置项中，设置select属性为"row"即可启用行选中模式：

{
    view: "datatable",
    select: "row",  // 选择模式为行选中
    columns: [
        { id: "rank", header: "Rank", css: "rank", width: 50, sort: "int" },
        { id: "title", header: "Title", css: "title", fillspace: true },
        { id: "year", header: "Year", css: "year", width: 80, sort: "int" }
    ],
    data: [
        { id: 1, rank: 1, title: "The Shawshank Redemption", year: 1994 },
        { id: 2, rank: 2, title: "The Godfather", year: 1972 },
        { id: 3, rank: 3, title: "The Godfather: Part II", year: 1974 }
    ]
}

效果展示

在以上配置项的基础上，可以看到Grid组件的选择模式已经被设置为"row"，当鼠标点击一行时，该行将被高亮显示：

实现原理

在Webix的Grid组件中，选择模式的实现基于选区（selection）和高亮（highlight）两个概念。

在"row"行选中模式下，当选中某一行时，该行的数据将被添加到选区中，同时改行的UI也会被高亮显示。选区是一个数组，包含了所有被选中的数据项的ID，而高亮则是通过CSS类名的方式实现的。

需要注意的是，当选择模式为"row"时，双击行将会触发编辑模式，而非打开某个详细信息页面。如果需要打开详细信息页面，可以考虑使用自定义事件来实现。