jqGrid セル中リンクを表示するサンプル

jqGrid のセルにリンクを表示してクリックで表示させるためにはちょっと工夫が必要です。
カスタムフォーマットでアンカータグの onclick で url を表示させると実現できます。

コード

var mydata = [
       { id: "1", name: "Yahoo", url: "http://www.yahoo.co.jp", note: "メモ１" },
       { id: "2", name: "Google", url: "http://www.google.co.jp", note: "メモ２" },
       { id: "3", name: "Bing", url: "http://www.bing.com", note: "メモ３" },
       { id: "4", name: "HARD DAY'S NIGHT別館", url: "http://www.livesamples.net/samples/", note: "メモ４" }
];


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>