index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" href="/css/wijmo.min.css"/>
<style type="text/css">
tr.selected { background-color: #ff0000; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/js/wijmo.min.js" type="text/javascript"></script>
<script src="/js/wijmo.input.min.js" type="text/javascript"></script>
<script src="/js/wijmo.grid.min.js" type="text/javascript"></script>
<script th:inline="javascript" th:fragment="js">
/*<![CDATA[*/
$( function() {
var pos; //選択された行番号
var grid = new wijmo.grid.FlexGrid('#flexGrid');
grid.initialize({
autoGenerateColumns: false,
columns: [
{ header: '名前', binding: 'name'},
{ header: '部署', binding: 'dept' },
{ header: '年齢', binding: 'age' },
],
selectionMode : 'Row'
});
grid.itemsSource = [];
//ポップアップ画面初期化
function initPopup() {
grid.itemsSource = [];
$(":text[name='name']").val('');
$(":text[name='age']").val('');
}
$("#dialog").dialog({
autoOpen: false,
height: 500,
width: 550,
open: function( event, ui ) { //ダイアログ表示時
initPopup();
}
});
$(".search").on("click", function() {
pos = $(".search").index(this); //N番目のボタン
$(this).closest("tr").addClass("selected");
$("#dialog").dialog("open");
});
//ポップアップ戻る
$("#popupReturn").on("click", function() {
var item = grid.collectionView.currentItem;
if ( item ) { //行選択済みなら
var $tr = $("#parentTbl tr").eq(pos);
$("td", $tr).eq(1).text(item.name);
$("td", $tr).eq(2).text(item.dept);
$("td", $tr).eq(3).text(item.age);
}
$("#parentTbl tr").removeClass("selected");
$("#dialog").dialog("close");
})
//ポップアップクリア
$("#popupClear").on("click", function() {
initPopup();
});
//ポップアップ検索
$("#popupSearch").on("click", function() {
$("#errorDiv").empty();
$.ajax({
type : "GET",
url : /*[[@{/search}]]*/ "/search",
data : $("#myForm").serialize(),
dataType : "json",
cache : false,
success : function(data) {
if ( data.state === '1' ) { //error
var $errorDiv = $("#errorDiv");
$errorDiv.append("<table>");
for(var i = 0; i < data.errors.length; i++ ) {
$errorDiv.append("<tr><td>" + data.errors[i].key + "</td><td>" + data.errors[i].message + "</td></tr>");
}
$errorDiv.append("</table>");
} else { //success
grid.itemsSource = data.members;
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown.message);
},
});
});
} );
/*]]>*/
</script>
</head>
<body>
<table id="parentTbl">
<tr><td><input type="button" class="search" value="検索"/></td><td>あああ</td><td>いいい</td><td>123</td></tr>
<tr><td><input type="button" class="search" value="検索"/></td><td>かかか</td><td>いいい</td><td>223</td></tr>
<tr><td><input type="button" class="search" value="検索"/></td><td>さささ</td><td>いいい</td><td>323</td></tr>
<tr><td><input type="button" class="search" value="検索"/></td><td>たたた</td><td>いいい</td><td>423</td></tr>
<tr><td><input type="button" class="search" value="検索"/></td><td>ななな</td><td>いいい</td><td>523</td></tr>
<tr><td><input type="button" class="search" value="検索"/></td><td>ははは</td><td>いいい</td><td>623</td></tr>
</table>
<div id="dialog" title="Basic dialog">
<form method="get" th:action="@{/search}" th:object="${searchForm}" id="myForm">
<div id="errorDiv" style="color:red"></div>
<div class="col-xs-12 col-sm-12">
<div class="form-group">
<label for="name" class="control-label">名前</label>
<input type="text" name="name" id="name" placeholder="名前を入力" th:field="*{name}" />
</div>
<div class="form-group">
<label for="age" class="control-label">年齢</label>
<input type="text" name="age" id="age" placeholder="年齢を入力" th:field="*{age}" />
</div>
</div>
<div class="col-xs-12 col-sm-12 text-center">
<input id="popupSearch" class="btn btn-default" type="button" value="検索" />
<input id="popupReturn" class="btn btn-default" type="button" value="戻る" />
<input id="popupClear" class="btn btn-default" type="button" value="クリア" />
</div>
<div id="flexGrid"></div>
</form>
</div>
</body>
</html>