index.html
<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>
<script src="/js/dialog.js" type="text/javascript"></script>
<script th:inline="javascript" th:fragment="js">
/*<![CDATA[*/
$( function() {
$(".search").on("click", function() {
var pos = $(".search").index(this); //N番目のボタン
$(this).closest("tr").addClass("selected");
openDialog(function(item) {
if ( item ) { //行選択済みなら
var $tr = $("#parentTbl tr").eq(pos);
$("td", $tr).eq(1).text(item.seimei);
$("td", $tr).eq(2).text(item.busho);
$("td", $tr).eq(3).text(item.nenrei);
}
$("#parentTbl tr").removeClass("selected");
});
});
} );
/*]]>*/
</script>
</body>
</html>
dialog.js
$( function() {
$("#dialogArea").remove();
$("body").append("<div id='dialogArea'></div>");
var callback;
var grid;
$.ajax({
type : "GET",
url : /*[[@{/dialog}]]*/ "/dialog",
cache : false,
success : function(data) {
$("#dialogArea").html( data );
$("#dialog").dialog({
autoOpen: false,
height: 400,
width: 750,
modal: true,
open: function( event, ui ) { //ダイアログ表示時
initPopup();
}
});
grid = new wijmo.grid.FlexGrid('#flexGrid');
grid.initialize({
autoGenerateColumns: false,
columns: [
{ header: '姓名', binding: 'seimei'},
{ header: '姓' , binding: 'sei'},
{ header: '名' , binding: 'mei'},
{ header: '部署', binding: 'busho' },
{ header: '年齢', binding: 'nenrei' },
],
selectionMode : 'Row'
});
grid.itemsSource = [];
//ポップアップ画面初期化
function initPopup() {
// var grid = wijmo.Control.getControl("#flexGrid");
grid.itemsSource = [];
$(":text[name='name']").val('');
$(":text[name='age']").val('');
}
//ポップアップ戻る
$("#popupReturn").on("click", function() {
// var grid = wijmo.Control.getControl("#flexGrid");
var item = grid.collectionView.currentItem;
if ( callback ) {
callback(item);
}
$("#dialog").dialog("close");
});
//ポップアップクリア
$("#popupClear").on("click", function() {
initPopup();
});
//ポップアップ検索
$("#popupSearch").on("click", function() {
$("#errorDiv").empty();
$.ajax({
type : "GET",
url : /*[[@{/dialog/search}]]*/ "/dialog/search",
data : $("#dialogForm").serialize(),
dataType : "json",
cache : false,
success : function(data) {
// alert(JSON.stringify(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>");
// var grid = wijmo.Control.getControl("#flexGrid");
grid.itemsSource = [];
} else { //success
// var grid = wijmo.Control.getControl("#flexGrid");
grid.itemsSource = data.members;
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown.message);
},
});
});
window.openDialog = function(cb) {
$("#dialog").dialog("open");
callback = cb;
}
},
});
} );
dialog.html
<div xmlns:th="http://www.thymeleaf.org">
<div id="test"></div>
<div id="dialog" title="Basic dialog" >
<form method="get" th:action="@{/dialog/search}" th:object="${dialogForm}" id="dialogForm">
<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>
</div>
SearchController
package com.example.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class SearchController {
@RequestMapping(value = "/", method = RequestMethod.GET)
public String index(Model model) {
return "index";
}
}
SearchController
package com.example.controller;
import java.util.ArrayList;
import java.util.List;
import javax.validation.Valid;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.example.dto.ErrorDto;
import com.example.dto.MemberDto;
import com.example.dto.SearchResultDto;
import com.example.form.DialogForm;
@Controller
public class DialogController {
@RequestMapping(value = "/dialog", method = RequestMethod.GET)
public String index(@ModelAttribute DialogForm dialogForm) {
//model.addAttribute("dialogForm", new DialogForm());
return "dialog";
}
@RequestMapping(value = "/dialog/search", method = RequestMethod.GET)
@ResponseBody
public SearchResultDto search(@Valid @ModelAttribute DialogForm dialogForm, BindingResult result) {
SearchResultDto results = new SearchResultDto();
if (result.hasErrors()) {
results.setState("1"); // error
List<ErrorDto> errors = new ArrayList<>();
List<FieldError> origErrors = result.getFieldErrors();
for (FieldError e : origErrors) {
errors.add(new ErrorDto(e.getField(), e.getDefaultMessage()));
}
results.setErrors(errors);
System.out.println(errors.size());
} else {
results.setState("0"); // success
List<MemberDto> members = new ArrayList<>();
members.add(new MemberDto("名字名前１", " 部署1 ぶしょ ", 11));
members.add(new MemberDto("名字名前２", " 部署2 ぶしょ ", 22));
members.add(new MemberDto("名字名前３", " 部署3 ぶしょ aa", 33));
results.setMembers(members);
}
return results;
}
}