jqgrid and java
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../common/header.jsp"%>
<script type="text/javascript">
$(function() {
search();
$("#list").navGrid('#pager',{
edit:false,add:false,del:false,search:false,refresh:true
}).navButtonAdd('#pager',{
caption:"Add",
buttonicon:"ui-icon ui-icon-newwin",
onClickButton: function(){ location.href="editJob.do";},
position:"last"
});
$.ajax({
type : "post",
url : "autoCondition.do",
datatype : "json",
success : function(result){
var dataObj = $.parseJSON(result);
var length = dataObj.length;
var autoJobCode="";
var autoJobName="";
for(var i=0; i< length; i++){
autoJobCode = autoJobCode + dataObj[i].jobCode + ",";
autoJobName = autoJobName + dataObj[i].jobName + ",";
}
$("#jobCode").autocomplete(autoJobCode.split(","));
$("#jobName").autocomplete(autoJobName.split(","));
}
});
});
var newGuid = function(){
var guid = "";
for (var i = 1; i <= 32; i++){
var n = Math.floor(Math.random()*16.0).toString(16).toUpperCase();
guid += n;
if((i==8)||(i==12)||(i==16)||(i==20))
guid += "0";
}
return guid;
};
function search(){
var postDateArray = {
"jobName" : $("#jobName").val(),
"jobCode" : $("#jobCode").val(),
"deptId" : $("#deptId").val(),
uuid: newGuid()
};
$("#list").jqGrid({
url : 'searchJob.do',
mtype: 'post',
datatype : 'json',
postData: postDateArray,
jsonReader : {
root:"rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
width : 770,
shrinkToFit : false,
multiselect : true,
sortable : true,
rowNum : 10,
pager : '#pager',
viewrecords : true,
rowList : [ 10, 20, 30 ],
sortname : 'jobCode',
sortorder : 'desc',
caption : 'JOB LIST',
colNames : [ 'JOB ID', 'Job Code', 'Job Code', 'Job Name', 'Department Name', 'Hour Rate', 'Daily Rate', 'Monthly Rate','COMMNENTS', 'EFFECTIVE DATE' ],
colModel : [{name : 'jobId', index : 'jobId', hidden: true},
{name : 'jobCode', index : 'jobCode', hidden: true},
{name : 'code', index : 'jobCode'},
{name : 'jobName', index : 'jobName' },
{name : 'deptName', index : 'deptId' },
{name : 'hourRate', index : 'hourRate'},
{name : 'dailyRate', index : 'dailyRate'},
{name : 'monthlyRate', index : 'monthlyRate'},
{name : 'comments', index : 'comments'},
{name : 'effDateString', index : 'effDateString' },
],
gridComplete : function(){
var ids = jQuery("#list").getDataIDs();
for(var i=0;i<ids.length;i++){
var index = ids[i];
var key = $('#list').getRowData(index).jobId;
var jobCode = $('#list').getRowData(index).jobCode;
var jobObj = "<a href='editJob.do?jobId="+key+"'>"+jobCode+"</a>";
jQuery("#list").setRowData(index,{code:jobObj});
}
}
});
$("#list").setGridParam({url : "searchJob.do", page:1, postData: postDateArray}).trigger("reloadGrid");
}
</script>
</head>
<body>
<h3>JOB</h3>
<table width="100%" border="1"
class="ui-widget ui-helper-reset ui-accordion-icons">
<tr>
<td width="15%" class="ui-helper-reset ui-state-default ui-corner-all">Job Code</td>
<td width="20%"><input class="searchText" type="text" id="jobCode" name="jobCode" maxlength="30" /></td>
<td width="15%" class="ui-helper-reset ui-state-default ui-corner-all">Job Name</td>
<td width="20%"><input class="searchText" type="text" id="jobName" name="jobName" maxlength="30" /></td>
<td width="20%"class="ui-helper-reset ui-state-default ui-corner-all">Department Name</td>
<td width="10%">
<select id="deptId" name="deptId" class="searchText">
<option value="">All</option>
<c:forEach items="${depts}" var="o">
<option value="${o.deptCode}">${o.deptName}</option>
</c:forEach>
</select>
</td>
</tr>
</table>
<br />
<div align="right">
<button id="search"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="search()">
<span class="ui-button-text" >Search</span>
</button>
</div>
<br />
<table id="list" >
</table>
<div id="pager"></div>
</body>
</html>
package com.fil.pmo.controller;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.springframework.web.servlet.ModelAndView;
import com.fil.pmo.constants.Constants;
import com.fil.pmo.model.Department;
import com.fil.pmo.model.Job;
import com.fil.pmo.service.DepartmentService;
import com.fil.pmo.service.JobService;
import com.fil.pmo.util.JsonUtil;
import com.fil.pmo.util.Page;
import com.fil.pmo.vo.JobConditionVO;
public class JobController extends BaseController {
private static final String JOB_LIST = "job/job-list";
private static final String JOB_EDIT = "job/job-edit";
private JobService jobService;
private DepartmentService departmentService;
private Page<Job> jobPage;
/**
*
* @param request
* @param response
* @return
*/
public ModelAndView jobList(HttpServletRequest request,
HttpServletResponse response) {
List<Department> deptList = this.departmentService.getDepartments();
Map<String, List<Department>> deptMap = new HashMap<String, List<Department>>();
deptMap.put("depts", deptList);
return new ModelAndView(JOB_LIST, deptMap);
}
/**
*
* @param request
* @param response
* @param condition
* @throws IOException
*/
public void searchJob(HttpServletRequest request,
HttpServletResponse response, JobConditionVO condition)
throws IOException {
this.jobPage = new Page<Job>(condition.getRows());
this.jobPage.setPageNo(condition.getPage());
this.jobPage = this.jobService.getJobsByConditions(this.jobPage,
condition);
JSONObject jsonObject = new JSONObject();
jsonObject.put(Constants.PAGE_TOTAL, this.jobPage.getTotalPages());
jsonObject.put(Constants.PAGE_PAGE, this.jobPage.getPageNo());
jsonObject.put(Constants.PAGE_RECORDS, this.jobPage.getTotalCount());
jsonObject.put(Constants.PAGE_ROWS, this.jobPage.getResult());
JsonUtil.renderJson(jsonObject, response);
}
public ModelAndView editJob(HttpServletRequest request,
HttpServletResponse response, JobConditionVO condition) {
Map<String, Job> jobMap = null;
if(condition.getJobId() != null){
Job job = this.jobService.getJobById(condition.getJobId());
jobMap = new HashMap<String, Job>();
jobMap.put("job", job);
}
return new ModelAndView(JOB_EDIT, jobMap);
}
public ModelAndView saveJob(HttpServletRequest request,
HttpServletResponse response, Job job) {
this.jobService.saveJob(job);
return this.jobList(request, response);
}
public void autoCondition(HttpServletRequest request,
HttpServletResponse response) throws IOException{
List<Job> jobList = this.jobService.getJobsByAuto();
JSONObject jsonObject = new JSONObject();
jsonObject.put("data", jobList);
JSONArray jsonArray = JSONArray.fromObject(jobList);
//jsonArray.
response.getWriter().write(jsonArray.toString());
//JsonUtil.renderJson(jsonObject, response);
}
public void setJobService(JobService jobService) {
this.jobService = jobService;
}
public void setDepartmentService(DepartmentService departmentService) {
this.departmentService = departmentService;
}
}
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../common/header.jsp"%>
<script type="text/javascript">
$(function() {
search();
$("#list").navGrid('#pager',{
edit:false,add:false,del:false,search:false,refresh:true
}).navButtonAdd('#pager',{
caption:"Add",
buttonicon:"ui-icon ui-icon-newwin",
onClickButton: function(){ location.href="editJob.do";},
position:"last"
});
$.ajax({
type : "post",
url : "autoCondition.do",
datatype : "json",
success : function(result){
var dataObj = $.parseJSON(result);
var length = dataObj.length;
var autoJobCode="";
var autoJobName="";
for(var i=0; i< length; i++){
autoJobCode = autoJobCode + dataObj[i].jobCode + ",";
autoJobName = autoJobName + dataObj[i].jobName + ",";
}
$("#jobCode").autocomplete(autoJobCode.split(","));
$("#jobName").autocomplete(autoJobName.split(","));
}
});
});
var newGuid = function(){
var guid = "";
for (var i = 1; i <= 32; i++){
var n = Math.floor(Math.random()*16.0).toString(16).toUpperCase();
guid += n;
if((i==8)||(i==12)||(i==16)||(i==20))
guid += "0";
}
return guid;
};
function search(){
var postDateArray = {
"jobName" : $("#jobName").val(),
"jobCode" : $("#jobCode").val(),
"deptId" : $("#deptId").val(),
uuid: newGuid()
};
$("#list").jqGrid({
url : 'searchJob.do',
mtype: 'post',
datatype : 'json',
postData: postDateArray,
jsonReader : {
root:"rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
width : 770,
shrinkToFit : false,
multiselect : true,
sortable : true,
rowNum : 10,
pager : '#pager',
viewrecords : true,
rowList : [ 10, 20, 30 ],
sortname : 'jobCode',
sortorder : 'desc',
caption : 'JOB LIST',
colNames : [ 'JOB ID', 'Job Code', 'Job Code', 'Job Name', 'Department Name', 'Hour Rate', 'Daily Rate', 'Monthly Rate','COMMNENTS', 'EFFECTIVE DATE' ],
colModel : [{name : 'jobId', index : 'jobId', hidden: true},
{name : 'jobCode', index : 'jobCode', hidden: true},
{name : 'code', index : 'jobCode'},
{name : 'jobName', index : 'jobName' },
{name : 'deptName', index : 'deptId' },
{name : 'hourRate', index : 'hourRate'},
{name : 'dailyRate', index : 'dailyRate'},
{name : 'monthlyRate', index : 'monthlyRate'},
{name : 'comments', index : 'comments'},
{name : 'effDateString', index : 'effDateString' },
],
gridComplete : function(){
var ids = jQuery("#list").getDataIDs();
for(var i=0;i<ids.length;i++){
var index = ids[i];
var key = $('#list').getRowData(index).jobId;
var jobCode = $('#list').getRowData(index).jobCode;
var jobObj = "<a href='editJob.do?jobId="+key+"'>"+jobCode+"</a>";
jQuery("#list").setRowData(index,{code:jobObj});
}
}
});
$("#list").setGridParam({url : "searchJob.do", page:1, postData: postDateArray}).trigger("reloadGrid");
}
</script>
</head>
<body>
<h3>JOB</h3>
<table width="100%" border="1"
class="ui-widget ui-helper-reset ui-accordion-icons">
<tr>
<td width="15%" class="ui-helper-reset ui-state-default ui-corner-all">Job Code</td>
<td width="20%"><input class="searchText" type="text" id="jobCode" name="jobCode" maxlength="30" /></td>
<td width="15%" class="ui-helper-reset ui-state-default ui-corner-all">Job Name</td>
<td width="20%"><input class="searchText" type="text" id="jobName" name="jobName" maxlength="30" /></td>
<td width="20%"class="ui-helper-reset ui-state-default ui-corner-all">Department Name</td>
<td width="10%">
<select id="deptId" name="deptId" class="searchText">
<option value="">All</option>
<c:forEach items="${depts}" var="o">
<option value="${o.deptCode}">${o.deptName}</option>
</c:forEach>
</select>
</td>
</tr>
</table>
<br />
<div align="right">
<button id="search"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="search()">
<span class="ui-button-text" >Search</span>
</button>
</div>
<br />
<table id="list" >
</table>
<div id="pager"></div>
</body>
</html>
package com.fil.pmo.controller;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.springframework.web.servlet.ModelAndView;
import com.fil.pmo.constants.Constants;
import com.fil.pmo.model.Department;
import com.fil.pmo.model.Job;
import com.fil.pmo.service.DepartmentService;
import com.fil.pmo.service.JobService;
import com.fil.pmo.util.JsonUtil;
import com.fil.pmo.util.Page;
import com.fil.pmo.vo.JobConditionVO;
public class JobController extends BaseController {
private static final String JOB_LIST = "job/job-list";
private static final String JOB_EDIT = "job/job-edit";
private JobService jobService;
private DepartmentService departmentService;
private Page<Job> jobPage;
/**
*
* @param request
* @param response
* @return
*/
public ModelAndView jobList(HttpServletRequest request,
HttpServletResponse response) {
List<Department> deptList = this.departmentService.getDepartments();
Map<String, List<Department>> deptMap = new HashMap<String, List<Department>>();
deptMap.put("depts", deptList);
return new ModelAndView(JOB_LIST, deptMap);
}
/**
*
* @param request
* @param response
* @param condition
* @throws IOException
*/
public void searchJob(HttpServletRequest request,
HttpServletResponse response, JobConditionVO condition)
throws IOException {
this.jobPage = new Page<Job>(condition.getRows());
this.jobPage.setPageNo(condition.getPage());
this.jobPage = this.jobService.getJobsByConditions(this.jobPage,
condition);
JSONObject jsonObject = new JSONObject();
jsonObject.put(Constants.PAGE_TOTAL, this.jobPage.getTotalPages());
jsonObject.put(Constants.PAGE_PAGE, this.jobPage.getPageNo());
jsonObject.put(Constants.PAGE_RECORDS, this.jobPage.getTotalCount());
jsonObject.put(Constants.PAGE_ROWS, this.jobPage.getResult());
JsonUtil.renderJson(jsonObject, response);
}
public ModelAndView editJob(HttpServletRequest request,
HttpServletResponse response, JobConditionVO condition) {
Map<String, Job> jobMap = null;
if(condition.getJobId() != null){
Job job = this.jobService.getJobById(condition.getJobId());
jobMap = new HashMap<String, Job>();
jobMap.put("job", job);
}
return new ModelAndView(JOB_EDIT, jobMap);
}
public ModelAndView saveJob(HttpServletRequest request,
HttpServletResponse response, Job job) {
this.jobService.saveJob(job);
return this.jobList(request, response);
}
public void autoCondition(HttpServletRequest request,
HttpServletResponse response) throws IOException{
List<Job> jobList = this.jobService.getJobsByAuto();
JSONObject jsonObject = new JSONObject();
jsonObject.put("data", jobList);
JSONArray jsonArray = JSONArray.fromObject(jobList);
//jsonArray.
response.getWriter().write(jsonArray.toString());
//JsonUtil.renderJson(jsonObject, response);
}
public void setJobService(JobService jobService) {
this.jobService = jobService;
}
public void setDepartmentService(DepartmentService departmentService) {
this.departmentService = departmentService;
}
}