Spring BootでIgniteUIを使ってみる - かずきのBlog@hatenaokazuki.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("/") publicclass IgniteUIController { @RequestMappingpublic 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><metacharset="UTF-8" /><title>Insert title here</title><scriptsrc="http://modernizr.com/downloads/modernizr-latest.js"></script><scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script><scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script><!-- Ignite UI Loader JavaScript File --><scriptsrc="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.loader.js"type="text/javascript"></script></head><body><tableid="grid"></table><scripttype="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>
実行するとこんな感じになりました。
