1、Service类内容:
package com.xibei.api.kalf.service; import com.xibei.api.kalf.entities.Order; import com.xibei.api.kalf.mapper.OrderMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.ArrayList; import java.util.List; @Service public class OrderService { @Autowired private OrderMapper orderMapper; public List Get_Orderlist() { List<Order> list = new ArrayList<>(); list = orderMapper.selectList(null); return list; } }
2、Controller类内容
package com.xibei.api.kalf.controller; import com.xibei.api.kalf.entities.Order; import com.xibei.api.kalf.service.OrderService; import org.mybatis.spring.annotation.MapperScan; import org.omg.CORBA.PUBLIC_MEMBER; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.ComponentScan; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; @Controller @MapperScan(basePackages = "com.xibei.api.kalf") @ComponentScan(basePackages = "com.xibei.api.kalf") public class OrderController { @Autowired private OrderService orderService; @RequestMapping(value = "/", method = RequestMethod.GET) public String show_order_html() { return "orderlist"; } //此部分内容对应Ajax中jqGrid获取数据的请求; @RequestMapping(value = "/order_list",method = RequestMethod.GET) @ResponseBody public Object show_orderList() { List<Order> list = orderService.Get_Orderlist(); System.out.println(list); return list; } }
页内信息:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="home">
<body>
<div layout:fragment="content">
<!-- 正文内容 -->
<div class="row border-bottom white-bg page-heading">
<div class="col-lg-6" align="left">
<button id="addBtn" type="button" class="btn btn-w-m btn-primary">增加</button>
<button type="button" class="btn btn-w-m btn-info" id="editBtn" >编辑</button>
<button type="button" class="btn btn-w-m btn-danger" id="delBtn">删除</button>
</div>
<div align="right">
<label type="lable" >日期: </label>
<input type="text" name="start" placeholder="起始日期" id="start-picker" readonly value="">
<span>--</span>
<input type="text" name="end" placeholder="结束日期" id="end-picker" readonly value="">
<button type="button" class="btn btn-w-m btn-success" id="btnQuery" οnclick="">查询</button>
</div>
</div>
<div class="fh-breadcrumb">
<div class="full-height">
<div class="full-height-scroll white-bg ">
<div class="element-detail-box">
<div class="ibox-content">
<div class="jqGrid_wrapper">
<table id="table_list_2">
</table>
<div id="pager_list_2"></div><!--分页位置-->
<input type="hidden" id="hi_id" value="" />
<table>
<tr><td><a href="/orderlist/1/">首页</a></td><td> </td>
<td><a href="/orderlist/#">上一页</a></td><td> </td>
<td><a href="/orderlist/#">下一页</a></td><td> </td>
<td><a href="/orderlist/#">未页</a></td>
<td> </td><td>第【 / 】页</td>
</tr></table>
<input type="hidden" id="hi_page" value="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="div_script" layout:fragment="script">
<script th:src="@{js/jquery-2.1.1.js}"></script>
<script th:src="@{js/bootstrap.min.js}"></script>
<script th:src="@{js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<!-- Custom and plugin javascript -->
<script th:src="@{js/inspinia.js}"></script>
<script th:src="@{js/plugins/pace/pace.min.js}"></script>
<!-- Peity -->
<script th:src="@{ js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{js/plugins/chosen/chosen.jquery.js}"></script>
<!--日期控件-->
<script th:src="@{js/plugins/datapicker/bootstrap-datepicker.js}"></script>
<script th:src="@{js/plugins/datapicker/bootstrap-datepicker.min.js}" type="text/javascript"></script>
<script th:src="@{js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{js/DateCtrl.js}" type="text/javascript"></script>
<script th:src="@{js/plugins/jqGrid/grid.locale-en.js}"></script>
<script th:src="@{js/plugins/jqGrid/jquery.jqGrid.min.js}"></script>
<!-- 影响日期控件显示
<script th:src="@{js/plugins/jquery-ui/jquery-ui.min.js}"></script>
-->
<script>
$(document).ready(function () {
$("#table_list_2").jqGrid({
url : "http://localhost:8080/order_list",
datatype : "json",
height:"auto",
autowidth: true,
shrinkToFit: true,
rowNum: 10,
sortable:true,
sortname:'orderDoc',
rowList: [10, 20, 30],
colNames:['序号','订单号','原料名称', '预订数量','补货数量','订货数量','单位','订货日期','发货日期','门店'],
colModel:[
{name:'orderId',index:'orderId', editable: false,width:30, sorttype:"int",search:true},
{name:'orderDoc',index:'orderDoc', editable: true,width:40, editrules:{required:true},search:true},
{name:'name',index:'name', editable: true, width:80,search:true,editrules:{required:true}},
{name:'reserveNum',index:'reserveNum', editable: true, width:40 },
{name:'futuresNum',index:'futuresNum', editable: true, width:40 },
{name:'confirmNum',index:'confirmNum', editable: true, width:40 },
{name:'unit',index:'unit', editable: true, width:30,search:true },
{name:'orderDate',index:'orderDate', editable: true, width:40,search:true },
{name:'shipDate',index:'shipDate', editable: true, width:40 },
{name:'store',index:'store', editable: true, width:30 }
],
pager: "#pager_list_2",
viewrecords: true,
pgbuttons:true,
loadonce: true,
add: true,
edit: true,
addtext: 'Add',
edittext: 'Edit',
hidegrid: false,
multiselect:true,
editurl:"#"
});
// Setup buttons
$("#table_list_2").jqGrid('navGrid', '#pager_list_2',
{edit: false, add: false, del: false, search: false},
{height: 150, reloadAfterSubmit: true}
);
// Add responsive to jqGrid
$(window).bind('resize', function () {
var width = $('.jqGrid_wrapper').width();
$('#table_list_2').setGridWidth(width);
});
$("#editBtn").click(function(){
var gr = jQuery("#table_list_2").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#table_list_2").jqGrid('editGridRow',gr,{height:450,
onclickSubmit : function(params, posdata) {
return {"orderId":$('#table_list_2').jqGrid('getCell', gr, 'orderId')};
},
closeAfterEdit : true,
reloadAfterSubmit:true,
afterComplete:function(data,postdata){
location.reload()
}
});
else alert("请选择一条数据");
var rowData = jQuery("#table_list_2").jqGrid('getRowData',gr);
//alert(rowData.special_specialtype);
});
$("#addBtn").click(function(){
jQuery("#table_list_2").jqGrid('editGridRow',"new",{height:350,closeAfterAdd : true,reloadAfterSubmit:true,
afterComplete:function(data,postdata){
location.reload()
}});
});
$("#delBtn").click(function(){
var gr = jQuery("#table_list_2").jqGrid('getGridParam','selrow');
//alert(gr);
if( gr != null ) jQuery("#table_list_2").jqGrid('delGridRow',gr,{height:120,
reloadAfterSubmit:true,
onclickSubmit : function(params, posdata) {
return {"orderId":$('#table_list_2').jqGrid('getCell', gr, 'orderId')};
},
afterComplete:function(data,postdata){
location.reload()
}
}
);
else alert("请选择一条数据!");
});
$("#searBtn").click(function(){
jQuery("#table_list_2").jqGrid('searchGrid',
{sopt:['cn','bw','eq','ne','lt','gt','ew']}
);
});
});
function change(id) {
alert(id);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
if(url != "/" && url != "/index/"){
$("li").removeClass("active");
$("[href*='" + url + "']").parent().parent().parent().addClass("active");
$("[href*='" + url + "']").parent().parent().addClass("in");
$("[href*='" + url + "']").parent().addClass("active");
//alert(url);
}
window.Modal = function () {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var alr = $("#ycf-alert");
var ahtml = alr.html();
//alert(ahtml);
/* html 复原不在 _init() 里面做了,重复调用时会有问题,直接在 _alert/_confirm 里面做 */
var _alert = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').hide();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
alr.find('.cancel').show();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
alr.find('.cancel').click(function () { callback(false) });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "提示内容",
title: "操作提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
console.log(alr);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 500,
backdrop: 'static'
});
}
return {
alert: _alert,
confirm: _confirm
}
}();
})
</script>
</div>
</body>
<script type="text/javascript">
//登出
function logout(){
Modal.confirm(
{
msg: "是否继续退出?"
}).on( function (e) {
if(e==true){
$.ajax( {
type : "post",
url : "/logout/",
data : {},
dataType:"json",
success : function(data) {
if(data.code==1){
location.href='/';
}else{
}
},
error : function(data) {
}
});
}
});
}
</script>
</html>