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

かずきのBlog@hatena

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

Spring BootでIgniteUIを使ってみる その2

okazuki.hatenablog.com

上記記事では、REST APIを呼び出してigGridにバインドしてました。今回はJSONをHTMLに埋め込む形でやってみようと思います。

こんな感じにModelに適当にListを突っ込みます。

package okazuki.igniteui.controllers;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/")
public class IgniteUIController {
    @RequestMapping
    public String igniteUI(Model model) {
        List<Person> result = new ArrayList<Person>();
        for (int i = 0; i < 100; i++) {
            result.add(new Person("tanaka" + i, i));
        }
        model.addAttribute("people", result);
        return "igniteui";
    }
}

あとはJavaScriptで/${people}/で埋め込むだけ。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- Ignite UI Loader JavaScript File -->
<script
    src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.loader.js"
    type="text/javascript"></script>

</head>
<body>
    <table id="grid"></table>
    
    <script type="text/javascript" th:inline="javascript">
       /*<![CDATA[ */
       $.ig.loader({
            scriptPath: "http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/",
            cssPath: "http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/",
            resources: "igGrid",
           ready: function() {
               $("#grid").igGrid({
                   dataSource: /*[[${people}]]*/[{"name": "hoge", "age": 10}],
                   columns: [
                       { key: "name", headerText: "名前", dataType: "String" },
                       { key: "age", headerText: "年齢", dataType: "Number" }
                   ]
               });
           }
       });
       /*]]>*/
   </script>
</body>
</html>

実行するとこんな感じになりました。

f:id:okazuki:20150707124057p:plain