关于jqGrid 的使用

 <div  class="query-criteria">  
                         <form id="queryForm2">
                                       标题  <input type="text" name="head">
                                    <select name="transStatus" class="form-control">
                                        <option selected value="">请选择类型</option>
                                        <option value="1">物业</option>
                                        <option value="2">业务</option>
                                        <option value="3">其他</option>
                                    </select>
                                    <select name="isclos" class="form-control">
                                        <option selected value="">选择是否关闭</option>
                                        <option value="0">是</option>
                                        <option value="1">否</option>
                                    </select>	


                                    <div class="form-group" id="data_condition">
                                        <div class="input-daterange input-group" id="datepicker">
                                            <input type="text" class="input-sm form-control" name="startTime"/>
                                            <span class="input-group-addon">to</span>
                                            <input type="text" class="input-sm form-control" name="endTime"/>
                                        </div>
                                    </div>


                                    <button id="queryBtn2" type="button">查询</button>
                                </form>
        </div>


        <div class="wrapper wrapper-content  animated fadeInRight">
          
            <!-- 表格 -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-content">
                            <div class="jqGrid_wrapper">
                                <table id="table_list_1"></table>
                                <div id="pager_list_1"></div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   
    <script>
        $(document).ready(function () {
        	
        	
        	
            $("#table_list_1").jqGrid({
            	url:"${request.contextPath}/pdcallcenter/findlist",
                datatype: "json",
                height: 367,
                autowidth: true,
                shrinkToFit: true,
                shrinkToFit: false,
                autoScroll: true,
                autowidth:true,
                rowNum: 10,
                rowList: [10, 20, 30],
                colNames: ['标题', '内容','创建时间', '类型', '呼叫人', '是否已读', '是否关闭', '关闭时间', '操作'],
                colModel: [
                    {name: 'title', index: 'title', width: 150, sorttype: "date", formatter: " 12:00",sortable:false},
                    {name: 'content', index: 'content', width: 150, sorttype: "date", formatter: " 12:00",sortable:false},
                    {name: 'createTime', index: 'createTime', width: 100,sortable:false},
                    {name: 'type', index: 'type', width: 80,sortable:false,formatter: formatterPdcallTypeModel},
                    {name: 'creatername', index: 'creatername', width: 120, sorttype: "float",sortable:false},
                    {name: 'isRead', index: 'isRead', width: 80, sortable: false,formatter: formatterPdcallIsReadModel},
                    {name: 'isClose', index: 'isClose', width: 100, sortable: false,formatter: formatterPdcalliClodsModel},
                    {name: 'closeTime', index: 'closeTime', width: 60,sorttype: "float",sortable:false},
                    {name: 'result', index: 'result', width: 80,sortable:false,formatter: formatterPdcModel}
                ],
               
                pager: "#pager_list_1",
                viewrecords: true,
                hidegrid: false
            });

            // Add responsive to jqGrid
            $(window).bind('resize', function () {
                var width = $('.jqGrid_wrapper').width();
                $('#table_list_1').setGridWidth(width);
            });
            setTimeout(function(){
                $('.wrapper-content').removeClass('animated fadeInRight');
            },700);


            $('#data_condition .input-daterange').datepicker({
                // dateFormat: "yy-mm-dd",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });


        });


      //点击查询按钮重新查询
        $("#queryBtn2").on("click", function () {
        	alert("查询")
                 $("#table_list_1").jqGrid('setGridParam', {
                     datatype: 'json',
                     postData: getGridParam("#queryForm2"), //发送数据
                     page: 1
                 }).trigger("reloadGrid"); //重新载入
             });
        
        function getGridParam(id) {
            //定义参数数据集合
            var pv = {};
            //获取表单里面的所有数据进行组装条件查询
            $.each($(id).serializeArray(), function (index, obj) {
                var key = $.trim(obj.name);
                var val = $.trim(obj.value);
                //控件数值为字符串空情况不考虑在内
                pv[key] = val
            });
            return pv;
        }
        //消息类型
        function formatterPdcallTypeModel(cellvalue, options, row) {
            if (cellvalue == "1") {
                return "物业";
            } else if (cellvalue == "2") {
                return "业务";
            } else if (cellvalue == "3"){
            	return "其他"
            }else {
                return "--";
            }
        }
      //消息状态 是否关闭
        function formatterPdcalliClodsModel(cellvalue, options, row) {
            if (cellvalue == "0") {
                return "否";
            } else {
                return "是";
            } 
        }
      //
      function formatterPdcallIsReadModel(cellvalue, options, row){
    	  if(cellvalue == "0"){
    		  return "否";
    	  }else{
    		  return "是";
    	  }
      }
      function formatterPdcModel(cellvalue, options, row){
    	/*   var selectHtml="<a href=\"Pbuyblistmodel.aspx?id="+rowObject.Id+"\">cellvalue</a>"; */
    	if(row.isClose == 1){
    		 var selectHtml="<a href=\"#\">解决</a>";
    	}else{
    		var selectHtml="<a href=\"javascript:void(0)\" οnclick=\"findInfo('"+row.id+"')\">关闭</a>";
    	}
    	  return selectHtml;
      }

//给某个列实现a标签和点击事件

      function formatterPdInfocModel(cellvalue, options, row){
      	  var selectHtml="<a href=\"javascript:void(0)\" οnclick=\"findInfo('"+row.id+"')\">"+cellvalue+"</a>";
      	  return selectHtml;
        }
      
      //传参数id 修改数据 是否关闭
      function findInfo(id){
    	  
    	  var r=confirm("请确实是否已解决!");
    	  if (r==true)
    	    {
    		  $.ajax({
        		  type: "POST",
        		  data:{"id":id}, 
                  url: "${request.contextPath}/pdcallcenter/findOneInfo",
                  dataType: "json",
                  success: function (data) {
                  	if(data.sta == true){
                  		$("#table_list_1").jqGrid('setGridParam', {
                            datatype: 'json',
                            postData: getGridParam("#queryForm2"), //发送数据
                            page: 1
                        }).trigger("reloadGrid"); //重新载入
                  	}
                  },
                  error: function () {
                  }
        	  })
    	    }
    	  else
    	    {
    	    
    	    }
    	  
    	  
      }
      
    </script>





java 代码部分

@RequestMapping(value = "/findlist")
	@ResponseBody
	public Object findinfolist(HttpServletRequest request,Model model,Integer page,Integer rows,String transStatus,
			String isclos,String startTime, String endTime,String head) {
		 Map<String, Object> datalist = new HashMap<>();
	        
	        if (StringUtils.isNotBlank(transStatus)) datalist.put("transStatus", transStatus);
	        if (StringUtils.isNotBlank(isclos)) datalist.put("isclos", isclos);
	        if (StringUtils.isNotBlank(startTime)) datalist.put("startTime", startTime);
	        if (StringUtils.isNotBlank(endTime)) datalist.put("endTime", endTime);
	        if (StringUtils.isNotBlank(head)) datalist.put("head", head);
		
		PageInfo pageinfo=new PageInfo();
		Integer pageNum=0;
		Integer pageSize=0;
		if(page==null || page==0) {
			pageNum=1;
		}else {
			pageNum = page;
		}
		if(rows==null || rows==0) {
			pageSize=10;
		}else {
			pageSize = rows;
		}
		
		pageinfo=pdcallcenterService.findPdCallinfo(pageNum,pageSize,datalist);
		HashMap<String, Object> dataMap = new HashMap<String, Object>();
		PageModel pageModel =new PageModel();
		pageModel.setPage(pageinfo.getPageNum());
		pageModel.setRecords(pageinfo.getPageSize());
		pageModel.setRows(pageinfo.getList());
		pageModel.setTotal(pageinfo.getTotal());
		
		System.out.println(JSON.toJSONString(pageinfo));
		
		return JSON.toJSONString(pageModel);
	}

	

jqgrid里自带有下一页按钮 只需要获取到当前页就行了










  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值