zoukankan      html  css  js  c++  java
  • jquery easyui datagrid 动态 加载列

    实现方式:

    首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid。从而实现类似oracle web版的sql查询。

    前台主要js为:

    Js代码  收藏代码
    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加载数据

  • 相关阅读:
    2.Android之按钮Button和编辑框EditText学习
    《DSP using MATLAB》Problem 3.8
    《DSP using MATLAB》Problem 3.7
    《DSP using MATLAB》Problem 3.6
    《DSP using MATLAB》Problem 3.5
    《DSP using MATLAB》Problem 3.4
    《DSP using MATLAB》Problem 3.3
    《DSP using MATLAB》Problem 3.2
    《DSP using MATLAB》Problem 3.1
    《DSP using MATLAB》Problem 2.20
  • 原文地址:https://www.cnblogs.com/huangf714/p/5854777.html
Copyright © 2011-2022 走看看