Question

我有以下自定义网格

当用户单击“串行”列中的图像以显示一个对话框时，我需要获取rowObject，该对话框允许用户从该行的可用列表中选择另一个序列，然后将所选序列发送回服务器。

由于第5列和第6列上的图像执行与列中数据相关的功能，因此我无法将所有图像组合到具有编辑和删除按钮的单个操作列，因此this answer不适合我。

目前我正在使用以下方法查找所需的行并使用行数据调用我的函数。这个方法很慢，因为它必须遍历for循环中的数据并找到匹配的记录。我删除了所有不相关的代码，其余的是

    var TerminalColNames = [
        'id',
        'Serial'
    ];

    var TerminalColModel = [
        { name: 'id', width: '180px', formatter: TerminalID_Formatter},
        { name: 'serial', width: '160px', formatter: Formatter, sortable: false }
    ];

    function TerminalID_Formatter(cellvalue, options, rowObject) {
        return ' ' +
            '<img src="pencil.png" onclick="return edit(\'' + cellvalue + '\')"> ' +
            '<img src="bin.png"    onclick="return delete(\'' + cellvalue + '\')"> ' +
            cellvalue;
    }

    function Formatter(cellvalue, options, rowObject) {
        return '<img src="link.png" onclick="return bind(\'' + rowObject.id + '\')"></a> ' + rowObject.serial.current;
    }

    function CreateGrid(TableElement, colNames, colModel, data) {

        $(TableElement).jqGrid({
            datatype: 'local',
            data: data,
            colNames: colNames,
            colModel: colModel,
            height: '150px',
            //onSelectRow: function (id, status, e) {
            //    rowData = $(this).jqGrid("getLocalRow", id);
            //    return RowAction(rowData);
            //}
        });
    }

    $(function () {
        CreateGrid('#TerminalGrid', TerminalColNames, TerminalColModel, data.terminals);
    });

    function RowAction(rowData) {
        alert('Row Action:' + JSON.stringify(rowData));
    }

    function bind(id) {
        for (i in data.terminals){
            if (data.terminals[i].id == id){
                return ProcessBind(data.terminals[i]);
            }
        }
        return false;
    }


    function ProcessBind(rowObject){
        if (rowObject.id)
            alert('Bind:' + rowObject.serial.avail.length);
        else 
            alert('Bind not found');
        return true;
    }

    var data = {
        "id": "1234",
        "terminals": [
            {
                "id": "111111",
                "serial": {
                    "current": "888888",
                    "avail": [
                        "444444",
                        "555555",
                        "666666"
                    ]
                }
            },
            {
                "id": "777777",
                "serial": {
                    "current": "333333",
                    "avail": [
                        "999999",
                        "000000",
                    ]
                }
            },
            //.....
        ]
        //.....
    }

我没有使用$(this).closest('tr').attr('id')因为我认为它要慢得多，因为它必须通过DOM来查找id然后通过JSON数据来查找行数据。它还需要在id列中设置key: true。

问题

有没有更好的方法来获取记录数据？或者是否有一个jqGrid方法返回JSON数组中的rowIndex？

修改我忘了提到我正在使用oleg's free jqgrid 4.15.2

Answer 1

首先，我建议您在代码中进行一些小修补：

将属性function filter_meta_join($join) { global $wpdb; $join .= " LEFT JOIN $wpdb->postmeta ON $wpdb->posts.ID = $wpdb->postmeta.post_id "; return $join; }更改为width: '180px'，将选项width: 180更改为height: '150px'。当前代码有效，但由于height: 150将被解释为width: '180em'（或width: 180），因此可以理解它是错误的，但180px会真正增加网格的高度
应该减少JavaScript代码中全局函数的数量。例如，如果height: '150em'函数仅在CreateGrid内$(function () {...});和var data仅在CreateGrid内部使用，那么您应该在相应范围内移动变量/函数的声明。

现在谈谈你的主要问题。 beforeSelectRow，onSelectRow或onCellSelect回调的事件参数提供了您需要的所有信息。 target属性是在网格内部单击的DOM元素。可以测试其class，tagName，name或其他属性，以验证是否点击了特定的图片/图标。一个人不需要使用onclick属性。

关于表现。了解DOM元素（class，tagName，name，parentElement等属性的访问权限非常快，这一点非常重要。访问属性的时间不取决于页面上元素的总数。它使closest，hasClass和其他函数的工作非常快。这是推荐的方式。以下代码提供了访问完整行数据的示例：

onSelectRow: function (rowid, status, e) {
    var $self = $(this), $target = $(e.target),
        p = $self.jqGrid("getGridParam"),
        rowData = $self.jqGrid("getLocalRow", rowid),
        $td = $target.closest("tr.jqgrow>td"),
        iCol = $td.length > 0 ? $td[0].cellIndex : -1,
        cmName = iCol >= 0 ? p.colModel[iCol].name : "";

    switch (cmName) {
        case "id":
            if ($target.hasClass("myedit")) {
                alert("edit icon is clicked in the row with rowid=" + rowid);
            } else if ($target.hasClass("mydelete")) {
                alert("delete icon is clicked in the row with rowid=" + rowid);
            }
            break;
        case "serial":
            if ($target.hasClass("mylink")) {
                alert("link icon is clicked in the row with rowid=" + rowid);
            }
            break;
        default:
            break;
                  }
    alert("full row data:\n\n" + JSON.stringify(rowData));
    //    return RowAction(rowData);
}

请参阅https://jsfiddle.net/OlegKi/dfra7snb/

代码段

＆＃13;

$(function () {
    "use strict";
    function CreateGrid(TableElement, colNames, colModel, data) {
        $(TableElement).jqGrid({
            datatype: 'local',
            data: data,
            colNames: colNames,
            colModel: colModel,
            iconSet: "fontAwesome",
            onSelectRow: function (rowid, status, e) {
                var $self = $(this), $target = $(e.target),
                    p = $self.jqGrid("getGridParam"),
                    rowData = $self.jqGrid("getLocalRow", rowid),
                    $td = $target.closest("tr.jqgrow>td"),
                    iCol = $td.length > 0 ? $td[0].cellIndex : -1,
                    cmName = iCol >= 0 ? p.colModel[iCol].name : "";

                switch (cmName) {
                    case "id":
                        if ($target.hasClass("myedit")) {
                            alert("edit icon is clicked in the row with rowid=" + rowid);
                        } else if ($target.hasClass("mydelete")) {
                            alert("delete icon is clicked in the row with rowid=" + rowid);
                        }
                        break;
                    case "serial":
                        if ($target.hasClass("mylink")) {
                            alert("link icon is clicked in the row with rowid=" + rowid);
                        }
                        break;
                    default:
                        break;
                              }
                alert("full row data:\n\n" + JSON.stringify(rowData));
                //    return RowAction(rowData);
            },
            height: 150
        });
    }
    var TerminalColNames = [
        'id',
        'Serial'
    ];

    function TerminalID_Formatter(cellvalue, options, rowObject) {
        return '<span class="fa fa-pencil fa-lg myedit" aria-hidden="true"></span>' +
            '<span class="fa fa-trash-o fa-lg mydelete" aria-hidden="true"></span>' +
            cellvalue;
    }

    function Formatter(cellvalue, options, rowObject) {
        return '<span class="fa fa-link fa-rotate-90 fa-lg mylink" aria-hidden="true"></span>' +
            rowObject.serial.current;
    }
    var TerminalColModel = [
        { name: 'id', width: '180em', formatter: TerminalID_Formatter},
        { name: 'serial', width: 160, formatter: Formatter, sortable: false }
    ];
    var data = {
        "id": "1234",
        "terminals": [
            {
                "id": "111111",
                "serial": {
                    "current": "888888",
                    "avail": [
                        "444444",
                        "555555",
                        "666666"
                    ]
                }
            },
            {
                "id": "777777",
                "serial": {
                    "current": "333333",
                    "avail": [
                        "999999",
                        "000000",
                    ]
                }
            },
            //.....
        ]
        //.....
    };
    CreateGrid('#TerminalGrid', TerminalColNames, TerminalColModel, data.terminals);
});

＆＃13;

.myedit, .mydelete, .mylink {
    margin: 0 0.25em;
}
.myedit {
    color: green;
}
.mydelete {
    color: red;
}
.mylink {
    color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

<table id="TerminalGrid"></table>

＆＃13;

Answer 2

如果我理解正确，您可以使用 getLocalRow（rowid）方法，以防您使用本地数据。当知道rowid时，此方法通过索引快速返回rowdata。

另一个技巧是使用内部_index jqGrid参数来获取给定行id的行的索引。

var grid = $("#jqGrid")[0];
var rowid = "somerowid";
var rowIndex = grid.p._index[rowid];

var datarow = grid.p.data[rowIndex];

方法getLocaRow使用类似的方法。

如果数据不是本地数据，您可以使用 getInd 方法

此处的方法用于Guriddo jqGrid。有关方法的更多信息，请参见Guriddo Documentation

jqGrid获取自定义按钮单击的行数据

2 个答案: