<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里自带有下一页按钮 只需要获取到当前页就行了
关于jqGrid 的使用
最新推荐文章于 2021-05-26 09:32:41 发布