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

您可以通过多种方式实现您的要求。我建议使用我在the answer中描述的方式。它使用unobtrusive JavaScript样式。此外，因为你使用带有addRowData值的i+1，我怀疑你在循环中填充网格，这对于大量行来说可能非常慢。最好的方法是使用jqGrid的data参数

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

你可以看到的实验here。

从JQgrid按钮获取行数据

1 个答案: