かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

Spring Boot Java

ハイパーリンクの列を作りたい！ということもあります。そんな時には、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>