jqGrid - 每行中的绑定下拉列表或按钮

Question

使用 jqGrid 4.5.2 并尝试根据需要放置下拉框或按钮（取决于行数据中的值）。我将下拉框的内容存储在页面中的变量中并在自定义格式化程序中分配它。下拉框如下：

<select id="rlist" class="choices" name="rlist">
<option value="0" disabled="disabled" selected="selected">Select Message</option>
<option value="7">Message2</option>
<option value="8">Message3</option>
<option value="9">Message4</option>
<option value="10">Message5</option>
</select>

按钮的代码是：

"<input name='reviewedBtn' class='cbox' style='height:90%;width:60%' type='submit' value='Reviewed' />";

我正在以XML 格式检索以下数据并将其显示在 jqGrid 中。

<Rowset>
<Row>
<msgTxt>Test Message3</msgTxt>
<SendTime>2013-06-18T15:05:59</SendTime>
<pID>4</pID>
</Row>
<Row>
<msgTxt>Test Message2</msgTxt>
<SendTime>2013-06-18T13:01:46</SendTime>
<pID>4</pID>
</Row>
<Row>
<msgTxt>Test Message1</msgTxt>
<SendTime>2013-06-18T09:22:49</SendTime>
<pID>3</pID>
</Row>
<Row>
<msgTxt>Test Message0</msgTxt>
<SendTime>2013-06-18T08:59:38</SendTime>
<pID>1</pID>
</Row>
</Rowset>

jqGrid 本身将只显示字段msgTxt 和SendTime（pID 是隐藏字段）。网格中将有第三列，用于下拉/提交按钮。对于 pID = 4 的行 - 这些行应在每一行上显示下拉框。 pID = 3 的行应该显示一个submit 按钮。 pID = 1 在第 3 列中不应显示任何内容。以下是我的 colModel 的简化版本。

colModel:[
    {name:"SendTime",index:"SendTime",width:col1width,align:"center",formatter:"date",formatoptions: {"srcformat":"ISO8601Long", "newformat":"Y-m-d H:i:s"},xmlmap:"Rowset>Row>SendTime",sortable:false},
    {name:"msgTxt",index:"msgTxt",width:col2width,align:"left",xmlmap:"Rowset>Row>msgTxt",sortable:false},
    {name:"action",
        width:col3width,
        align:"center",
        title:false,
        formatter: function(cellvalue, options, rowObject) {
                var pri = $(rowObject).find("pID").text();
                if (pri === "4") {
                    return msgSelect;
                    }
                if (pri === "3") {
                    return "<input name='reviewedBtn' class='cbox' style='height:90%;width:60%' type='submit' value='Reviewed' />";
                    }
                else {
                    return ""
                    }
                }
        },
    {name:"pID",index:"pID",width:col4width,align:"left",xmlmap:"Rowset>Row>pID",sortable:false, hidden:true}
    ],

我的beforeSelectRow 中有以下代码来捕获下拉框的打开和更改。

beforeSelectRow: function(id, e) {
    var $self = $("#myGrid");
    var $td = $(e.target).closest("td");
    var iCol = $.jgrid.getCellIndex($td[0]);
    var name = $(e.target).attr("name");
    if (this.p.colModel[iCol].name === "action") {
        if (name === "rlist") {
            selected = $(this).val();
            console.log("responselist open);
        $("#rlist").change(function(){
                var ritem = $(this[this.selectedIndex]).val();
                var ritemtext = $(this[this.selectedIndex]).text();
                console.log("response list changed " + ritemtext +  "   id = " + id);

                return false;
                });// response list changed
            return false;
        } // if rlist
        if (name === "reviewedBtn") {
            console.log("reviewedBtn clicked");
            return false;
            } // if reviewedBtn selected
    } // if Action Column
    return false;
}, // beforeSelectRow

在上面的数据示例中，对于 第 1 行，下拉菜单正常运行 - 我检测到下拉菜单的打开和更改。但是，如果我在 第 2 行 上打开下拉菜单，它会检测到下拉菜单的打开，但一旦做出选择，就不会检测到下拉菜单中的更改事件。 （注意：我删除了一些刷新网格的代码以简化我发布的代码。但是，我有 console.log 语句的地方是我跟踪应该发生的事情的地方）。

到目前为止，我看到的所有 jqGrid 示例都涉及编辑数据，而我没有这样做。我相信我在自定义格式化程序中做错了什么，但我不知道是什么。我将不胜感激有关如何解决此问题或我如何错误地解决此问题的任何帮助或建议。

谢谢！

Answer 1

我最终解决了我自己的问题，最终弄清楚自定义格式化程序及其所做的事情没有任何问题。我将beforeSelectRow 重组如下：

beforeSelectRow: function(id, e) {
    var $self = $("#myGrid");
    var $td = $(e.target).closest("td");
    var iCol = $.jgrid.getCellIndex($td[0]);
    var name = $(e.target).attr("name");

    if (name === "reviewedBtn") {
       console.log("reviewedBtn clicked");
       return false;
       } // if reviewedBtn selected

    if (($(e.target).val() !== null) && ($(e.target).val() !== "Reviewed")) {
    var ritem = $(e.target).val();
    var ritemtext = $(e.target).text(); 
    console.log("response list changed " + ritemtext +  "   id = " + id);   
    return false;
       }    


    if (this.p.colModel[iCol].name === "action") {
        if (name === "rlist") {
            selected = $(this).val();
            console.log("responselist open);
            return false;
        } // if rlist
    } // if Action Column
    return false;
}, // beforeSelectRow

我需要确定responselist 何时打开（我用它来停止一个间隔，为了简单起见，这里省略了）然后会在单击按钮或下拉菜单进行选择时捕获。

上面的代码可以做到这一点。