`

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

 

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

 

问题描述二: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");   

对应方法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. }  
分享到:
评论

相关推荐

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果,这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用,比如在本例中的“老师分类”和“老师细类”。...

    jquery easyUI

    数据网格是 jQuery EasyUI 中非常重要的一个组件,用于展示和操作表格数据。它可以实现分页、排序、过滤和编辑等功能,并支持远程数据加载。 #### 2.2 对话框(Dialog) 对话框用于显示独立的内容,可以设置为模态...

    jquery.easyui 整站html模板漂亮,兼容性很好

    文件 `jquery-easyui-1.5.2.zip` 可能是 jQuery EasyUI 的一个特定版本,其中包含了框架的完整文件,包括 CSS 样式表、JavaScript 文件以及可能的示例和文档。这个版本号(1.5.2)意味着它是一个稳定版本,经过了多...

    jquery easyui 表头固定 datagrid 弹出框 AJAX刷新页面

    在jQuery EasyUI的datagrid中,可以通过AJAX实现数据的动态加载和刷新,提高用户体验。通常,这涉及到向服务器发送请求获取新数据,然后使用`datagrid('reload')`方法更新表格内容。 5. **源码与工具**: 标签提到的...

    jquery-easyui.zip_easyui框架_html 框架_jquery-easyui

    3. **数据绑定**:EasyUI支持从服务器动态加载数据,例如,Datagrid可以通过Ajax方式获取并显示数据。 4. **事件处理**:利用jQuery的事件监听机制,可以响应用户交互并执行相应的逻辑。 5. **自定义样式**:虽然...

    jquery easyui自己开发的网页实例

    通过研究 `wms.war` 中的代码,参考 `readme.txt` 的指导,并结合系统截图理解界面设计,开发者能够掌握如何使用 jQuery EasyUI 构建高效、美观的Web应用程序。同时,这个实例也强调了组件化开发的优势,使得代码可...

    JqueryEasyUI DataGrid例子

    在 JavaScript 中监听这些事件,向 Servlet 发送相应的请求,并更新 DataGrid 显示的数据。 5. **数据库交互**:Servlet 通常会连接到数据库,使用 SQL 语句执行数据操作。这里假设已经有一个与 DataGrid 对应的...

    0分免费下载jQuery easyui-1.2.5 含Demo 非常好的框架结构

    这个压缩包中的"easyui-1.2.5(1)"文件很可能包含了完整的jQuery EasyUI 1.2.5库文件,包括CSS样式表、JavaScript库、示例代码以及可能的文档。开发者可以通过这些文件快速了解并学习如何使用EasyUI构建项目。对于...

    jquery easyui 增删改查、排序

    2. **读取(Read)**: `datagrid`是EasyUI中用于展示数据的主要组件,它可以与服务器端进行交互,获取并显示数据。你可以配置`url`属性指向数据源,使用`columns`定义列结构,`rowspan`和`sortable`属性则分别用于...

    jQueryeasyui的基础应用_java_java编程_

    前端使用 jQuery EasyUI 的表格组件,通过 AJAX 请求获取这些数据,并动态渲染表格,展示学生的姓名、年龄和班级等信息。 **jQuery EasyUI组件** - **DataGrid**:jQuery EasyUI 的 DataGrid 是一个强大的表格组件...

    jqueryeasyui中文API

    通常会包含一个HTML结构,并通过jQuery EasyUI进行初始化,创建可折叠标签效果。 - **参数**: 参数用于配置Accordion的行为和外观,例如是否默认展开、是否允许关闭等。 - **事件**: Accordion组件的事件包括...

    JqueryEasyUI

    JqueryEasyUI不仅提供了以上组件,还包含了更多如MessageBox(提示框)、NumberBox(数字框)、ValidateBox(验证框)、Pagination(分页)、Window(窗口)、Panel(面板)、Tabs(标签)、Tree(树)、Layout...

    Juery easyUi edatagride

    **jQuery EasyUI eDataGrid** 是一个基于jQuery和EasyUI框架的数据网格组件,它扩展了基本的DataGrid功能,提供了更丰富的特性和交互性。EasyUI是一个轻量级的前端开发框架,它使得构建用户界面变得简单快捷。在这个...

    jqueryeasyui中文培训

    以上就是jQueryEasyUI中文培训文档中涉及的主要知识点概览。这些组件和方法不仅能够帮助开发者快速构建功能丰富的Web应用,而且还能保证良好的用户体验。通过灵活运用这些组件,可以轻松实现复杂的应用逻辑和界面...

    SSH2 + JQuery EasyUI 做的一个对书籍增删改查的例子

    标题中的“SSH2 + JQuery EasyUI 做的一个对书籍增删改查的例子”表明这是一个使用Struts2(SSH框架的一部分)、Spring和Hibernate(SSH框架的另外两个部分)结合JQuery EasyUI创建的Web应用程序示例,主要用于图书...

    JqueryEasyUIDesk 仿360桌面

    **jQueryEasyUI 桌面程序详解** jQueryEasyUI 是一个基于 jQuery 和 EasyUI 的前端开发框架,它为开发者提供了一系列轻量级、易于使用的组件,用于构建具有现代感的 Web 应用程序。在标题提到的 "JqueryEasyUIDesk ...

    jQuery EasyUI

    - **取得选中行数据**:可以通过 EasyUI 获取当前选中的数据行信息。 - **添加工具栏**:数据网格上方可以添加工具栏,用于执行批量操作。 - **创建复杂工具栏**:除了基本的操作按钮外,还可以添加更多的自定义...

    easyui tree扁平化扩展,不用再为children嵌套结构烦恼

    EasyUI Tree是EasyUI框架中的一个组件,用于显示具有层级关系的数据。默认情况下,EasyUI Tree支持加载JSON格式的数据,其中每个节点都可以包含一个`children`属性来表示子节点列表。这种数据结构虽然直观,但在某些...

    jquery-easyui-1.5.5

    在实际应用中,jQuery EasyUI 1.5.5的压缩包文件包含所有必要的资源文件,如CSS样式表、JavaScript库、图片资源等。这些文件的组织结构清晰,便于开发者整合到自己的项目中。例如,`jquery-easyui-1.5.5`目录下的`...

Global site tag (gtag.js) - Google Analytics