在BOS專案學習過程中使用了easyUI框架，資料基於資料表格顯示出來

$('#grid').datagrid( {
    iconCls : 'icon-forward',
    fit : true,
    border : false,
    rownumbers : true,
    striped : true,
    pageList: [30,50,100],
    pagination : true,
    toolbar : toolbar,
    url : "../../area_pageQuery",
    idField : 'id',
    columns : columns,
    onDblClickRow : doDblClickRow
});
 

通過指定URL從area_pageQuery.action處獲得json格式的資料然後顯示出來。

在進行資料查詢時，如果直接向action傳送請求，返回的查詢結果仍需要通過資料表格顯示，所以考慮將查詢表單中的查詢條件載入到表格資料中，然後又表格資料傳送請求。

1·將查詢表單的資料轉成json格式，這是因為資料表格只能載入json格式的資料

// 自定義的方法，將form表單的資料轉換為json格式
$.fn.serializeJson=function(){  
    var serializeObj={};  
    var array=this.serializeArray();  
    var str=this.serialize();  
    $(array).each(function(){  
        if(serializeObj[this.name]){  
            if($.isArray(serializeObj[this.name])){  
                serializeObj[this.name].push(this.value);  
            }else{  
                serializeObj[this.name]=[serializeObj[this.name],this.value];  
            }  
        }else{  
            serializeObj[this.name]=this.value;   
        }  
    });  
    return serializeObj;  
}; 
 

2.資料表格載入表單資料

// 為查詢按鈕新增事件
  $("#searchBtn").click(function(){

  	// 將表單資料轉換為json格式
  	var params = $("#searchForm").serializeJson();

  	// 資料表格載入引數
  	$("#grid").datagrid('load',params);

  	// 關閉查詢視窗
  	$("#searchWindow").window('close');
  })

以上查詢表單的資料就載入到了資料表格中，查詢結果也可以直接顯示出來。