我有一个jqGrid,其中一个列我必须显示项目的Drop-down并允许多个条目(考虑Token-box)。目前,令牌盒仅出现在一行中,但我想要它用于所有记录。
$(document).ready(function() {
createCSDGrid();
})
function createCSDGrid() {
var lastsel
$('#Grid').jqGrid({
url: CSDDataUrl,
datatype: "json",
mtype: 'GET',
colNames: ['ID', 'A', 'B', 'C', 'D', 'E'],
colModel: [
{
name: 'ID',
index: 'ID',
hidden: true,
editable: true
}, {
name: 'a',
index: 'a'
}, {
name: 'b',
index: 'b'
}, {
name: 'c',
index: 'c',
editable: true,
editoptions: {
dataEvents: [{
type: 'blur',
fn: function(e) {
try {
$('#grid').jqGrid('editCell', 4, false);
} catch (e) {
//Do nothing}
}
}
}]
}
}, {
name: 'd',
index: 'd',
editable: true,
formatter: function(cellValue, options, cellObject) {
var id = options.rowId;
return "</p><input type='text' id='tokeninput-demo'/></p>";
},
editoptions: {
dataEvents: [{
type: 'blur',
fn: function(e) {
try {
$('#grid').jqGrid('editCell', 5, false);
} catch (e) {
//Do nothing}
}
}
}],
}
}, {
name: 'e',
index: 'e',
editable: true,
editoptions: {
dataEvents: [{
type: 'blur',
fn: function(e) {
try {
$('#grid').jqGrid('editCell', 6, false);
} catch (e) {
//Do nothing}
}
}
}]
}
}
],
toolbarfilter: true,
scrollrows: true,
rowNum: 100,
rownumbers: true,
pager: '#jqGridPager',
'cellEdit': true,
'cellsubmit': 'clientArray',
//editurl: addNewRowUrl,
loadonce: true,
recordtext: "Record Count: {1}",
sortable: true,
pgbuttons: false,
pgtext: null,
jsonReader: {
repeatitems: false
},
viewrecords: true,
rownumWidth: '50px',
width: $('#Grid').width(),
loadComplete: function() {
$("#tokeninput-demo").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", {
theme: "facebook"
});
});
}
我怎样才能做到这一点?
答案 0 :(得分:1)
您的代码中存在两个问题: 1)在格式化程序中,相同的id =&#34; tokeninput-demo&#34;被分配给每个列单元格。
formatter: function(cellValue, options, cellObject) {
var id = options.rowId;
return "</p><input type='text' id='tokeninput-demo'/></p>";
},
2)在加载完成后,您正在访问$(&#34; #dokeninput-demo&#34;) - &gt;因为所有单元格都具有相同的id,所以它仅在第一个单元格中绑定令牌输入。
loadComplete: function() {
$("#tokeninput-demo").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", {
theme: "facebook"
});
});
<强>解决方案:强>
1)为格式化程序中的每个单元格分配递增的id(唯一ID) 例如:
formatter: function(cellValue, options, cellObject) {
var count = options.rowId;
return "</p><input type='text' id='tokeninput-demo'+count/></p>";
},
2)在加载完成时,使用循环访问每个单元格并绑定令牌 例如:
loadComplete: function() {
for(int count=0; count<rowCount; count++)`enter code here`
{
$("#tokeninput-demo+'count'+").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", {
theme: "facebook"
});
}
});