Получить данные строки из кнопки JQgrid

Question

Вот как я заполняю JQgrid:

jQuery("#responseMessages").jqGrid(
                                   'addRowData',
                                   i+1,
                                   {
                                    distance:messages[i].distance,
                                    age:messages[i].age,
                                    message:messages[i].message,
                                    messageId:messages[i].messageId, 
                                    report:reportBtn
                                   }
                                  );

Теперь reportBtn на самом деле является HTML-разметкой, поэтому он помещает кнопку в последний столбец, позволяя пользователю сообщить о сообщении, вот разметка для этого:

var reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' onclick=\"\" />";

Когда я нажимаю отчет, я хочу, чтобы он выдавал мне messageId из строки, в которой он находится (messageId - скрытый столбец).

Как мне это сделать?

Спасибо!

РЕДАКТИРОВАТЬ:

function GetMessages()
        {
            $.ajax(
            {
                type: "POST",
                url: "<%= Url.Action("GetMessages", "Home") %>",
                success: function (result) {
                    var messages = result;
                    if (messages.length == 0)
                    {
                        $('#noMessagesAlert').show();
                    }
                    else
                    {
                        $('#noMessagesAlert').hide();
                        createGrid(messages);
                    }
                },
                error: function (error) {

                }
            });
        }

function createGrid(messages)
        {
            var myGrid = 
                jQuery("#responseMessages"),
                reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' />",
                mydata = messages,
                getColumnIndexByName = function(grid,columnName) {
                    var cm = grid.jqGrid('getGridParam','colModel');
                    for (var i=0,l=cm.length; i<l; i++) {
                        if (cm[i].name===columnName) {
                            return i; // return the index
                        }
                    }
                    return -1;
            };

            myGrid.jqGrid({
                data: mydata,
                datatype: 'local',
                height: 'auto',
                colModel: [
                    { name:'distance', index:'distance', label:'Distance', width:100 },
                    { name:'age', index:'age', label:'Age', width:75 },
                    { name:'message', index:'message', label:'Message', width:500 },
                    { name:'messageId', index:'messageId', key:true, hidden:true },
                    { name:'report', index:'report', label: 'Report', width:100,
                        formatter:function() { return reportBtn; } }
                ],
                loadComplete: function() {
                    var i=getColumnIndexByName(myGrid,'report');
                    // nth-child need 1-based index so we use (i+1) below
                    $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",myGrid[0]).click(function(e) {
                        var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow");
                        var x=window.confirm("Are you sure you want to report this message?")
                        if (x)
                        {
                            reportMessage(tr[0].id);
                        }
                        e.preventDefault();
                    });
                },
                rowNum:25, 
                rowList:[10,25,50],
                pager: '#pager'
            });
        }

Итак, вот путь кода.GetMessages вызывается с помощью нажатия кнопки, а затем, если он что-либо возвращает, createGrid вызывается, передавая возвращенный список сообщений.

Это отлично работает, когда я это делаю в первый раз.Теперь, если я просто пойду и нажму ту же кнопку еще раз, сетка не обновит свои данные (которые должны отличаться, потому что разные данные возвращаются с сервера).Он остается неизменным.

Почему?

Answer 1

Вы можете реализовать свои требования разными способами. Я предлагаю использовать, чтобы использовать способ, который я описал в ответ . Он использует ненавязчивый стиль JavaScript . Более того, поскольку вы используете addRowData со значением i+1, я подозреваю, что вы заполняете сетку в цикле, которая может быть очень медленной при большом количестве строк. Лучше всего использовать data параметр jqGrid

var myGrid = jQuery("#list"),
    reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' />",
    mydata = [
        {messageId:"m10", message:"Bla bla", age:2, distance:123},
        {messageId:"m20", message:"Ha Ha",   age:3, distance:456},
        {messageId:"m30", message:"Uhhh",    age:2, distance:789},
        {messageId:"m40", message:"Wauhhh",  age:1, distance:012}
    ],
    getColumnIndexByName = function(grid,columnName) {
        var cm = grid.jqGrid('getGridParam','colModel');
        for (var i=0,l=cm.length; i<l; i++) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

myGrid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'report', index:'report', width:108,
          formatter:function() { return reportBtn; } },
        { name:'messageId', index:'messageId', key:true, width:50, hidden:true },
        { name:'age', index:'age', label:'Age', width:50, sorttype:'int', align:'center' },
        { name:'message', index:'message', label:'Message', width:110 },
        { name:'distance', index:'distance', label:'Distance', width:80, sorttype:'int', align:'center' }
    ],
    sortname: 'age',
    sortorder: "desc",
    loadComplete: function() {
        var i=getColumnIndexByName(myGrid,'report');
        // nth-child need 1-based index so we use (i+1) below
        $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",myGrid[0]).click(function(e) {
            var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow");
            alert("clicked the row with the messageId='"+tr[0].id+"'");
            e.preventDefault();
        });
    },
    viewrecords: true,
    rownumbers: true,
    //multiselect:true,
    height: "100%",
    pager: '#pager',
    caption: "How to create Unobtrusive button"
});

демо, которое вы можете увидеть вживую здесь .