在 JQGrid 中，如何在验证过滤器工具栏字段时动态获取列 header 标签？

Question

我有一个启用了 filtertoolbar 选项的 jqGrid。对于网格中的一列或多列，我想以某种方式验证该列，例如，如果输入字段超过特定长度，则显示警报。

当我显示警报时，我想向用户显示 colNames 中的列 header 标签，而不是该输入字段的 colmodel 名称，因为这对用户来说会更清楚。我有一个 jsfiddle 示例，其中包含 "Client Name" 字段的简单示例。 "Client Name" 是警报消息中的 hard-coded。理想情况下，我不想 hard-code 标签，因为它可能会更改，例如，"Client Name" 可以更改为 "Customer Name"。我不想每次都回到函数中去改变它。在一个地方更改它是微不足道的，但我可能有一个包含多个列的网格和涉及过滤器工具栏字段的相关功能，并且在所有地方更改标签是低效的。

我已经搜索了 jqGrid 文档，但没有找到执行此操作的函数。我知道列标签包含在名为 jqgh_{grid name}_{column name} 的 div 中，例如 jsfiddle 中的 jqgh_test1_name，我可以获得 div 内容，但我必须从其余内容中解析出标签，这似乎比需要的工作更多。 jqGrid 中是否有 built-in 功能来执行此操作，或者我是否必须从 div 解析标签，或者我可以采用另一种方法吗？

提前致谢...

<table id="test1"></table>
.ui-widget { font-size: 0.8em }
$("#test1").jqGrid({
    datatype: "local",
    height: 250,
    colNames:['Inv No','Date', 'Client Name', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter: 'date', formatoptions: {newformat: 'm/d/Y', srcformat: 'Y-m-d'}},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    multiselect: true,
    caption: "Manipulating Array Data"
});

$("#test1").jqGrid('filterToolbar', {
                autosearch: true,
                stringResult: false,
                searchOnEnter: true,
                defaultSearch: "cn",
            });

var maxNameLength = 10;
$("input[id=gs_name]").blur(function () {
    if (this.value.length > maxNameLength) {
                        alert('Client Name is longer than ' + maxNameLength + ' characters.');
                    }
});
            $('#gs_invdate').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true
            });

    var mydata = [
        {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
        ];
for(var i=0;i<=mydata.length;i++)
    $("#test1").jqGrid('addRowData',i+1,mydata[i]);

Answer 1

有很多方法可以实现您的要求修改后的演示 http://jsfiddle.net/OlegKi/ejnrtocw/20/ 例如使用以下代码作为示例

$("input[id=gs_name]").blur(function () {
    var $th = $(this).closest(".ui-search-toolbar>th"),
        colIndex = $th[0].cellIndex,
        $colHeader = $th.parent().siblings(".ui-jqgrid-labels").children("th").eq(colIndex),
        colHeaderText = $colHeader.children("div").text();
    if (this.value.length > maxNameLength) {
        alert(colHeaderText + ' is longer than ' + maxNameLength + ' characters.');
    }
});

前两行最重要。 colIndex 存在于每个 <td> 和 <th> 元素中，并为我们提供了专利中的位置（从 0 开始）。所以 colIndex 是列索引所以可以将它用作 colNames 参数的索引来访问列文本：

$("input[id=gs_name]").blur(function () {
    var $th = $(this).closest(".ui-search-toolbar>th"),
        colIndex = $th[0].cellIndex,
        p = $("#test1").jqGrid("getGridParam"),
        colHeaderText = p.colNames[colIndex];
    if (this.value.length > maxNameLength) {
        alert(colHeaderText + ' is longer than ' + maxNameLength + ' characters.');
    }
});

查看下一个演示 http://jsfiddle.net/OlegKi/ejnrtocw/21/

在 JQGrid 中，如何在验证过滤器工具栏字段时动态获取列 header 标签？

In JQGrid, How can I dynamically get the column header label when validating a filtertoolbar field?

javascript

label

header

jqgrid