使用jquery-easyui写的简单通用查询

最新推荐文章于 2023-04-25 08:43:58 发布

iteye_2241

最新推荐文章于 2023-04-25 08:43:58 发布

阅读量99

点赞数

分类专栏： jquery 文章标签： jQuery HTML IE ViewUI

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[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代码如下：
[code]
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;
}
[/code]
[/size]

iteye_2241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery-easyui写的简单通用查询

[size=x-large]自己使用jquery-easyui编写的简单通用查询，字段类型未做判断，以后完善。search.html代码如下：[code="java"] 通用查询 body { margin:0; /* 必须 */ border:0; ...
复制链接

扫一扫