easyui datagrid使用
2011-01-04 19:20
411 查看
加载相关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>
<!-- 加载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>
<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');
//页面加载 $(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');
//为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,
。。。。。。
$('#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);
...............
}
//当前页码 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>
<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); }
@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;
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;
相关文章推荐
- easyui datagrid 使用记录
- Easyui datagrid detailview使用
- 使用EasyUi框架的datagrid组件显示时间问题
- EasyUI 笔记(2)datagrid 使用
- easyui datagrid使用detailview无数据无法获取第一次插入的数据
- easyui datagrid使用
- 关于easyui的datagrid与combobox结合使用的问题
- EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
- c#将数据库数据转换为json格式(使用extjs,easyui中的datagrid)
- 使用easyui在ie浏览器下,treegrid,datagrid加载数据很慢,ie浏览器卡住原因
- easyui datagrid 使用代码片段记录
- EasyUI DataGrid 使用(分页,url数据获取,data转json)
- EasyUi Datagrid的基础使用
- EasyUI使用DataGrid向服务器传参
- EasyUi Datagrid的基础使用
- EasyUi Datagrid的基础使用
- 使用easyUI 创建复杂的toolbar到datagrid
- easyui datagrid列中使用tooltip
- easyui的datagrid使用注意事项