jqx-grid - 在不同的表上选择条件

Question

使用 Angular 1.x 和 jqx-grid，我在同一页面上有两个单独的表格（相同范围）。

表之间具有一对一的关系。一张

Commodity

桌子和一张

CommodityDetails

桌子。

Commodity

表有一个

CommodityDetailsId

列，与

CommodityDetails

表上的 Id 相对应。

我希望能够单击

CommodityDetailsId

表中的

Commodity

并单击，我希望滚动到并突出显示

CommodityDetails

表的相应行。

在我遇到的一个特定示例中，jqx api 为网格提供了

selectRow(int)

函数，允许您选择网格上的特定行。现在，这适用于不同的表，但是我还没有找到一种根据条件选择行的方法。我需要类似

selectRowBasedOn(x => x.CommodityDetailsId === commodityDetailsGrid.Id)

的东西或类似的东西。

有没有办法根据网格的条件选择/突出显示 jqx-grids 中的一行？

Answer 1

偶然看到这个帖子。我最近碰巧在做类似的事情。我修改了自己的代码作为示例。不确定它是否适合您的用例场景，但希望它有所帮助。

您第一次单击的网格需要一个

on rowclick listener

。然后，您从所选的行中获取 Id。之后，使用 for 循环在另一个网格中查找相应的行。最后，使用

selectrow

选择行。

示例：https://jsfiddle.net/gvy2s81w/（您需要修改它以适合您的情况！）

html代码：

<div id="commodityGrid"></div>
<div id="commodityDetailsGrid"></div>

JavaScript + jQuery 代码：

$(document).ready(function () {
    // Test data
    var commodityData = [
        { CommodityDetailsId: 1, Name: 'Commodity 1' },
        { CommodityDetailsId: 2, Name: 'Commodity 2' },
        { CommodityDetailsId: 3, Name: 'Commodity 3' }
    ];

    var commodityDetailsData = [
        { Id: 1, Detail: 'Detail 1' },
        { Id: 2, Detail: 'Detail 2' },
        { Id: 3, Detail: 'Detail 3' }
    ];

    // Create dataAdapters
    var commodityDataAdapter = new $.jqx.dataAdapter({ localdata: commodityData, datatype: "array" });
    var commodityDetailsDataAdapter = new $.jqx.dataAdapter({ localdata: commodityDetailsData, datatype: "array" });

    // Initialize your jqxGrids
    var commodityGrid = $("#commodityGrid").jqxGrid({
        width: 850,
        height: 150,
        source: commodityDataAdapter,
        columns: [
            { text: 'CommodityDetailsId', datafield: 'CommodityDetailsId', width: 180 },
            { text: 'Name', datafield: 'Name', width: 180 }
        ]
    });

    var commodityDetailsGrid = $("#commodityDetailsGrid").jqxGrid({
        width: 850,
        height: 150,
        source: commodityDetailsDataAdapter,
        columns: [
            { text: 'Id', datafield: 'Id', width: 180 },
            { text: 'Detail', datafield: 'Detail', width: 180 }
        ]
    });

    // Add a click event handler to the Commodity grid
    commodityGrid.on('rowclick', function (event) {
        var args = event.args;
        var row = args.rowindex;
        var data = commodityGrid.jqxGrid('getrowdata', row);

        // Get the CommodityDetailsId from the clicked row
        var commodityDetailsId = data.CommodityDetailsId;

        // Find the corresponding row in the CommodityDetails grid
        var rows = commodityDetailsGrid.jqxGrid('getrows');
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].Id === commodityDetailsId) {
                // Select the row and break the loop
                commodityDetailsGrid.jqxGrid('selectrow', i);
                break;
            }
        }
    });

    // Add a click event handler to the CommodityDetails grid
    commodityDetailsGrid.on('rowclick', function (event) {
        var args = event.args;
        var row = args.rowindex;
        var data = commodityDetailsGrid.jqxGrid('getrowdata', row);

        // Get the Id from the clicked row
        var id = data.Id;

        // Find the corresponding row in the Commodity grid
        var rows = commodityGrid.jqxGrid('getrows');
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].CommodityDetailsId === id) {
                // Select the row and break the loop
                commodityGrid.jqxGrid('selectrow', i);
                break;
            }
        }
    });
});