読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

Spring BootでigGridを使ってハイパーリンクの列を作りたい

ハイパーリンクの列を作りたい!ということもあります。そんな時には、igGridの列の定義にunbound: true, template: "ここにリンクのHTML"という感じの追加してやります。

igGridのサンプル的には以下のようにやります。

jp.igniteui.com

上記サンプルはボタンですが、ハイパーリンクにするにはaタグにしてあげればOKです。以下のような感じ。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>

<script type="text/javascript" src="/js/modernizr.js"
    th:src="@{/js/modernizr.js}"></script>
<script type="text/javascript" src="/js/jquery.min.js"
    th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"
    th:src="@{/js/jquery-ui.min.js}"></script>

<script type="text/javascript" src="/js/infragistics.loader.js"
    th:src="@{/js/infragistics.loader.js}"></script>

<link rel="stylesheet" type="text/css" href="/css/main.css"
    th:href="@{/css/main.css}"></link>

</head>
<body>
    <button id="button">save</button>
    <table id="grid"></table>

    <script type="text/javascript" th:inline="javascript">
       /*<![CDATA[*/
       $.ig.loader({
           scriptPath : /*[[@{/js}]]*/"/js",
           cssPath : /*[[@{/css}]]*/"/css",
           resources : "igGrid.*",
           ready : function() {
               $("#button").click(function() {
                   $("#grid").igGrid("saveChanges", function() {
                       $("#grid").igGrid("commit");
                   }, function(e) {
                       console.log(e);
                   });
               });

               $("#grid").igGrid({
                   primaryKey : "id",
                   dataSource : /*[[@{/api/people}]]*/"/people",
                   autoGenerateColumns : false,
                   columns : [ {
                       key : "id",
                       headerText : "ID",
                       dataType : "number",
                       hidden : true
                   }, {
                       key : "name",
                       headerText : "名前",
                       dataType : "string"
                   }, {
                       key : "age",
                       headerText : "年齢",
                       dataType : "number"
                   }, {
                       key : "nav",
                       headerText : "",
                       unbound : true,
                       template : "<a href=[[@{/index/${id}}]] >${id}</a>"
                   } ]
               });
           }
       });
       /*]]>*/
   </script>
</body>
</html>