jqGrid自定义输入元素需要父表的句柄

jqGrid custom input element needs handle to parent table

本文关键字：句柄 自定义 输入 元素 jqGrid      更新时间：2023-09-26

我正在使用jqGrid在页面上构建一个自定义的内联条目小部件。jqjGrid设置的相关部分是：

  colModel:[  {
         // Other columns removed.
    {name:'ship',index:'ship', width:90, editable: true, sortable: false, 
            edittype: "custom",
            editoptions:{ custom_element: customElement, 
                            custom_value: customValue} }
    ],

我的回调函数是：

function customElement(value, options) {
    var a = $("<input>").attr({ 
                type: 'text', 
                size: 2,
                value: value,
                style: 'float: left'
        }).add(
            $("<span>").attr({ 
                style: 'float: left; margin-top: 2px;',
                'class': 'ui-icon ui-icon-search'
        }).click(function() {
                    // My custom function here.
           })
        ).appendTo($("<div>"));
    return a;
}

这一切都很正常。

然而，我正在构建一个库来管理页面上的几个jqgrid表。我想使用相同的函数在其中几个表上构建自定义元素。问题是，这个特殊的click()函数需要知道它正在处理哪个jquery表。

我可以在customElement开始时通过一种巧妙的方式获得表ID，并在闭包中将其传递给函数：

var fieldID = options.id;
var rowID = fieldID.replace(/_.*/, "");
var containingTable = $("#" + rowID + "_id").closest("table");

但这假设列"id"存在于当前jqGrid中，并且它是较早的（向左）列。我不能使用"ship"列，因为它还没有创建。我也不能假设表中还有其他行会有"ship"列。

在customer_element处理程序中，如何可靠地获得"调用"表的句柄？

我同意这是jqGrid当前代码中的一个问题。没有简单而优雅的方法可以获得为其创建控件的网格的id。

你已经建议了一个变通方法。我可以建议你再使用一个版本来获取"调用表"的id。

自定义元素可用于各种编辑模式：内联编辑、表单编辑和单元格编辑。click句柄接收事件对象e

.click(function(e) {
    // My custom function here.
})

您可以检测"调用网格"的id。在内联编辑或单元格编辑的情况下，检测是最容易的。它将是

.click(function(e) {
    var $grid = $(e.target).closest('table.ui-jqgrid-btable');
    ...
})

在表单编辑的click事件处理程序内部，您可以使用

.click(function(e) {
    // you can do the following
    var $t = $(e.target).closest('table.EditTable'),
        tid = $t.attr('id'); // id=TblGrid_list
    if (typeof tid === "string" && tid.substr(0, 8) === 'TblGrid_') {
        var gridId = tid.substr(8);
    }
    var grid = $('#' + $.jgrid.jqID(gridId));
    // or the following
    var $f = $(e.target).closest('form.FormGrid'),
        fid = $f.attr('id');   // id=FrmGrid_list
    if (typeof fid === "string" && fid.substr(0, 8) === 'FrmGrid_') {
        var grid_id = tid.substr(8);
    }
    var mygrid = $('#' + $.jgrid.jqID(grid_id));
    ...
})

上面的代码使用了这样一个事实，即编辑表单包含两个元素，这些元素的id将基于网格的id构建：如果网格id="list"，则编辑表单内部的<table>元素具有id="TblGrid_list"，而<form>元素具有id＝"FrmGrid_list"。

与$('#' + gridId)相比，$('#' + $.jgrid.jqID(gridId))的使用更安全，因为当网格id包含元字符时，它会给出正确的结果。jqID功能非常简单（请参见此处）。它只对jQuery选择器中使用的元字符进行转义。

相关文章：