jQuery easyUI动态获取表结构并显示表中的数据)
来源:互联网 发布:齐鲁期货软件 编辑:程序博客网 时间:2024/06/05 22:49
问题描述一:
首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid。从而实现类似oracle web版的sql查询。
相关代码:
- function sqlSearch(){
- var sqlStatement = $.trim($("#sqlStatementId").val());
- if(sqlStatement == null || sqlStatement == ""){
- return false;
- }
- var type = "POST";
- var url = "sqlExecCtrl.action?cmd=getColumnNameList";
- var param = "sqlStatement=" + $("#sqlStatementId").val();
- ajaxExtend(type,url,param,function(data){
- var options = $("#sqlResultDisplay").datagrid("options"); //取出当前datagrid的配置
- options.columns = eval(data.columns); //添加服务器端返回的columns配置信息
- options.queryParams = getQueryParams("sqlConditionId"); //添加查询参数
- $("#sqlResultDisplay").datagrid(options) ;
- $("#sqlResultDisplay").datagrid("load") ; //获取当前页信息
- });
- }
- /**
- * 根据指定条件请求系统资源
- *1、 异步
- *2、返回格式为json
- *
- * @param type //请求方式
- * @param url //请求url
- * @param param //请求参数
- * @param callback //回调函数
- */
- function ajaxExtend(type,url,param,callback){
- ajaxExtendBase(type,url,param,true,callback);
- }
- /**
- * ajax请求基础方法
- * @param type
- * @param url
- * @param param
- * @param async
- * @param callback
- */
- function ajaxExtendBase(type,url,param,async,callback){
- $.ajax({
- type: type,
- url: url,
- data:param,
- async : async,
- dataType:"json",
- success:function(result){
- if(result.success){ //只有sql正确能获取相关列名后才再请求列表资源
- callback(result.data); //获取当前页信息
- }
- else{
- dealWithException(result.exception);
- }
- }
- });
- }
- /**
- * 将指定form参数转换为json对象
- */
- function getQueryParams(conditionFormId){
- var searchCondition = getJqueryObjById(conditionFormId).serialize();
- var obj = {};
- var pairs = searchCondition.split('&');
- var name,value;
- $.each(pairs, function(i,pair) {
- pair = pair.split('=');
- name = decodeURIComponent(pair[0]);
- value = decodeURIComponent(pair[1]);
- obj[name] = !obj[name] ? value :[].concat(obj[name]).concat(value); //若有多个同名称的参数,则拼接
- });
- return obj;
- }
后台返回的json格式如下
- {"total":3,
- "columns":[[{"field":"ROLE_ID","title":"ROLE_ID","width":100,"resizable":true},
- {"field":"NAME","title":"NAME","width":100,"resizable":true},
- {"field":"CREATE_DATE","title":"CREATE_DATE","width":100,"resizable":true},
- {"field":"DESCRIPTION","title":"DESCRIPTION","width":100,"resizable":true}]],
- "rows":[{"NAME":"普通人员","DESCRIPTION":"只具有查看权限","CREATE_DATE":"2012-09-21 16:31:53.0","ROLE_ID":"7"},
- {"NAME":"调度人员","DESCRIPTION":"开放全部功能,但无系统管理相关权限","CREATE_DATE":"2012-09-21 16:32:24.0","ROLE_ID":"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');
});
后台代码实现关键代码:
- <select id="getTableData" resultClass="java.util.HashMap" parameterClass="java.lang.String">
- <![CDATA[
- SELECT * FROM $tableName$
- ]]>
- </select>
- public Map<String, Object> getTableData(String tableName) {
- 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)
- public void testGetTableData() {
- Map<String, Object> values1 = this.articleDao.getTableData("one");
- assertNotNull(values1);
- Map<String, Object> values2 = this.articleDao.getTableData("two");
- assertNotNull(values2);
- }
- jQuery easyUI动态获取表结构并显示表中的数据)
- EasyUI动态显示后台数据库中的数据
- Jquery-easyui中的datagrid插件读取数据库中得数据并显示
- JQuery 获取数据列表并显示
- jquery easyui combogrid 获取本地数据并设默认值
- jQuery-easyui中的combobox如何动态获取下拉框内容
- easyui动态获取combobox显示
- jQuery EasyUI中的datagrid无法显示json数据
- jquery获取JSON并动态创建标签显示JSON内容
- JQuery EasyUI 使用数据网格显示json数据(8)
- JS动态添加表行,并验证数据,获取数据。
- 获取并显示数据
- 动态创建表并添加数据最后用reporting显示
- 动态创建表并添加数据最后用reporting显示
- Jquery EasyUI 获取其他文件数据(4)
- easyui动态加载表格并绑定数据
- easyui-tree动态获取后台数据成为书结构的操作
- easyui treegrid 显示数据没有树状结构
- 八、Oracle数据库之学习笔记---Oracle的表的基本查询(5)
- Linux 下 mysql 数据库结构目录
- NYOJ - 回文字符串(DP)
- C primer plus第14章(结构和其他数据形式)(练习)
- linux 网络社区
- jQuery easyUI动态获取表结构并显示表中的数据)
- 工程师和研究生的专业方向
- json遍历获取KEY
- 内核,initrd,ramdisk,关系,用途
- JSON的范例
- 各种移动开源GIS
- ARM-Linux学习过程问题集锦
- c++ 生成随机数、计算运行时间
- 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作。拦截是AOP的一种实现策略。