使用 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 不应该在第pID
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 示例都涉及编辑数据,而我没有这样做。我相信我在自定义格式化程序中做错了,但我不知道是什么。我将不胜感激有关如何解决此问题或我如何错误地解决此问题的任何帮助或建议。
谢谢!