CheckGridController
package com.example.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.example.dto.CheckGridDto;
import com.example.form.CheckGridForm;
@Controller
public class CheckGridController {
@RequestMapping(value = "/checkGrid", method = RequestMethod.GET)
public String index(Model model) {
List<CheckGridDto> list = new ArrayList<>();
list.add(new CheckGridDto("code1", "name1", "1"));
list.add(new CheckGridDto("code2", "name2", "0"));
list.add(new CheckGridDto("code3", "name3", "1"));
model.addAttribute("list", list);
model.addAttribute("checkGridForm", new CheckGridForm());
return "checkGrid";
}
@RequestMapping(value = "/checkGrid", method = RequestMethod.POST)
public String update(@ModelAttribute("checkGridForm") CheckGridForm checkGridForm, Model model) {
List<CheckGridDto> list = new ArrayList<>();
for ( CheckGridDto dto : checkGridForm.getDtoList() ) {
list.add(new CheckGridDto(dto.getCode(), dto.getName(), dto.getCheck()));
}
model.addAttribute("list", list);
return "checkGrid";
}
}
CheckGridForm
package com.example.form;
import java.util.ArrayList;
import java.util.List;
import com.example.dto.CheckGridDto;
public class CheckGridForm {
private List<CheckGridDto> dtoList = new ArrayList<>();
public List<CheckGridDto> getDtoList() {
return dtoList;
}
public void setDtoList(List<CheckGridDto> rows) {
this.dtoList = rows;
}
}
CheckGridDto
package com.example.dto;
public class CheckGridDto {
public CheckGridDto() {}
public CheckGridDto(String code, String name, String check) {
this.code = code;
this.name = name;
this.check = check;
}
private String name;
private String code;
private String check;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getCheck() {
return check;
}
public void setCheck(String check) {
this.check = check;
}
}
CheckGrid.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<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">
.wj-flexgrid {
height: auto;
max-height: 300px;
}
</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 type="text/javascript" th:inline="javascript">
$(function() {
var grid = new wijmo.grid.FlexGrid('#flexGrid');
grid.initialize({
autoGenerateColumns: false,
columns: [
{ header:'Code', binding: 'code'},
{ header:'Name', binding: 'name'},
{ header:'Check', binding: 'check'},
],
selectionMode : 'Cell',
isReadOnly : false,
allowSorting : false,
});
grid.itemsSource = [
<th:block th:each="item : ${list}">
{
code: /*[[${item.code}]]*/ '1'
,name: /*[[${item.name}]]*/ 'name'
,check:/*[[${item.check == '1' ? true : false}]]*/ true
},
</th:block>
];
});
</script>
<script th:inline="javascript">
/*<![CDATA[*/
$(function() {
var grid = wijmo.Control.getControl('#flexGrid');
$("#submit").click(function(){
alert(JSON.stringify(grid.itemsSource));
$("#hiddenArea").empty();
for ( var i = 0; i < grid.itemsSource.length; i++ ) {
$("#hiddenArea").append("<input type='hidden' name='dtoList[" + i + "].code' value='" + grid.getCellData(i, 0) + "'/>");
$("#hiddenArea").append("<input type='hidden' name='dtoList[" + i + "].name' value='" + grid.getCellData(i, 1) + "'/>");
$("#hiddenArea").append("<input type='hidden' name='dtoList[" + i + "].check' value='" + (grid.getCellData(i, 2) ? 1 : 0) + "'/>");
}
$("form").submit();
});
});
/*]]>*/
</script>
</head>
<body>
<form th:attr="action=@{/checkGrid}" method="post" th:object="${checkGridForm}">
<div id="flexGrid"></div>
<input type="submit" value="submit" id="submit"/>
<div id="hiddenArea">
</div>
</form>
</body>
</html>