jqGrid:从层次结构网格中单击的行中获取数据 [英] jqGrid : Get data from a row that has been clicked within a heirarchical grid

问题描述

我目前正在研究一个使用jqGrid和多个子网格的项目.我试图在单击或双击行时获取rowid(并获取行中的数据).最终，我想用单击行中的数据填充文本框.

Im currently working on a project which uses jqGrid with multiple subgrids. I'm trying to get the rowid (and get at the data within the row) when a row is clicked or double clicked. Eventually I would like to fill a text box with data from a clicked row.

我在这里使用ondblClickRow和onSelectRow示例尝试了一些变体，但无法使其正常工作.我想我缺少了一些非常简单的东西，但是看不到.因此，我回过头并尽可能简化了它，以便仅识别行单击并显示警报.这对我也不起作用.

I've tried a few variations using ondblClickRow and onSelectRow examples on here but wans't able to get it working. I think I'm missing something really simple but don't see what. So I went back and simplified it down as much as possible to just recognize the row click and display an alert. This won't work for me either.

(基于 jqGrid中的示例:发出加载具有本地数据类型的嵌套子网格的问题)查找//*************** 靠近底部的部分.

(based on the example in jqGrid : issue loading nested sub grid with local datatype) Look for the //*************** part near the bottom..

var myData = [
// main grid data
     { id: "1", col1: "11", col2: "12",
         subgrid: [
                // data for subgrid for the id=m1
                    { id: "1", c1: "aa", c2: "ab", c3: "ac",
                        subgrid: [
                            // data for subgrid for the id=m1, subgridId=s1a
                            { id: "1", d1: "2aa", d2: "2ab", d3: "2ac" },
                            { id: "2", d1: "2ba", d2: "2bb", d3: "2bc" },
                            { id: "3", d1: "2ca", d2: "2cb", d3: "2cc" }
                        ]},
                { id: "2", c1: "ba", c2: "bb", c3: "bc" },
                { id: "3", c1: "ca", c2: "cb", c3: "cc" }
         ]},
    { id: "2", col1: "21", col2: "22",
        subgrid: [
            // data for subgrid for the id=m2
            { id: "1", c1: "1xx", c2: "1xy", c3: "1xz",
                subgrid: [
                    // data for subgrid for the id=m2, subgridId=s2a
                    { id: "1", d1: "2xx", d2: "2xy", d3: "2xz" }
                ]}
        ]},
    { id: "3", col1: "31", col2: "32" }
],
removeSubgridIcon = function () {
    var $this = $(this),
        idPrefix = $this.jqGrid("getGridParam", "idPrefix");
    $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function () {
        var rowData = $this.jqGrid("getLocalRow",
                $.jgrid.stripPref(idPrefix, $(this).closest("tr.jqgrow").attr("id")));
        return rowData.subgrid == null;
    }).unbind("click").html("");
},
isHasSubrids = function (data) {
    var l = data.length, i;
    for (i = 0; i < l; i++) {
        if (data[i].subgrid != null) {
            return true;
        }
    }
    return false;
},
specificGridOptions = [
    {
        colNames: ["Column 1", "Column 2"],
        colModel: [
            { name: "col1" },
            { name: "col2" }
        ],
        cmTemplate: { width: 200 },
        sortname: "col1",
        sortorder: "desc",
        idPrefix: "s_",
        pager: "#pager",
        caption: "Demonstrate how to create subgrid from local hierarchical data"
    },
    {
        colNames: ["Colunm1", "Colunm2", "Colunm3"],
        colModel: [
            { name: "c1" },
            { name: "c2" },
            { name: "c3" }
        ],
        cmTemplate: { width: 112 },
        sortname: "c1",
        sortorder: "desc"
    },
    {
        colNames: ["Col 1", "Col 2", "Col 3"],
        colModel: [
            { name: "d1" },
            { name: "d2" },
            { name: "d3" }
        ],
        cmTemplate: { width: 90 },
        sortname: "d1",
        sortorder: "desc"
    }
],
commonGridOptions = {
    datatype: "local",
    gridview: true,
    rownumbers: true,
    autoencode: true,
    height: "100%",
    //***************
    onSelectRow : function () 
    {
        alert('test!');
    },
    //also tried many variation on this
    ondblClickRow: function(rowid) 
    {
        alert(rowid);
    }
    //***************
    loadComplete: function () {
        // one can use loadComplete: removeSubgridIcon, but I included
        // curent implementation of loadComplete only to show how to call
        // removeSubgridIcon from your loadComplete callback handler
    removeSubgridIcon.call(this);
},
subGridRowExpanded: function (subgridDivId, rowId) {
    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
        subgridLevel = $(this).jqGrid("getGridParam", "subgridLevel") + 1,
        parentIdPrefix = $(this).jqGrid("getGridParam", "idPrefix"),
        pureRowId = $.jgrid.stripPref(parentIdPrefix, rowId),
        localRowData = $(this).jqGrid("getLocalRow", pureRowId);
    $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
    $subgrid.jqGrid($.extend(true, {}, commonGridOptions, specificGridOptions       [subgridLevel], {
        data: localRowData.subgrid,
        subGrid: isHasSubrids(localRowData.subgrid),
        subgridLevel: subgridLevel,
        idPrefix: rowId + "_",
        rowNum: 10000 // we use this to have no pager in the subgrids
    }));
}
};

$("#list").jqGrid($.extend(true, {}, commonGridOptions, specificGridOptions[0], {
    data: myData,
    subgridLevel: 0,
    subGrid: isHasSubrids(myData)
}));

任何人都知道为什么它无法识别行点击/双击吗?

Anyone have any ideas why it won't recognize the row click/double click?

推荐答案

您在注释中写道，您是从服务器获取网格数据的.我想在这种情况下使用datatype: "local"并不是最佳选择.看看答案，我在其中描述了使用datatype: "json"的相同方法.

You wrote in comment that you get the data for the grid from the server. I suppose that the usage of datatype: "local" in the case is not the best choice. Look at the answer where I described the way how to do the same, but using datatype: "json".

现在我回到您的主要问题.我不知道您要填充哪个文本框(HTML输入元素)以及输入元素是在网格内部还是在网格外部.但是，您唯一可能遇到的问题就是jqGrid的idPrefix选项的正确用法.

Now I come back to your main question. I don't understand what text box (HTML input element) you want to fill and whether the input element is inside of the grid or outside of it. Nevertheless the only problem which you could probably have is the correct usage of idPrefix option of jqGrid.

要理解，jqGrid使用HTML <table>表示网格体非常重要.在当前的jqGrid实现中，<table>的每个<tr>元素都必须具有id属性.因此，来自输入数据的id属性将用于分配<tr>元素的id属性值.如果在页面上将多个网格作为一个网格，或者将一个网格与子网格作为一个网格，则很容易收到id重复项，而在所有版本的HTML或XHTML中都是不允许的.

It's very important to understand, that jqGrid use HTML <table> for representing of the body of grids. Every <tr> element of the <table> must have id attribute in the current implementation of jqGrid. So the id property from the input data will be used to assign the value of id attribute of <tr> elements. If one has more as one grid on the page or if one has grid with subgrids it's very easy to receive id duplicates which not allowed in all versions of HTML or XHTML.

另一个潜在的问题是使用数字作为id值.大多数数据库都支持自动增量数据类型，这作为表的关键非常实用.在这种情况下，数据库表和网格行的本机id(键)将是整数.另一方面，还有一些其他限制取决于使用的HTML/XHTML版本.例如，HTML5规范说(请参见此处)

Additional potential problem is the usage of numbers as id values. The most databases support auto-incremental datatype which is very practical as the key of the tables. In the case the native id (the key) for the database table and for the grid rows will be integer numbers. On the other side there are some additional restrictions depend on the version of HTML/XHTML which one uses. For example HTML5 specification says (see here)

该值在元素主目录中的所有ID中必须是唯一的 子树和必须至少包含一个字符.该值不能 包含任何空格字符.

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

因此，即使大多数网络浏览器都允许使用数字作为id属性的值，但不允许这样做，并且在使用此属性时可能会出现兼容性问题.

So even though the most web browsers allows to use numbers as the values of id attribute it's not permitted and one can get compatibility problems in case of usage of this.

为解决上述所有问题，jqGrid支持idPrefix选项(这是根据我的建议引入的).在这种情况下，id属性的值将根据输入数据构建为idPrefix和id的叠加.例如，在示例jqGrid的主网格中使用的idPrefix: "s_"和id值"1"，"2"，"3"的情况下，会将"s_1"，"s_2"，"s_3"分配为"s_1"主网格的<tr>元素的c6>属性.所有回调的rowid将是id属性("s_1"，"s_2"，"s_3")的值.如果需要获取原始 id，则可以使用$.jgrid.stripPref去除前缀.通过jqGrid自身将规范化(将调用$.jgrid.stripPref)所有将由jqGrid发送到服务器的ID.

To solve all the described above problem jqGrid supports idPrefix options (which was introduced by the way based on my suggestion). In the case the value of id attribute will be build as concatination of idPrefix and the id from the input data. For example in case of idPrefix: "s_" and id values "1", "2", "3" used in the main grid of the example jqGrid will assign "s_1", "s_2", "s_3" as values of id attribute of <tr> elements of the main grid. The rowid of all callbacks will be the value from id attribute ("s_1", "s_2", "s_3"). If you need get the original id you can use $.jgrid.stripPref to strip the prefix. All ids which will be sent to the server by jqGrid will be normalized ($.jgrid.stripPref will be called) by jqGrid itself.

因此，显示如何获取数据onSelectRow和ondblClickRow的代码可能如下所示

So the code which shows how to get data onSelectRow and ondblClickRow could be the following

onSelectRow: function (rowid, stat, e) {
    myDebugTrace.call(this, "onSelectRow", rowid);
},
ondblClickRow: function (rowid, iRow, iCol, e) {
    myDebugTrace.call(this, "ondblClickRow", rowid);
    e.stopPropagation();
},
...

其中myDebugTrace函数可以声明为

var myDebugTrace = function (startingText, rowid) {
        var $this = $(this), p = $this.jqGrid("getGridParam"), rowData, col1,
            firstCol = (p.rownumbers ? 1 : 0) + (p.subGrid ? 1 : 0);

        rowData = $this.jqGrid("getRowData", rowid);
        col1 = rowData[p.colModel[firstCol].name];
        $("<span>" + startingText + " on " + rowid + " (original id=" +
            $.jgrid.stripPref($(this).jqGrid("getGridParam", "idPrefix"), rowid) +
            "). Data from the first column: \"" + col1 +"\"</span><br/>").appendTo("body");
    };

相应的演示双击显示以下内容内部子网格中的行.

The corresponding demo display the following on double-click on the row from the internal subgrid.

这篇关于jqGrid:从层次结构网格中单击的行中获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！