Springboot+mybatis-plus+jqGrid应用

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" >日期:  &nbsp;</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>&nbsp;&nbsp;</td>
                                            <td><a href="/orderlist/#">上一页</a></td><td>&nbsp;&nbsp;</td>
                                            <td><a href="/orderlist/#">下一页</a></td><td>&nbsp;&nbsp;</td>
                                            <td><a href="/orderlist/#">未页</a></td>
                                            <td>&nbsp;&nbsp;</td><td>第【&nbsp;/&nbsp;】页</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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值