HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

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>