作成日: 2014/03/10 最終更新日: 2014/03/10
文書種別
使用方法
詳細
WijGridのcolumns にbuttonType オプションを指定することで、対象列のセルをボタンにすることができます。この時cellStyleFormatter を利用して各行のテキストを動的に変更することができます。

サンプルはこちら
◎サンプルコード
Wijmo専用サイト
WijGridのサンプル

サンプルはこちら
◎サンプルコード
<script type="text/javascript">
$(document).ready(function () {
$("#TestGrid").wijgrid({
data: getData(), // テストデータ生成
columnsAutogenerationMode: "none",
selectionMode: "none",
highlightOnHover: false,
columns: [
{dataKey: "Id", headerText: "ID", dataType: "number", dataFormatString: "d"},
{dataKey: "type", headerText: "分類", dataType: "string"},
{dataKey: "title", headerText: "タイトル", buttonType: "link",
command: {
click: onDetailCommandClick,
text: "詳細", // 動的に変更されるテキスト
},
},
{dataKey: "description", headerText: "解説", dataType: "string"}
],
cellStyleFormatter: function (args) {
if (args.row.type & wijmo.grid.rowType.data) {
// 対象列を特定
if (args.column.headerText == "タイトル")
// リンクのテキストを編集
$(args.$cell).find("a").text(args.row.data.title)
}
}
});
// リンククリックイベント
function onDetailCommandClick(e,args) {
var url = args.row.data.url;
window.open(url,"_blank", "WindowName","width=600,height=500,resizable=yes,scrollbars=yes");
}
function getData() {
var data = [
{"Id":1,"type":"HTML5","title":"HTML5 Hello HTML5!!! - HTML5入門","description":"HTML5とは?~概要解説","url":"http://techbooster.org/html5/8602/"},
{"Id":2,"type":"HTML5","title":"今からハジメるHTML5マークアップ","description":"マークアップ書き方","url":"http://www.slideshare.net/swapskills/futomi"},
{"Id":3,"type":"JavaScript","title":"型とかオブジェクトとか基本的なことを理解する - あと味","description":"「オブジェクト」、「型」の基本","url":"http://taiju.hatenablog.com/entry/20110416/1302939377"},
{"Id":4,"type":"JavaScript","title":"JavaScript 「再」入門","description":"「オブジェクト」、「型」の基本","url":"https://developer.mozilla.org/ja/docs/JavaScript/A_re-introduction_to_JavaScript"},
{"Id":5,"type":"JavaScript","title":"{JavaScript} 猿でもわかるクロージャ超入門","description":"クロージャの解説","url":"http://dqn.sakusakutto.jp/2009/01/javascript.html"},
{"Id":6,"type":"JavaScript","title":"ノンプログラマーのためのjQuery入門","description":"jQueryの紹介、メリットから記述方法、jQueryのコアとなるメソッドの説明","url":"http://www.slideshare.net/hayatomizuno/jquery-7665168"},
{"Id":7,"type":"JavaScript","title":"Knockout 日本語ドキュメント","description":"Knockout 非公式日本語ドキュメント","url":"http://kojs.sukobuto.com/"},
{"Id":8,"type":"JavaScript","title":"Angular.js の紹介","description":"Angular.jsの簡単な解説","url":"http://blog.livedoor.jp/kotesaki/archives/1738808.html"},
{"Id":9,"type":"JavaScript","title":"AngularJS入門 ","description":"使い方の基礎を解説(全12回)","url":"http://dotinstall.com/lessons/basic_angularjs"},
{"Id":10,"type":"JavaScript","title":"Chromeでjavascriptデバッグ!まず半歩♪","description":"Chromeのデバッグツール詳細解説","url":"http://www.slideshare.net/yuka2py/chromejavascript"}
];
return data;
}
});
</script>
$(document).ready(function () {
$("#TestGrid").wijgrid({
data: getData(), // テストデータ生成
columnsAutogenerationMode: "none",
selectionMode: "none",
highlightOnHover: false,
columns: [
{dataKey: "Id", headerText: "ID", dataType: "number", dataFormatString: "d"},
{dataKey: "type", headerText: "分類", dataType: "string"},
{dataKey: "title", headerText: "タイトル", buttonType: "link",
command: {
click: onDetailCommandClick,
text: "詳細", // 動的に変更されるテキスト
},
},
{dataKey: "description", headerText: "解説", dataType: "string"}
],
cellStyleFormatter: function (args) {
if (args.row.type & wijmo.grid.rowType.data) {
// 対象列を特定
if (args.column.headerText == "タイトル")
// リンクのテキストを編集
$(args.$cell).find("a").text(args.row.data.title)
}
}
});
// リンククリックイベント
function onDetailCommandClick(e,args) {
var url = args.row.data.url;
window.open(url,"_blank", "WindowName","width=600,height=500,resizable=yes,scrollbars=yes");
}
function getData() {
var data = [
{"Id":1,"type":"HTML5","title":"HTML5 Hello HTML5!!! - HTML5入門","description":"HTML5とは?~概要解説","url":"http://techbooster.org/html5/8602/"},
{"Id":2,"type":"HTML5","title":"今からハジメるHTML5マークアップ","description":"マークアップ書き方","url":"http://www.slideshare.net/swapskills/futomi"},
{"Id":3,"type":"JavaScript","title":"型とかオブジェクトとか基本的なことを理解する - あと味","description":"「オブジェクト」、「型」の基本","url":"http://taiju.hatenablog.com/entry/20110416/1302939377"},
{"Id":4,"type":"JavaScript","title":"JavaScript 「再」入門","description":"「オブジェクト」、「型」の基本","url":"https://developer.mozilla.org/ja/docs/JavaScript/A_re-introduction_to_JavaScript"},
{"Id":5,"type":"JavaScript","title":"{JavaScript} 猿でもわかるクロージャ超入門","description":"クロージャの解説","url":"http://dqn.sakusakutto.jp/2009/01/javascript.html"},
{"Id":6,"type":"JavaScript","title":"ノンプログラマーのためのjQuery入門","description":"jQueryの紹介、メリットから記述方法、jQueryのコアとなるメソッドの説明","url":"http://www.slideshare.net/hayatomizuno/jquery-7665168"},
{"Id":7,"type":"JavaScript","title":"Knockout 日本語ドキュメント","description":"Knockout 非公式日本語ドキュメント","url":"http://kojs.sukobuto.com/"},
{"Id":8,"type":"JavaScript","title":"Angular.js の紹介","description":"Angular.jsの簡単な解説","url":"http://blog.livedoor.jp/kotesaki/archives/1738808.html"},
{"Id":9,"type":"JavaScript","title":"AngularJS入門 ","description":"使い方の基礎を解説(全12回)","url":"http://dotinstall.com/lessons/basic_angularjs"},
{"Id":10,"type":"JavaScript","title":"Chromeでjavascriptデバッグ!まず半歩♪","description":"Chromeのデバッグツール詳細解説","url":"http://www.slideshare.net/yuka2py/chromejavascript"}
];
return data;
}
});
</script>
Wijmo専用サイト
WijGridのサンプル
旧文書番号
80731