功能:
类似oracle的web版本的sql查询。
实现方式:
首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid。从而实现类似oracle web版的sql查询。
前台主要js为:
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加载数据
效果图:
见附件
- 大小: 14.3 KB
分享到:
相关推荐
easyUI页面datagrid动态列和form字段动态添加;项目开发时用到的,废了不少事,大概总了一下,现在发出来共享给想我一样的要用到的菜鸟们,谢谢
前台使用Jquery EasyUI 插件datagrid实现多表头动态生成的功能
easyui的datagrid生成合并行,合计计算价格!
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了
1.easyui使用datagrid定制生成一个table,1.数据绑定2.DataGrid的增改删功能3.DataGrid的分页实现4.DataGrid的样式设计先上一张截图,让你大概知道自己需要的功能是否在这张图里有所实现。
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的...
GenerateEasyUiDataGridTemplate通过在类上标记自定义属性,然后自动生成EasyUiDataGrid的显示模板源码供大家参考,代码都是我自己写的,写的烂大家勿喷。代码下载后用vs2012及以上版本打开,然后直接F5即可运行,不...
easyui代码生产器,兼容access/mssql/oracle/mysql/sqlite等数据库,可以生成easyui的tree和datagrid的前台以及后台代码.
通过Spring Initializr快速生成springboot项目+mybatis generator反向生成代码+easyui 的表单设计(增删改查-分页)+ajax异步操作+mysql源数据库+单元测试+详细注解及个人编程的运到困难
easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom操作将生成的展开按钮删除掉,但是...
挺好用的,希望大家能够得到帮助....................................
使用java开发的代码生成工具,主要是自己的项目中用的,可自动生成easyui的datagrid列表,根据实体类生成增加和修改的页面
1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view。比如每一行tr都有id和datagrid-row-index属性等。 1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也...
单个实体类的增删改查,都是通过easyui datagrid实现 实体类中定义了有外键关键字的字段,会自动生成combox的查询和编辑操作控件 实体类中定义了一对多,主从表结构的,系统自动主从表同时编辑操作查询的页面和功能 ...
easyui datagrid可编辑用的包,可以在datagrid生成后在页面对内容进行编辑,然后保存使用
datagrid绑定list没有数据 表头不显示的问题,那是因为 绑定了null,你给list new一下就好 表头就会有啦
4. 一个样例程序,他实现了利用easyui datagrid的列表显示,用了jquery ajax的增删改。 5. 数据验证注解 6. 权限管理系统,他将精确到每个按钮,我们将在过滤器判断权限,你的代码非常简洁,只需要一个数据注解就...
本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。 我们将使用下面的插件: datagrid:向用户展示列表数据。 dialog:创建或编辑一条单一的用户信息。 form:用于提交表单数据。 messager:...
最近使用EasyUI开发后台系统,测试时发现个奇葩的问题,$(‘dg’).datagrid(‘reload’); 重新加载表格数据时,ie下一点反应都没有。后来发现其实并不是没有反应,而是浏览器使用了缓存。 解决方案 网上网友总结...