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. 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格式如下

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