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. }