Question

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

当我显示警报时，我想在colNames中向用户显示列标题标签，而不是该输入字段的colmodel名称，因为这对用户来说更清晰。我有一个jsfiddle示例，其中包含“客户名称”字段的简单示例。 “客户端名称”在警报消息中是硬编码的。理想情况下，我不想对标签进行硬编码，因为它可能会发生变化，例如，“客户名称”可能会更改为“客户名称”。我不想再回到函数来改变它。在一个地方更改它是微不足道的，但我可能有一个包含多个列的网格和涉及过滤器工具栏字段的相关函数，并且在任何地方更改标签都是低效的。

我搜索了jqGrid文档，但没有找到执行此操作的函数。我知道列标签包含在名为jqgh_ {grid name} _ {column name}的div中，例如jsfiddle中的jqgh_test1_name，我可以获取div内容，但是我必须从其余部分解析出标签内容，似乎比需要更多的工作。 jqGrid中是否有内置功能来执行此操作，或者我是否必须从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中，如何在验证filtertoolbar字段时动态获取列标题标签？

1 个答案: