您的位置:首页 > 产品设计 > UI/UE

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;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: