easyui datagrid使用

加載相關js和css，因爲easyui依賴jquery，所有加載easyui前要先加載jquery，否則爲提示找不到datagrid

 

 

<!-- 加載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>

 

界面加入

 

 

<table id="cxdm"></table>

 

加載datagrid的js代碼

 

 

//頁面加載
$(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添加參數的方式

//爲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中

$('#repeatpspolal').datagrid({
     title:'重複的未初分提案',
     loadMsg:"數據加載中，請稍後……",
     region:'north',
     url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,
。。。。。。

 

Action層

 

//當前頁碼
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

 

<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層

 

@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即可，形式如下：

 

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;