Добавление пользовательской кнопки в строке в jqGrid?
Я хочу сделать простую таблицу, которая содержит пользовательские кнопки в строке. Когда кнопка нажата, я хочу всплыть «предупреждение» коробка. Я прочитал несколько сообщений на эту тему, например: эта почта а также этот другой пости я не понимаю, почему мой код не работает. Кнопки нарисованы, но нажатие на них не имеет никакого эффекта.
У меня есть три попытки, описанные здесь.
Версия 1. Нажатие кнопки никогда не срабатывает:
$(document).ready(function(){
jQuery("#simpletable").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status}
],
data:[
{'A':2,'B':100,'status':"<button onclick=\"jQuery('#simpletable').saveRow('1', function(){alert('you are in')});\" >in</button>"},
{'A':1,'B':200,'status':"<button onclick=\"jQuery('#simpletable').saveRow('2', function(){alert('you are in')});\" >in</button>"},
],
caption: "Demo of Custom Clickable Button in Row",
viewrecords:true,
editurl:'clientArray',
});
});
HTML-код:
<table id="simpletable"></table>
РЕДАКТИРОВАТЬ 2/2/12 - я узнал некоторые вещи с момента моего первоначального поста, и здесь я опишу еще две попытки.
Версия 2: я использую onCellSelect. Это работает, но это не позволило бы мне поместить более одной кнопки в ячейку. Кроме того, я сделал код лучше, используя опцию формата, предложенную одним из комментариев к этому посту.
function status_button_maker_v2(cellvalue, options, rowObject){
return "<button class=\"ver2_statusbutton\">"+cellvalue+"</button>"
};
jQuery("#simpletablev2").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v2}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
onCellSelect:function(rowid,icol,cellcontent,e){
if (icol==2){
alert('My value in column A is: '+$("#simpletablev2").getRowData(rowid)['A']);
}else{
return true;
}
},
caption: "Demo of Custom Clickable Button in Row, ver 2",
viewrecords:true,
}); //end simpletablev2
Разметка:
<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>
Версия 3: я пытался использовать решение длясообщение w4ik, используя & quot; .on & quot; вместо устаревшего ".live". Это вызывает срабатывание нажатия кнопки, но я не знаю, как извлечь rowid. w4ik также боролся с этим, и он написал, что решил, но не так, как он это сделал. Я могу выбрать последнюю выбранную строку, но это всегда будет относиться к предыдущей выбранной строке, потому что кнопка имеет приоритет.
Я бы предпочел это решение, если бы смог заставить его работать.
jQuery("#simpletablev3").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v3}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
caption: "Demo of Custom Clickable Button in Row, ver 3",
viewrecords:true,
onSelectRow: function(){},
gridComplete: function(){}
}); //end simpletablev3
$(".ver3_statusbutton").on(
{
click: function(){
//how to get the row id? the following does not work
//var rowid = $("#simpletablev3").attr('rowid');
//
//it also does not work to get the selected row
// this is always one click behind:
//$("#simpletablev3").trigger("reloadGrid");
rowid = $("#simpletablev3").getGridParam('selrow');
alert("button pushed! rowid = "+rowid);
}
});
Разметка:
<style>.ver3_statusbutton { color:red;} </style>
<h3>simple table, ver 3:</h3>
<table id="simpletablev3"></table>
Таким образом, я борюсь с проблемой нажатия моей кнопки.at the right time, В версии 1 строка выбирается, а кнопка никогда не нажимается. Версия 2 не использует кнопку & quot; вообще - он просто обрабатывает щелчок ячейки. Verion 3 получает нажатие кнопки до выбора строки (неправильный порядок).
Любая помощь будет оценена!