カスタムボタンを一列に並べたシンプルなテーブルを作りたい。ボタンを押すと、「アラート」ボックスが表示されます。私はこれに関するいくつかの投稿を読みました。たとえば、 この投稿 と この他の投稿ですが、コードが機能しない理由がわかりません。ボタンは描画されますが、押しても効果はありません。
ここで説明する3つの試みがあります。
バージョン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>
編集8/2/12-最初の投稿からいくつかのことを学びました。ここでは、さらに2つの試みについて説明します。
バージョン2：onCellSelectを使用しています。これは機能しますが、セルに複数のボタンを配置することはできません。さらに、この投稿へのコメントの1つで提案されているフォーマットオプションを使用して、コードをより適切に作成しました。
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：非推奨の「.live」の代わりに「.on」を使用して、w4ikの投稿のソリューションを使用しようとしました。これによりボタンクリックが発生しますが、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>
要約すると、適切なタイミングでボタンを押すという問題に苦労しています。バージョン1では、行が選択され、ボタンが押されることはありません。バージョン2は、「ボタン」をまったく使用しません。セルのクリックを処理するだけです。Verion 3は、行を選択する前にボタンをクリックします（順序が間違っています）。
どんな助けでもいただければ幸いです！