[size=x-large]
自己使用jquery-easyui编写的简单通用查询，字段类型未做判断，以后完善。
search.html代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通用查询</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="search.js"></script>
<style type="text/css">
body {
margin:0; /* 必须 */
border:0;
height:100%; /* 必须 */
overflow-y:auto;/* 必须 */
}
#filter {display:block; top:10px; left:150px; width:130px; position:fixed;} /* IE并不认识fixed，而FF认识 */
* html #filter {position:absolute;} /* 这个只有IE认识 */
</style>
<script type="text/javascript">
var where = " where 1=1 ";
$(function(){
$('#filter').draggable({edge:5});
$('#filter').hide();
});
function openDiv() {
$('#filter').show();
}
function closeDiv() {
$('#filter').hide();
}
</script>
</head>
<body style="margin:0px">
<a id="opendiv" href="#" class="easyui-linkbutton" onclick="openDiv()">打开高级检索</a>
<a id="closediv" href="#" class="easyui-linkbutton" onclick="closeDiv()">关闭高级检索</a>
<div id="filter" style="margin:10px;padding:10px;width:600px;height:200px;background:#ddd;border:1px solid #ddd;">
<div id="filterTitle" style="background:#ccc;"><!--高级检索-->
<a id="find" href="#" class="easyui-linkbutton" onclick="findData()">开始检索</a>
<a id="add" href="#" class="easyui-linkbutton" onclick="addFilter()">增加</a>
<a id="del" href="#" class="easyui-linkbutton" onclick="delFilter()">删除</a>
<a id="up" href="#" class="easyui-linkbutton" onclick="upFilter()">上移</a>
<a id="down" href="#" class="easyui-linkbutton" onclick="downFilter()">下移</a>
<a id="clear" href="#" class="easyui-linkbutton" onclick="clearFilter()">清除</a>
<a id="closewin" href="#" class="easyui-linkbutton" onclick="closeDiv()">关闭高级检索</a>
</div>
<table id="filterTable" width="600px" border="1" style="font-size:10pt">
<tr>
<th width="50px"> </th>
<!--<th>左括号</th>-->
<th width="100px">字段</th>
<th width="100px">操作符</th>
<th width="200px">内容</th>
<th width="100px">逻辑条件</th>
<!--<th>右括号</th>-->
</tr>
<tbody id="filterContent"></tbody>
<!--<tr></tr>-->
</table>
</div>
</body>
<div id="searchwin"></div>
</html>
search.js代码如下：
var colFilter = [['col1','字段1','n'],['col2','字段2','s'],['col3','字段3','s'],['col4','字段4','s'],['col5','字段5','s'],['col6','字段6','d'],['col7','字段7','s']]
var opFilter = [['=','等于'],['<','小于'],['<=','小于等于'],['>','大于'],['>=','大于等于'],['<>','不等于'],['like','近似于']];
var logicFilter = [['and','并且'],['or','或者']];
var contentId = 0;
function findData() {
where = " where (";
var colname = "";
var coltype = "";
var colRealname = "";
var opname = "";
var text = "";
var logicname = "";
for(var i = 0 ; i < contentId ; i++) {
if($('#checkbox'+i)[0] == undefined)
continue;
if($('#text'+i)[0].value == "") {
$.messager.alert('提示', '请填写查询内容', 'info');
return;
}
colname = $('#col'+i)[0].value;
opname = $('#op'+i)[0].value;
text = $('#text'+i)[0].value;
if(opname == "like") {
text = "%"+text+"%";
}
logicname = $('#logic'+i)[0].value;
coltype = getColType(colname);
colRealname = getColRealname(colname);
switch(coltype) {
case "s":
where += colname + " " + opname + " '" + text + "' " + logicname + " ";
break;
case "n":
if(opname != "like") {
text = parseInt($('#text'+i)[0].value);
if(isNaN(text)) {
$.messager.alert('提示',colRealname+'应输入数字','info');
return;
}
where += colname + " " + opname + " " + text + " " + logicname + " ";
} else {
where += colname + " " + opname + " '" + text + "' " + logicname + " ";
}
break;
case "d":
where += "to_date(to_char(" + colname + ",'yyyy-MM-dd'),'yyyy-MM-dd') " + opname + " to_date('" + text + "','yyyy-MM-dd') " + logicname + " ";
break;
default:
$.messager.alert('提示','出现未知数据类型','info');
return;
}
}
where += "1=1)";
alert(where);
closeDiv();
}
function getColType(col) {
for(var i = 0 ; i < colFilter.length ; i++) {
if(colFilter[i][0] == col) {
return colFilter[i][2];
}
}
return undefined;
}
function getColRealname(col) {
for(var i = 0 ; i < colFilter.length ; i++) {
if(colFilter[i][0] == col) {
return colFilter[i][1];
} else {
return undefined;
}
}
}
function addFilter() {
var html = '<tr id="tr' + contentId + '">';
html += '<td>';
html += '<input type="checkbox" id="checkbox' + contentId + '">';
html += '</td>';
html += '<td>';
html += '<select id="col' + contentId + '" class="easyui-combobox" name="col' + contentId + '" style="width:200px;">';
for(var i = 0 ; i < colFilter.length ; i++) {
html += '<option value="' + colFilter[i][0] + '">' + colFilter[i][1] + '</option>';
}
html += '</select>';
html += '</td>';
html += '<td>';
html += '<select id="op' + contentId + '" class="easyui-combobox" name="op' + contentId + '" style="width:200px;">';
for(var i = 0 ; i < opFilter.length ; i++) {
html += '<option value="' + opFilter[i][0] + '">' + opFilter[i][1] + '</option>';
}
html += '</select>';
html += '</td>';
html += '<td>';
html += '<input type="text" id="text' + contentId + '">';
html += '</td>';
html += '<td>';
html += '<select id="logic' + contentId + '" class="easyui-combobox" name="logic' + contentId + '" style="width:200px;">';
for(var i = 0 ; i < logicFilter.length ; i++) {
html += '<option value="' + logicFilter[i][0] + '">' + logicFilter[i][1] + '</option>';
}
html += '</select>';
html += '</td>';
html += '</tr>';
$('#filterContent').append(html);
$('#op'+contentId).attr('value','like');
if(getColType($('#col'+contentId)[0].value) == "n") {
$('#text'+contentId).bind("keypress",function(sender) {
if(isNaN(parseInt(String.fromCharCode(sender.keyCode)))) {
$.messager.alert('提示','请输入数字','info');
return false;
} else {
}
});
}
$('#col'+contentId).bind('change', contentId, function(sender) {
var colType = getColType(this.value);
switch(colType) {
case "s":
$('#text'+sender.data).unbind('click');
$('#text'+sender.data).unbind('keypress');
break;
case "n":
$('#text'+sender.data).bind("keypress",function(sender) {
if(isNaN(parseInt(String.fromCharCode(sender.keyCode)))) {
$.messager.alert('提示','请输入数字','info');
return false;
} else {
}
});
break;
case "d":
$('#text'+sender.data).bind('click', function(){ WdatePicker(); });
break;
default:
$('#text'+sender.data).unbind('click');
$('#text'+sender.data).unbind('keypress');
}
});
contentId += 1;
}
function delFilter() {
var ischeck = 0;
for(var i = 0 ; i < contentId ; i++) {
if($('#checkbox'+i)[0] == undefined)
continue;
if($('#checkbox'+i)[0].checked)
ischeck += 1;
}
if(ischeck == 1) {
var selectId = 0;
for(var i = 0 ; i < contentId ; i++) {
if($('#checkbox'+i)[0] == undefined)
continue;
if($('#checkbox'+i)[0].checked) {
selectId = i;
break;
}
}
$('#tr'+selectId).remove();
} else {
$.messager.alert('提示', '请选择一条数据', 'info');
}
}
function upFilter() {
$.messager.alert('提示', '该功能已被屏蔽', 'info');
}
function downFilter() {
$.messager.alert('提示', '该功能已被屏蔽', 'info');
}
function clearFilter() {
for(var i = 0 ; i < contentId ; i++) {
if($('#checkbox'+i)[0] == undefined)
continue;
$('#tr'+i).remove();
}
contentId = 0;
}
[/size]
分享到：
相关推荐
所用到的技术有springMVC注解，,jQuery,jQuery-Easyui,JSON,JS技术,Maven技术，Ajax无刷新登录，注册等等，Mybatis技术，还有导出Excel通用方法，通用类有需要的朋友可以下下来直接使用，以及RestFUL风格增删改查，...
jQuery UI 是一个更通用的库，提供了大量的可自定义组件，而jQuery EasyUI则更专注于提供一套完整的、易于使用的预设UI解决方案，它的组件更多是预先配置好的，更适合快速开发。 在压缩包 "jquery-easyui-1.0.5" 中...
【基于jQuery EasyUI的用户管理系统】是一个典型的Web应用程序实例，它利用了jQuery EasyUI这个强大的前端框架来构建用户友好的界面，并结合后端技术（如PHP）处理数据交互。EasyUI是一个基于jQuery的UI库，提供了...
### jQuery EasyUI 中文培训知识点概述 #### 一、Accordion（可折叠标签） **Accordion** 组件是 jQuery EasyUI 框架中的一个重要组件，它可以让网页中的内容以可折叠的方式展示出来，非常适合用于制作导航栏或者...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了网页用户界面开发的复杂性，提供了大量的可重用组件，如对话框、表格、菜单、表单等。1.5.1 版本是该框架的一个稳定版本，包含了之前版本的改进和新特性。 **...
通过上述介绍可以看出，jQuery EasyUI 提供了一系列强大且易于使用的 UI 控件，极大地简化了 web 开发者的工作流程。这些控件不仅可以提升用户体验，还能提高开发效率。无论是初学者还是经验丰富的开发者，都能够...
- **前端交互**：EasyUI使用jQuery的ajax方法发送请求，接收并解析JSON数据，更新DataGrid或表单。 4. **页面布局与组件**： - **Layout**：EasyUI的Layout组件可以方便地构建复杂的页面布局。 - **菜单与导航**...
7. **Demo示例**：提供的"jQuery.easyui.1.2.2 Demo"文件可能包含了大量的示例代码，这些实例展示了如何在实际项目中使用jQuery.easyui，以及各种组件的配置和用法。 理解并深入研究jQuery.easyui的源码，不仅可以...
通用mapper-easyui-SSM框架示例"主要展示了如何在Java环境中利用这些技术构建一个功能完备的后台管理系统，其核心亮点在于MySQL数据库的连接、PageHelper分页插件的使用、通用Mapper的集成以及前端EasyUI的展示。...
综上所述，"oracle-pagehelper-通用mapper-easyui-SSM框架示例"是一个完整的Java Web项目，利用SSM框架连接Oracle数据库，通过PageHelper实现分页查询，通用Mapper简化数据库操作，EasyUI构建用户友好的前端界面。...
非常漂亮的easyui的后台模板，全部是html+js组成！非常漂亮！可以下载学习！
总的来说，这个实例源码是学习jQuery和EasyUI结合使用的一个良好起点，通过阅读和理解代码，你可以掌握如何使用这两种工具来构建数据驱动的Web应用，实现CRUD操作。同时，也能了解到常见的三层架构在Web开发中的应用...
技术特点：asp.net c# eaysui jquery 功能描述： 登录，修改密码，用户管理，组织结构，权限管理，导航菜单，角色管理等。 注意事项： 针对之前的版本进行了调整，因为是几个项目公用，提前出来的，有一些小的bug
在IT行业中，jQuery EasyUI是一个基于jQuery的前端框架，它为开发者提供了丰富的UI组件和便捷的API，使得构建用户界面变得更加简单。这个“jquery-easyui 自定义样式”压缩包显然是针对EasyUI的一个定制化解决方案，...
注：此项目用IntelliJ IDEA 13.1.3编写，所用到的技术有springMVC注解，,jQuery,jQuery-Easyui,JSON,JS技术,Maven技术，Ajax无刷新登录，注册等等，并且赋有非常详细的注释，sql脚本。让你一看即明，在此项目中还...
【EasyUI通用框架源码CSharp】是一个基于C#编程语言和Visual Studio 2012开发环境构建的多层架构应用框架。该框架充分利用了jQuery库和jQuery EasyUI插件，提供了一种高效、易用的方式来构建Web应用程序的用户界面。...
EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了丰富的组件和强大的功能，使得开发者可以快速构建用户界面。在EasyUI中，图标是增强用户界面视觉效果的重要元素，但默认提供的图标集可能无法满足所有设计需求...
【基于EasyUI的通用导出】是一个功能模块，主要用于在使用EasyUI数据网格时实现数据的便捷导出。EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和样式，简化了Web开发中的界面构建工作。在这个场景下，我们...