0

使用 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 的行 - 这些行应在每一行上显示下拉框。= 3的行pID应该显示一个submit按钮。= 1 不应该在第pID3 列中显示任何内容。以下是我的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 示例都涉及编辑数据，而我没有这样做。我相信我在自定义格式化程序中做错了，但我不知道是什么。我将不胜感激有关如何解决此问题或我如何错误地解决此问题的任何帮助或建议。

谢谢！

4

1 回答 1

0

我最终解决了我自己的问题，最终弄清楚自定义格式化程序及其所做的事情没有任何问题。我重组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打开（我用它来停止一个间隔，为了简单起见，这里省略了）然后会在单击按钮或下拉菜单进行选择时捕获。

上面的代码能够做到这一点。

于 2013-07-02T13:25:29.560 回答