easyui datagrid 动态生成列的实现

  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. }  
  19.   
  20. /** 
  21.  * 根据指定条件请求系统资源 
  22.  *1、 异步 
  23.  *2、返回格式为json 
  24.  * 
  25.  * @param type          //请求方式 
  26.  * @param url               //请求url 
  27.  * @param param     //请求参数 
  28.  * @param callback      //回调函数 
  29.  */  
  30. function ajaxExtend(type,url,param,callback){  
  31.     ajaxExtendBase(type,url,param,true,callback);  
  32. }  
  33.   
  34. /** 
  35.  * ajax请求基础方法 
  36.  * @param type 
  37.  * @param url 
  38.  * @param param 
  39.  * @param async 
  40.  * @param callback 
  41.  */  
  42. function ajaxExtendBase(type,url,param,async,callback){  
  43.     $.ajax({  
  44.            type: type,  
  45.            url: url,  
  46.            data:param,  
  47.            async : async,  
  48.            dataType:"json",  
  49.            success:function(result){  
  50.                if(result.success){                                          //只有sql正确能获取相关列名后才再请求列表资源  
  51.                     callback(result.data);                                  //获取当前页信息  
  52.                }  
  53.                else{  
  54.                    dealWithException(result.exception);  
  55.                }  
  56.            }  
  57.     });  
  58. }  
  59.   
  60.   
  61. /** 
  62.  * 将指定form参数转换为json对象 
  63.  */  
  64. function getQueryParams(conditionFormId){  
  65.  var searchCondition = getJqueryObjById(conditionFormId).serialize();  
  66.  var obj = {};  
  67.     var pairs = searchCondition.split('&');  
  68.     var name,value;  
  69.       
  70.     $.each(pairs, function(i,pair) {  
  71.      pair = pair.split('=');  
  72.      name = decodeURIComponent(pair[0]);  
  73.      value = decodeURIComponent(pair[1]);  
  74.        
  75.      obj[name] =  !obj[name] ? value :[].concat(obj[name]).concat(value);              //若有多个同名称的参数，则拼接  
  76.     });  
  77.       
  78.     return obj;  
  79. }  

 

后台返回的json格式如下

Java代码  收藏代码
  1. {"total":3,  
  2. "columns":[[{"field":"ROLE_ID","title":"ROLE_ID","width":100,"resizable":true},  
  3.     {"field":"NAME","title":"NAME","width":100,"resizable":true},  
  4.     {"field":"CREATE_DATE","title":"CREATE_DATE","width":100,"resizable":true},  
  5.     {"field":"DESCRIPTION","title":"DESCRIPTION","width":100,"resizable":true}]],  
  6. "rows":[{"NAME":"普通人员","DESCRIPTION":"只具有查看权限","CREATE_DATE":"2012-09-21 16:31:53.0","ROLE_ID":"7"},  
  7.     {"NAME":"调度人员","DESCRIPTION":"开放全部功能，但无系统管理相关权限","CREATE_DATE":"2012-09-21 16:32:24.0","ROLE_ID":"8"},  
  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加载数据

 

 

效果图：

posted on 2013-05-20 22:47  shenggen  阅读(495)  评论(0)  编辑  收藏  举报

导航