easyui datagrid使用数据刷新
2014-06-10 17:03
375 查看
加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid
Html代码
<!-- 加载jquery -->
<script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
<!-- 加载jquery-easyui -->
<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
<script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>
界面加入
Html代码
<table id="cxdm"></table>
加载datagrid的js代码
Java代码
//页面加载
$(document).ready(function(){
loadGrid();
});
//加载表格datagrid
function loadGrid()
{
//加载数据
$('#cxdm').datagrid({
width: 'auto',
height:300,
striped: true,
singleSelect : true,
url:'getPsNewConsultList.action',
//queryParams:{},
loadMsg:'数据加载中请稍后……',
pagination: true,
rownumbers: true,
columns:[[
{field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},
{field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),
//添加超级链,并将来文号作为参数传入
formatter:function(val,rec){
//alert(rec.adviceid);
return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";
}
},
{field:'content',title: '状态',align: 'center',width: getWidth(0.2)},
{field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}
]]
});
}
//为loadGrid()添加参数
var queryParams = $('#cxdm').datagrid('options').queryParams;
queryParams.who = who.value;
queryParams.type = type.value;
queryParams.searchtype = searchtype.value;
queryParams.keyword = keyword.value;
//重新加载datagrid的数据
$("#cxdm").datagrid('reload');
datagrid添加参数的方式
Js代码
//为loadGrid()添加参数
var queryParams = $('#cxdm').datagrid('options').queryParams;
queryParams.who = who.value;
queryParams.type = type.value;
queryParams.searchtype = searchtype.value;
queryParams.keyword = keyword.value;
//重新加载datagrid的数据
$("#cxdm").datagrid('reload');
或者直接添加在url中
Js代码
$('#repeatpspolal').datagrid({
title:'重复的未初分提案',
loadMsg:"数据加载中,请稍后……",
region:'north',
url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,
。。。。。。
Action层
Java代码
//当前页码
private int page;
.........
//征询意见结果集
private List<Object> rows;
...........
@SuppressWarnings("unchecked")
public String getPsNewConsultList() throws GlobalException {
//获取每页显示的行数
int pageRows=10;
if(null!=request.getParameter("rows")) {
pageRows=Integer.parseInt(request.getParameter("rows").toString());
}
...........
//获取结果集
this.setRows(proposalService.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows*(page-1)+1,pageRows*page));
//获取总记录数
this.setTotal(100);
...............
}
其中的page由datagrid传入,当用户在datagrid左下角选择每页显示的行数时,datagrid会将该值已参数形式附加到url后面传入action中,名字就叫page,还要将结果总行数total传给datagrid,用于分页
不知道是datagrid配置有误还是datagrid的bug,datagrid的结果集和每页显示的行数都叫rows,重名了
解决办法如上,结果集还是叫rows,但是List的类型改为Object而不能用实体的类型,每页显示的行数通过request获取
action配置时,要继承json-default,json-default继承自struts-default,还要配置输出结果类型为json
Java代码
<action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList">
<result name="success" type="json">
<param name="includeProperties">
^rows\[\d+\]\.\w+,total
</param>
<param name="noCache">true</param>
<param name="ignoreHierarchy">false</param>
</result>
</action>
service层
Java代码
@SuppressWarnings("unchecked")
public List getPsNewConsultList(String consulter,String consultee,String type,String psId,String psContent,int pageRows,int page) throws Exception {
return proposalDAO.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows,page);
}
dao层只需要将ResultSet中的数据循环加入实体属性,然后将实体实例加入List即可,形式如下:
Java代码
List<Person> list=new ArrayList<Person>();
Person person=null;
while(rs.next())
{
person=new Person();
person.setId(i);
person.setName("名字"+i);
list.add(person);
}
.........
return list;
Html代码
<!-- 加载jquery -->
<script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
<!-- 加载jquery-easyui -->
<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
<script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>
界面加入
Html代码
<table id="cxdm"></table>
加载datagrid的js代码
Java代码
//页面加载
$(document).ready(function(){
loadGrid();
});
//加载表格datagrid
function loadGrid()
{
//加载数据
$('#cxdm').datagrid({
width: 'auto',
height:300,
striped: true,
singleSelect : true,
url:'getPsNewConsultList.action',
//queryParams:{},
loadMsg:'数据加载中请稍后……',
pagination: true,
rownumbers: true,
columns:[[
{field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},
{field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),
//添加超级链,并将来文号作为参数传入
formatter:function(val,rec){
//alert(rec.adviceid);
return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";
}
},
{field:'content',title: '状态',align: 'center',width: getWidth(0.2)},
{field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}
]]
});
}
//为loadGrid()添加参数
var queryParams = $('#cxdm').datagrid('options').queryParams;
queryParams.who = who.value;
queryParams.type = type.value;
queryParams.searchtype = searchtype.value;
queryParams.keyword = keyword.value;
//重新加载datagrid的数据
$("#cxdm").datagrid('reload');
datagrid添加参数的方式
Js代码
//为loadGrid()添加参数
var queryParams = $('#cxdm').datagrid('options').queryParams;
queryParams.who = who.value;
queryParams.type = type.value;
queryParams.searchtype = searchtype.value;
queryParams.keyword = keyword.value;
//重新加载datagrid的数据
$("#cxdm").datagrid('reload');
或者直接添加在url中
Js代码
$('#repeatpspolal').datagrid({
title:'重复的未初分提案',
loadMsg:"数据加载中,请稍后……",
region:'north',
url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,
。。。。。。
Action层
Java代码
//当前页码
private int page;
.........
//征询意见结果集
private List<Object> rows;
...........
@SuppressWarnings("unchecked")
public String getPsNewConsultList() throws GlobalException {
//获取每页显示的行数
int pageRows=10;
if(null!=request.getParameter("rows")) {
pageRows=Integer.parseInt(request.getParameter("rows").toString());
}
...........
//获取结果集
this.setRows(proposalService.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows*(page-1)+1,pageRows*page));
//获取总记录数
this.setTotal(100);
...............
}
其中的page由datagrid传入,当用户在datagrid左下角选择每页显示的行数时,datagrid会将该值已参数形式附加到url后面传入action中,名字就叫page,还要将结果总行数total传给datagrid,用于分页
不知道是datagrid配置有误还是datagrid的bug,datagrid的结果集和每页显示的行数都叫rows,重名了
解决办法如上,结果集还是叫rows,但是List的类型改为Object而不能用实体的类型,每页显示的行数通过request获取
action配置时,要继承json-default,json-default继承自struts-default,还要配置输出结果类型为json
Java代码
<action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList">
<result name="success" type="json">
<param name="includeProperties">
^rows\[\d+\]\.\w+,total
</param>
<param name="noCache">true</param>
<param name="ignoreHierarchy">false</param>
</result>
</action>
service层
Java代码
@SuppressWarnings("unchecked")
public List getPsNewConsultList(String consulter,String consultee,String type,String psId,String psContent,int pageRows,int page) throws Exception {
return proposalDAO.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows,page);
}
dao层只需要将ResultSet中的数据循环加入实体属性,然后将实体实例加入List即可,形式如下:
Java代码
List<Person> list=new ArrayList<Person>();
Person person=null;
while(rs.next())
{
person=new Person();
person.setId(i);
person.setName("名字"+i);
list.add(person);
}
.........
return list;
相关文章推荐
- [英语博客广告系列]使用CallbackEventHandler无刷新更改页面数据
- [转]使用showModalDialog打开模态窗口添加数据后刷新原窗口
- 使用Jquery EasyUi常见问题解决方案 刷新 easyui datagrid 数据
- 使用showModalDialog打开模态窗口添加数据后刷新原窗口 .
- jsp中如何避免客户端浏览器在刷新时,使用缓存的数据
- 使用Dojo实现页面不刷新提交数据
- 使用水晶报表不刷新数据的问题
- 使用Dojo实现页面不刷新提交数据
- 使用dm构建增量刷新的数据仓库
- flex 4.0 解决在MODULE中使用timer实时刷新数据,卸载MODULE后还在执行的问题
- 使用服务端事件委托机制来防止页面重复提交数据或客户端浏览器使用(F5)刷新提交数据
- .NET 使用 Ajax 无刷新更新数据
- 使用showModalDialog打开模态窗口添加数据后刷新原窗口
- 使用UltraWebTree时,如何在刷新后展开之前选中的节点,并绑定相关数据
- 在ascx中使用DropDownList绑定数据页面刷新时变空的问题
- 使用Dojo实现页面不刷新提交数据
- 使用bindingsource数据绑定时datagridview单元格无法及时刷新的问题
- 使用 AJAX,局部刷新 GridView 进行数据绑定的简单实现
- flex datagrid 的级联更新 , 使用itemUpdated不刷新数据.更新视图
- 使用AJAX刷新网页数据