先上图:
如上图,左边是用easyui做的表格,有查询和分页。点击任一行,会把明细添加到右边供编辑。翻页没问题,选择每页显示行数也没问题。但是当我选择完每页显示的行数以后,再次修改或者新增,后台接受的rows(每页显示行数)就变成了NaN。请问各位老师怎么解决?
html:
<body>
<div style="float:left" >
<table id="list_data_message" title="信息管理" style="width:600px;height:500px" ></table>
</div>
<div style="float:right" >
<div class="easyui-panel" title="信息编辑" style="width:720px;padding:30px 60px;">
<div style="float:left" >
<div id="uguid" style="display:none;"></div>
<div style="margin-bottom:20px">
标题:
<input id="title" name="title" class="easyui-textbox" style="width:150px;height:32px">
</div>
<div style="margin-bottom:20px">
信息类别:
<select id="typeCode" name="typeCode" class="easyui-combobox" >
<option value='0F31F432-0DFE-413C-A872-429BEA9F8E26' selected="selected">流行趋势</option>
<option value='586E0485-C919-4B81-963F-5A3981E2FE2A'>推广引导</option>
<option value='5BC62E88-E9D5-4A08-B086-6B0F41336D87'>行业信息</option>
</select>
</div>
<div style="margin-bottom:20px;">
<div>封面:</div>
<textarea id="cover" id="cover" name="cover" cols="100" rows="8" style="visibility:hidden;">
</textarea>
</div>
<div>
<button id="isok" name="isok" class="easyui-linkbutton" iconCls="icon-ok" style="width:150px;height:32px" onclick="messageManager.submit(1)" >发布信息</button>
</div>
<div>
<button id="ispre" name="ispre"class="easyui-linkbutton" iconCls="icon-save" style="width:150px;height:32px" onclick="messageManager.submit(0)" >保存草稿</button>
</div>
</div>
<div style="float:right">
<textarea id="content" name="content" cols="100" rows="8" style="visibility:hidden;">
</textarea>
</div>
</div>
</div>
<script type="text/javascript">
messageManager.initTextarea();
messageManager.init();
</script>
</body>
js文件:
//加载表格数据
loadMessage :function(){
var Searchtitle = $("#Searchtitle").val();
$('#list_data_message').datagrid({
title: '信息管理',
iconCls: 'icon-save', //图标
loadMsg: "数据加载中,请稍后......",
striped: true,//设置为true交替显示行背景
autoRowHeight: false,//设置为false锁定行高
nowap: true, //列内容多时自动折至第二行
striped: true,//行背景交换
border: true,
collapsible: false, //是否可折叠
fit: false, //自动大小 datagrid自适应宽度
fitColumn: false, //列自适应宽度
url: '/api/message/index?Searchtitle='+Searchtitle,
remoteSort: false,
singleSelect: true, //是否单选
pagination: true, //分页控件
rownumbers: true, //行号
loading: true,
showPageList: true,//定义是否显示页面导航列表。
showRefresh: true,//定义是否显示刷新按钮,
idField: 'uGUID', //主键
selectOnCheck:false,
checkOnSelect:false,
pageNumber: 1, //默认显示第几页
pageSize: 10,
pageList: [5, 10, 15],//用户可以改变页面大小。pageList属性定义了页面导航展示的页码。
//可编辑单元格
//onClickCell: onClickCell,
columns: [[//显示的列
//{ field: 'ck', title: '编号', checkbox: true, align: 'left', sortable: true },
{ field: 'uGUID',title: '编号',hidden:true },
{ field: 'informationTypeGUID',title: '类型编号',hidden:true },
{ field: 'title', title: '标题', align: 'left',width:200},
{ field: 'coverPhoto', title: '封面', align: 'left',width:200,hidden:true},
{ field: 'informationTypeName', title: '信息类型', align: 'left',width:200},
{ field: 'status', title: '状态', align: 'left',width:60},
{ field: 'content', title: '内容', align: 'left',width:200,hidden:true},
]],
onClickRow : function(index, row){
//你要写的逻辑
var row = $('#list_data_message').datagrid('getSelected');
if (row){
$('#title').textbox('setValue',row.title);
$('#uguid').val(row.uGUID);
if(row.informationTypeGUID!=''||row.informationTypeGUID!=null){
$("#typeCode").combobox('select',row.informationTypeGUID);
}
//$("#typeCode").val(row.informationTypeGUID);
kcover.html(row.coverPhoto);
kcontent.html(row.content);
}
},
toolbar: [{
id: 'BtnAddUserInfo',
text: '新增',
iconCls: 'icon-add',
handler: function () {
messageManager.refresh();
}
}, '-', {
id: '',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
var guid = $('#list_data_message').datagrid('getSelected').uGUID;
var data={};
data.guid=guid;
$.ajax({
type : 'POST',
url : '/api/message/delete',
dataType:"json",
contentType:'application/json;charset=UTF-8',
data : JSON.stringify(data),
success : function(){
messageManager.loadMessage();
},
error: function(XMLHttpRequest){
alert( "删除失败: " + XMLHttpRequest.responseText);
}
});
}
}, '-', {
//查询输入框
text: '<input type="text" id="Searchtitle" placeholder="输入信息标题"/>',
}, '-', {
id: '',
text: '查询',
iconCls: 'icon-search',
handler: function () {
messageManager.loadMessage();
}
},
],
});
//分页控件
var p = $('#list_data_message').datagrid('getPager');
$(p).pagination({
//pageNumber: 1, //默认显示第几页
//pageSize: 10,
//pageList: [5, 10, 15],//用户可以改变页面大小。pageList属性定义了页面导航展示的页码。
beforePageText: '第',
afterPageText: '页 共{pages}页',
displayMsg: '当前显示{from}-{to}条记录 共{total}条记录',
/*onBeforeRefresh:function(){
alert('before refresh'); //刷新
},*/
/*onSelectPage:function(pageNumber,pageSize){
alert(pageNumber);//翻页
a*/
buttons: [{
iconCls: 'icon-add',
handler: function () { alert('add') }
}, '-', {
iconCls: 'icon-save',
handler: function () { alert('save') }
}, '-', {
iconCls: 'icon-cut',
handler: function () { alert('AAAA') }
}
]
});
},
java代码(springboot)
/**
* 显示所有信息管理的信息
* @param req
* @param model
* @return
*/
@RequestMapping(value="/index")
public Map<String, Object> findAllMessage(HttpServletRequest req){
String Searchtitle = req.getParameter("Searchtitle");
if(Searchtitle==null||Searchtitle.equals("undefined")){
Searchtitle="";
}
Searchtitle = "%"+Searchtitle+"%";
Integer page = Integer.parseInt(req.getParameter("page"));
Integer rows = Integer.parseInt(req.getParameter("rows"));
List<Map<String, String>> informations = messageService.findAllInformationRelease(Searchtitle,page,rows);
int total = messageService.findCountInformationRelease(Searchtitle);
Map<String, Object> json = new HashMap<>();
json.put("total", total);
json.put("rows", informations);
String jsonarray = JSONArray.toJSONString(informations);
return json;
}
/**
* 添加或修改一条信息
* @param informationRelease
* @return
*/
@RequestMapping(value="/save")
public FerryInfo saveMessage(@RequestBody InformationRelease informationRelease){
FerryInfo ferryInfo = new FerryInfo();
if(informationRelease.getuGUID()==null||"".equals(informationRelease.getuGUID())){
informationRelease.setuGUID(UUID.randomUUID().toString());
informationRelease.setCreator("test");//TODO
informationRelease.setCreateTime(new Date());
}else{
InformationRelease info = informationReleaseDao.findOne(informationRelease.getuGUID());
informationRelease.setCreator(info.getCreator());
informationRelease.setCreateTime(info.getCreateTime());
}
informationRelease.setUpdateMan("test");//TODO
informationRelease.setUdpateTime(new Date());
informationRelease.setUsable(1);
if(informationRelease.getStatus()==1){
informationRelease.setLssueMan("test");//TODO
informationRelease.setLssueTime(new Date());
}
informationReleaseDao.save(informationRelease);
return ferryInfo;
}