jquery easyui datagrid 动态 加载列

实现方式:

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

前台主要js为:

  1. function sqlSearch(){
  2. var sqlStatement = $.trim($("#sqlStatementId").val());
  3. if(sqlStatement == null || sqlStatement == ""){
  4. return false;
  5. }
  6. var type = "POST";
  7. var url = "sqlExecCtrl.action?cmd=getColumnNameList";
  8. var param = "sqlStatement=" + $("#sqlStatementId").val();
  9. ajaxExtend(type,url,param,function(data){
  10. var options = $("#sqlResultDisplay").datagrid("options");                   //取出当前datagrid的配置
  11. options.columns = eval(data.columns);                                               //添加服务器端返回的columns配置信息
  12. options.queryParams = getQueryParams("sqlConditionId");             //添加查询参数
  13. $("#sqlResultDisplay").datagrid(options) ;
  14. $("#sqlResultDisplay").datagrid("load") ;                                           //获取当前页信息
  15. });
  16. }
  17. /**
  18. * 根据指定条件请求系统资源
  19. *1、 异步
  20. *2、返回格式为json
  21. *
  22. * @param type          //请求方式
  23. * @param url               //请求url
  24. * @param param     //请求参数
  25. * @param callback      //回调函数
  26. */
  27. function ajaxExtend(type,url,param,callback){
  28. ajaxExtendBase(type,url,param,true,callback);
  29. }
  30. /**
  31. * ajax请求基础方法
  32. * @param type
  33. * @param url
  34. * @param param
  35. * @param async
  36. * @param callback
  37. */
  38. function ajaxExtendBase(type,url,param,async,callback){
  39. $.ajax({
  40. type: type,
  41. url: url,
  42. data:param,
  43. async : async,
  44. dataType:"json",
  45. success:function(result){
  46. if(result.success){                                          //只有sql正确能获取相关列名后才再请求列表资源
  47. callback(result.data);                                  //获取当前页信息
  48. }
  49. else{
  50. dealWithException(result.exception);
  51. }
  52. }
  53. });
  54. }
  55. /**
  56. * 将指定form参数转换为json对象
  57. */
  58. function getQueryParams(conditionFormId){
  59. var searchCondition = getJqueryObjById(conditionFormId).serialize();
  60. var obj = {};
  61. var pairs = searchCondition.split('&');
  62. var name,value;
  63. $.each(pairs, function(i,pair) {
  64. pair = pair.split('=');
  65. name = decodeURIComponent(pair[0]);
  66. value = decodeURIComponent(pair[1]);
  67. obj[name] =  !obj[name] ? value :[].concat(obj[name]).concat(value);              //若有多个同名称的参数,则拼接
  68. });
  69. return obj;
  70. }

后台返回的json格式如下

  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加载数据

上一篇:postgresql的copy


下一篇:利用Merge Into 更新表,集合数据到数据库中