【问题标题】:jqGrid - how to get caption of the current grid?jqGrid - 如何获取当前网格的标题?
【发布时间】:2016-07-16 10:03:04
【问题描述】:

我的页面上有多个jqGrids。这些是动态创建的。我想从行单击中获取网格的标题。我看到setCaption 方法但没有getCaption。所以想知道是否有一种获得这个值的好方法?

我在 SO 或外部没有找到任何有用的链接。感谢任何帮助。

更新:

@Oleg 的解决方案帮助我解决了这个问题,他对如何找到网格 id 的评论让我重新思考了我的问题并得到了解决方案:

zLoadLabResult() 动态生成网格。当用户点击复选框时,我想知道我正在构建的其他一些逻辑的网格标题。

function zLoadLabResults(fulldata) {
    fulldata = $.parseJSON(fulldata);
    $.each(fulldata, function (i, item) {
        var data = item.resultData;
        var colNames = item.colNames;

        var colModelsArray = [];
        for (var i = 0; i < colNames.length; i++) {
            var str;
            if (i === 0) {
                str = {
                    name: 'id',
                    width: 25,
                    editoptions: { value: "True:False" },
                    editrules: { required: true },
                    edittype: 'checkbox',
                    formatter: zCheckboxFormatter,
                    formatoptions: { disabled: false },
                    editable: true,
                    sortable: false
                };
            } else {
                str = {
                    name: colNames[i],
                    index: colNames[i],
                    width: '100px'
                };
            }
            colModelsArray.push(str);
        }

        var gridName = "grid-" + item.testName;
        $("#gridcontainer").append("<table id='grid-" + item.testName + "' class='grid'></table>");

        $("#" + gridName).jqGrid({
            //url: "user.json",
            //datatype: "json",
            datatype: "local",
            colNames: colNames,
            colModel: colModelsArray,
            height: "auto",
            width: "auto",
            caption: item.testName
        });

        var names = colNames;
        var mydata = [];

        for (var i = 0; i < data.length; i++) {
            mydata[i] = {};
            for (var j = 0; j < data[i].length; j++) {
                mydata[i][names[j]] = data[i][j];
            }
        }

        for (var i = 0; i <= mydata.length; i++) {
            $("#" + gridName).jqGrid('addRowData', i + 1, mydata[i]);
        }
        for (var i = 0; i <= colNames.length; i++) {
            $("#" + gridName).jqGrid("setLabel", colNames[i], "", { "text-align": "left" });
        }
    });
};

function zCheckboxFormatter(cellvalue, options, rowObject) {
    return '<input type="checkbox" class="selectedId" name="Id-' + cellvalue + '">';
};

我通过添加 Oleg 的解决方案将以下事件与复选框挂钩:

$('table[id^="grid-"]').on("click", "td > input", function (e) {
    var grid = "#" + $(e.target).closest("table").attr("id");
    var caption = $(grid).jqGrid("getGridParam", "caption");

    var checked = $(e.target).is(":checked")

    var rowId = $(e.target).closest("tr").attr("id")
    rowData = $(grid).getRowData(rowId);        
});

【问题讨论】:

    标签: javascript jquery jqgrid


    【解决方案1】:

    如果您不对网格标题的内容进行任何手动操作,那么您只需为每个网格使用caption 选项。您可以使用getGridParam 获取每个网格的标题:

    var caption1 = $("#grid1").jqGrid("getGridParam", "caption");
    

    如果你想访问底层的标题,那么你可以使用以下

    var caption1 = $($("#grid1")[0].grid.cDiv).children("span.ui-jqgrid-title").html();
    

    【讨论】:

    • #grid1 对我来说是动态的。它在运行时生成。我只知道我选择的行。我错过了什么吗?
    • @SriReddy:你能发布一些你使用的代码片段吗?声明“我只知道我选择的行”。可以以多种方式解释,而且每个网格都包含单独的选定行列表。我写了$("#grid1") 指向一个你想从中获取标题的特定网格。如果您在另一个变量中引用了一个网格,那么您可以使用该变量而不是$("#grid1")。如果需要从页面上的所有 jqGrid 中获取标题,也没有问题。你只需要明确你做什么和你需要什么。
    • 谢谢奥列格。你让我努力思考,我能够从我的点击事件中获取 id。这行代码确定了网格 id:var grid = "#" + $(e.target).closest("table").attr("id");。而且,它刚刚奏效。对于其他人,我已经添加了代码(我之前应该这样做)和解决方案。
    • @SriReddy:不客气!如果您发布您使用的代码,将会很有帮助。我想你没有以最佳方式使用 jqGrid。你如何注册点击事件处理程序?由于事件冒泡,通常不需要注册任何人。整个网格上的click 处理程序获取jqGrid 内部每次点击的信息。因此,通常使用beforeSelectRow 回调。回调中的this 已经是表,this.id 是 id。 e.target 仍然指向被点击的元素,并且可以获得单元格、行、rowid 等。代码简洁明了。
    • @SriReddy:关于您发布的代码。首先,我建议您使用 free jqGrid 的最新版本 (4.13.1) - 我开发的 fork。秒,你不应该填写colModelindex 属性,删除width: '100px',这是错误的(正确的是整数值width: 100)。也不需要colNames。您应该永远不要使用addRowData 填充数据。这是我所知道的最慢的填充方式。而不是那个可以使用data: mydata,它在创建过程中填充网格。我可以继续...
    猜你喜欢
    • 1970-01-01
    • 2020-06-04
    • 1970-01-01
    • 2017-04-28
    • 1970-01-01
    • 2011-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多