Javascript JQGrid在表单提交时填充
我有一个.jsp页面，我在其中创建了一个表单：Javascript JQGrid在表单提交时填充,javascript,jquery,forms,jqgrid,Javascript,Jquery,Forms,Jqgrid,我有一个.jsp页面，我在其中创建了一个表单： <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!doctype html> <html> <head> <meta charset="utf-8"> <title>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bank Details</title>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/jquery-ui.css">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap-select.min.css">
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="./js/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="./js/trirand/jquery.jqGrid.min.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.-->
<script type="text/ecmascript" src="./js/trirand/i18n/grid.locale-en.js"></script>
<!-- The "sortable" behaviour is needed by jqGrid for column resizing -->
<script type="text/ecmascript" src="./js/jquery.ui.sortable.min.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="./css/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="./css/trirand/ui.jqgrid.css" />
<script type="text/javascript" src="./scripts/bootstrap.js"></script>
<script type="text/javascript" src="./scripts/bootstrap-select.min.js"></script>
<script src="./js/jqGridBankDetails.js"></script>
</head>
<body>
<form action="jqGridDetails" method="post">
<div class="well">
<label id="rankIDLbl" for="rankIDCntrl">Rank ID </label><span style="font-weight: bold;"> :</span>
<select id="rankIDCntrl" name="rankIDCntl" class="selectpicker">
<option></option>
<option>Rank1</option>
<option>Rank2</option>
</select>
<label for="lockerIDCntrl" style="padding-left: 150px;">Locker ID : </label> <select
id="lockerIDCntrl" name="lockerIDCntrl" class="selectpicker">
<option></option>
<option>Locker1</option>
<option>Locker2</option>
</select>
</div>
<div style="float: right; padding-right: 15px;">
<input type="submit" value="Search" id="searchBtn" class="btn btn-primary" />
<input type="button" value="Reset" id="resetBtn" class="btn btn-primary" />
</div>
</form>
<table id="list">
<tr>
<td />
</tr>
</table>
<div id="pager"></div>
</body>
</html>
jqGrid是纯JavaScript库，但您不会发布任何您使用的JavaScript代码。此外，需要至少有一个空的
<script src="./js/jqGridBankDetails.js"></script>
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
JqGridModel gridModel1 = new JqGridModel();
gridModel1.setId(1);
gridModel1.setFirstName("Mohaideen");
gridModel1.setLastName("Jamil");
gridModel1.setCity("Coimbatore");
gridModel1.setState("TamilNadu");
JqGridModel gridModel2 = new JqGridModel();
gridModel2.setId(2);
gridModel2.setFirstName("Ameerkhan");
gridModel2.setLastName("Saffar");
gridModel2.setCity("Thirunelveli");
gridModel2.setState("Tamilnadu");
List<JqGridModel> jqGridModels = new ArrayList<>();
jqGridModels.add(gridModel1);
jqGridModels.add(gridModel2);
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String jsonArray = gson.toJson(jqGridModels);
jsonArray = "{\"page\":1,\"total\":\"2\",\"records\":"
+ jqGridModels.size() + ",\"rows\":" + jsonArray + "}";
System.out.println(jsonArray);
response.getWriter().print(jsonArray);
}
jQuery(document).ready(function() {
$("#list").jqGrid({
url : "GridServlet",
datatype : "json",
mtype : 'POST',
colNames : [ 'Id', 'FirstName', 'LastName', 'City', 'State' ],
colModel : [ {
name : 'id',
index : 'id',
width : 100
}, {
name : 'firstName',
index : 'firstName',
width : 150,
editable : true
}, {
name : 'lastName',
index : 'lastName',
width : 150,
editable : true
}, {
name : 'city',
index : 'city',
width : 100,
editable : true
}, {
name : 'state',
index : 'state',
width : 100,
editable : true
} ],
pager : '#pager',
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'invid',
sortorder : 'desc',
viewrecords : true,
gridview : true,
caption : 'Data Report',
jsonReader : {
repeatitems : false,
},
editurl : "GridServlet"
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : true,
add : true,
del : true,
search : true
});
});