jqGrid セル中リンクを表示するサンプル
jqGrid のセルにリンクを表示してクリックで表示させるためにはちょっと工夫が必要です。
カスタムフォーマットでアンカータグの onclick で url を表示させると実現できます。
コード
var mydata = [
{ id: "1", name: "Yahoo", url: "http://www.yahoo.co.jp", note: "メモ1" },
{ id: "2", name: "Google", url: "http://www.google.co.jp", note: "メモ2" },
{ id: "3", name: "Bing", url: "http://www.bing.com", note: "メモ3" },
{ id: "4", name: "HARD DAY'S NIGHT別館", url: "http://www.livesamples.net/samples/", note: "メモ4" }
];
function showLink(url) {
// window.open(url); などで url を開く
alert(url);
}
function linkFormatter(cellvalue, options, rowdata) {
var val = "<a href=\"javascript:void(0);\" onclick=\"showLink('" + cellvalue + "');\">" + cellvalue + "</a>";
return val;
}
$(document).ready(function () {
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: 'auto',
width: 'auto',
colModel: [
{ label: 'No', name: 'id', width: 60, key:true },
{ label: '名称', name: 'name', width: 140 },
{ label: 'URL', name: 'url', formatter: linkFormatter, width: 200 },
{ label: '備考', name: 'note', width: 200 }
],
viewrecords: true, // ページ、件数をツールバー上に表示
pager: "#statusbar",
caption: "jqGrid セル中のリンク表示 サンプル"
});
});
HTMLコード
<table id="list">
</table>
<div id="statusbar">
</div>