jqGrid: Получите данные из ряда, по которому щелкнули в иерархической сетке

Я в настоящее время работаю над проектом, который использует jqGrid с многократными подсетками. Я пытаюсь получить rowid (и достигать данные в ряду), когда по ряду щелкают или дважды щелкают. В конечном счете я хотел бы заполнить текстовое окно данными из ряда, по которому щелкают.

Я попробовал несколько изменений, используя ondblClickRow и onSelectRow примеров на здесь, но wans't способный получить его работа. Я думаю, что пропускаю что-то действительно простое, но не вижу что. Таким образом, я возвратился и упростил его вниз как можно больше, чтобы просто признать, что ряд щелкает и показывает тревогу. Это не будет работать на меня также.

(на основе примера в jqGrid: погрузка проблемы вложенная sub сетка с местным типом данных) Ищите//*************** часть около основания..

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)
}));

У кого-либо есть какие-либо идеи, почему это не признает щелчок/двойной щелчок ряда?

0
nl ja de
Необходимо включать больше кода, который показывает, как определяются jqGrid. Кодекс, который вы опубликовали don' t содержат ценность тип данных выбор, который вы используете. Сделайте вы используете loadonce: верный или нет? Как вы заполняете данные о сетке? Типичная ошибка состоит в том, что <у кода>, id сетки будет неправильно заполнен или данные, нет никакого id информация вообще. Кроме того, вы написали о заполнении некоторого "текстового окна". Что вы имеете в виду? Вы используете редактирование сетки? Какой режим редактирования и как вы используете?
добавлено автор Oleg, источник
I' ve отредактировал почту к включенному код от вашего оригинального поста (мой код подобен). I' m использование Местного типа данных, я don' t используют loadonce:true. I' m заполнение данных о сетке, звоня методу бэкенда, чтобы получить json данные внезапно, когда страница загружает. Текстовым окном я просто имею в виду элемент ввода HTML type=text (вероятно, должен был упустить это из почты, не важной). id' s, кажется, правильны для моих произведенных данных. Я don' t используют редактирование сетки. Спасибо за вашу помощь.
добавлено автор Jon L, источник

1 ответы

Вы написали в комментарии, что вы получаете данные для сетки от сервера. Я предполагаю что использование тип данных: "местный" в случае не лучший выбор. Посмотрите на ответ где я описал путь, как сделать, то же самое, но использующий тип данных: "json" .

Теперь я возвращаюсь к вашему главному вопросу. Я не понимаю, какое текстовое окно (элемент ввода HTML) вы хотите заполнить и является ли входной элемент в сетке или за пределами него. Тем не менее, единственной проблемой, которую вы могли, вероятно, иметь, является правильное использование idPrefix выбор jqGrid.

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.

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)

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.

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.

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.

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();
},
...

where myDebugTrace function can be declared as

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];
        $("" + startingText + " on " + rowid + " (original id=" +
            $.jgrid.stripPref($(this).jqGrid("getGridParam", "idPrefix"), rowid) +
            "). Data from the first column: \"" + col1 +"\"
").appendTo("body"); };

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

enter image description here

3
добавлено
@JonL: пожалуйста!
добавлено автор Oleg, источник
Проблемы, которые я имел с OnSelectRow, были моей ошибкой и имели отношение к кэшированию моего js. В конце я должен был заставить выравнивать родительский идентификатор столбца, нажимая на любые sub ряды сетки. Функция отладки действительно упростила получение там. Спасибо Олег!
добавлено автор Jon L, источник