jQuery easyUI動態獲取表結構並顯示錶中的數據）

 

問題描述一：

 

首先根據輸入的sql語句獲得相關的列名稱返回給前臺，然後在datagrid中動態加載列，接着根據查詢條件（包括sql語句）獲取相關的記錄返回給前臺用於填充datagrid。從而實現類似oracle web版的sql查詢。

相關代碼：

1. function sqlSearch(){   
2.     var sqlStatement = $.trim($("#sqlStatementId").val());   
3.     if(sqlStatement == null || sqlStatement == ""){   
4.         return false;   
5.     }   
6.        
7.     var type = "POST";   
8.     var url = "sqlExecCtrl.action?cmd=getColumnNameList";   
9.     var param = "sqlStatement=" + $("#sqlStatementId").val();   
10.            
11.     ajaxExtend(type,url,param,function(data){   
12.         var options = $("#sqlResultDisplay").datagrid("options");                   //取出當前datagrid的配置     
13.         options.columns = eval(data.columns);                                               //添加服務器端返回的columns配置信息     
14.         options.queryParams = getQueryParams("sqlConditionId");             //添加查詢參數  
15.         $("#sqlResultDisplay").datagrid(options) ;                                         
16.         $("#sqlResultDisplay").datagrid("load") ;                                           //獲取當前頁信息  
17.     });   
18. }   

1. /**  
2.  * 根據指定條件請求系統資源  
3.  *1、 異步  
4.  *2、返回格式爲json  
5.  *  
6.  * @param type          //請求方式 
7.  * @param url               //請求url 
8.  * @param param     //請求參數 
9.  * @param callback      //回調函數 
10.  */  
11. function ajaxExtend(type,url,param,callback){   
12.     ajaxExtendBase(type,url,param,true,callback);   
13. }   

1. /**  
2.  * ajax請求基礎方法  
3.  * @param type  
4.  * @param url  
5.  * @param param  
6.  * @param async  
7.  * @param callback  
8.  */  
9. function ajaxExtendBase(type,url,param,async,callback){   
10.     $.ajax({   
11.            type: type,   
12.            url: url,   
13.            data:param,   
14.            async : async,   
15.            dataType:"json",   
16.            success:function(result){   
17.                if(result.success){                                          //只有sql正確能獲取相關列名後纔再請求列表資源  
18.                     callback(result.data);                                  //獲取當前頁信息  
19.                }   
20.                else{   
21.                    dealWithException(result.exception);   
22.                }   
23.            }   
24.     });   
25. }   
26.  

1. /**  
2.  * 將指定form參數轉換爲json對象 
3.  */  
4. function getQueryParams(conditionFormId){   
5.  var searchCondition = getJqueryObjById(conditionFormId).serialize();   
6.  var obj = {};   
7.     var pairs = searchCondition.split('&');   
8.     var name,value;   
9.        
10.     $.each(pairs, function(i,pair) {   
11.      pair = pair.split('=');   
12.      name = decodeURIComponent(pair[0]);   
13.      value = decodeURIComponent(pair[1]);   
14.         
15.      obj[name] =  !obj[name] ? value :[].concat(obj[name]).concat(value);              //若有多個同名稱的參數，則拼接  
16.     });   
17.        
18.     return obj;   
19. }  

後臺返回的json格式如下

 

{"total":3,
"columns":[[{"field":"ROLE_ID","title":"ROLE_ID","width":100,"resizable":true},
    {"field":"NAME","title":"NAME","width":100,"resizable":true},
    {"field":"CREATE_DATE","title":"CREATE_DATE","width":100,"resizable":true},
    {"field":"DESCRIPTION","title":"DESCRIPTION","width":100,"resizable":true}]],
"rows":[{"NAME":"普通人員","DESCRIPTION":"只具有查看權限","CREATE_DATE":"2012-09-21 16:31:53.0","ROLE_ID":"7"},
    {"NAME":"調度人員","DESCRIPTION":"開放全部功能，但無系統管理相關權限","CREATE_DATE":"2012-09-21 16:32:24.0","ROLE_ID":"8"},
    {"NAME":"超級管理員","DESCRIPTION":"具有所有權限","CREATE_DATE":"2012-09-17 20:23:19.0","ROLE_ID":"1"}]}

其中，"columns"對應sqlSearch方法的ajaxExtend(type,url,param,function(data){})回調函數中的data,"total"和"rows"爲datagrid加載數據。

 

問題描述二：jquery easyui datagrid 列自適應窗口寬度

 

主要三種方式：

1. fitColumns: true,/*自動擴大或縮小列的尺寸以適應表格的寬度並且防止水平滾動*/

          使之保持與父類寬度相同

2.設置列寬爲百分比

 

field:'opt',title:'操作',width:$(this).width() * 0.2,align:'center', rowspan:2, 

 

field:'opt',title:'操作',width:$(this).width() * 0.2,align:'center', rowspan:2,

    將width的值設爲百分比，這裏是20%,諸位可以根據自己的實際情況做適當調整。

 

3. 監聽瀏覽器寬度變化，調整datagrid尺寸和佈局

 

  $(window).resize(function(){
$('#tt').datagrid('resize');
});

 

 

後臺代碼實現關鍵代碼：

1. <select id="getTableData" resultClass="java.util.HashMap" parameterClass="java.lang.String">    
2.     <![CDATA[   
3.     SELECT * FROM $tableName$ 
4.     ]]>    
5.    </select>

 

1. public Map<String, Object> getTableData(String tableName) {   
2.     return this.getSqlMapClientTemplate().queryForMap("getTableData", tableName, "tableName");   
4. } 

對應方法API

public java.util.Map queryForMap(java.lang.String id, java.lang.Object parameterObject, java.lang.String keyProp, java.lang.String valueProp)

 

1. public void testGetTableData() {   
2.     Map<String, Object> values1 = this.articleDao.getTableData("one");   
3.     assertNotNull(values1);   
4.        
5.     Map<String, Object> values2 = this.articleDao.getTableData("two");   
6.     assertNotNull(values2);   
7. }