OpenJweb平台中自定义组合查询条件窗口的实现方式(经典之作)

首先,在父页面中写一个javascript脚本,用来接收组合条件设置窗口的拼装的SQL语句,查询条件子窗口关闭后,javascript将查询条件提交到后台控制层,父页面的javascript:

function doCustQuery()
{
//
var returnvalue =window.showModalDialog( "<%=request.getContextPath()%>/module/platform/compositeQuery.jsp?entityName=${entityClassName}", '组合条件查询', "dialogWidth =800px;dialogHeight = 400px;help=0 ");
// alert(returnvalue+"!!!")
document.listForm.customHql.value=returnvalue;

document.listForm.submit();

}

下面是动态查询条件设置窗口的界面:



说明:最右侧选择并且或或者可以增加新行,查询条件列是当前表的查询条件列,当选择了审批状态,由于审批状态

是数据字典,则计划发布对应的那个iframe自动显示审批状态的取值,对于信息标题,由于没有数据字典,则iframe显示的是输入框,另外每行有一对单引号,表明iframe的值是一个字符串,如果条件列为数字,则去掉一对引号,算术比较符下拉框包含了=,<> ,in ,not in ,is null,is not null,like,>,<等逻辑关系,相信大家看到这个动态查询条件页面后肯定会对大家有莫大的帮助,也许这正是你在网上苦苦寻找的答案,此页面的JSP代码如下:



<%@ page contentType="text/html; charset=GBK"%>
<%@ taglib prefix="ww" uri="webwork" %>
<%@ include file="/common/head.jsp"%>
<%
String entityName =request.getParameter("entityName");

%>
<script language="JavaScript">

<!--
function changeList( len) {
var colname = document.queryForm.elements['conditionCol1'+len].value
var classname = "<%=entityName%>"
var htmlFieldName = "queryValueCol1"
var obj = document.getElementById("selectList"+len);
var url = "<%=request.getContextPath()%>/module/platform/dictlist.jsp?

classname="+classname+"&colname="+colname+"&htmlFieldName="+htmlFieldName
window.frames['selectList'+len].document.location.href= url


}


function addQueryTable()
{
var row1 = queryTable.insertRow(); //插入一行

var cell1=row1.insertCell();
var cell2=row1.insertCell();
var cell3=row1.insertCell();
var cell4=row1.insertCell();
var cell5=row1.insertCell();
var cell6=row1.insertCell();
var cell7=row1.insertCell();
var len = window.queryTable.rows.length
var logicConn ="<select name=col7"+len+" onChange='addQueryTable()' ><option value='' selected=selected>"+
"连接符...</option><option value=' AND '>并且</option><option value=' OR '>或者</option></select>"
var logicComp = "<select name=col6"+len+" ><option value=' = ' selected=selected>等于</option>"+
"<option value=' > '>大于</option><option value=' < '>小于</option><option value=' = '>"+
"等于</option><option value=' <> '>不等于</option><option value=' like '>匹配</option>"+
"<option value=' is null '>为空</option><option value=' is not null '>非空</option><option "+
"value=' in '>包含</option><option value=' not in '>不包含</option></select>"
cell1.innerHTML = "<td align='left' width='8%'><input type='text' name='col1"+len+"' size=11 value='('></td>"; //左括号
var tmpSelect='<%=JspBuffer.getQueryHtmlSelect(entityName,"conditionCol1")%>'
tmpSelect=tmpSelect.replace("conditionCol1","conditionCol1"+len)
tmpSelect=tmpSelect.replace("changeList()","changeList("+len+")")

cell2.innerHTML = "<td align='left' width='20%'>" + tmpSelect +"</td>" ;
cell3.innerHTML = "<td align='left' width='10%'>"+logicComp+"</td>"; //逻辑运算符
cell4.innerHTML = "<td align='right' width='12%'><input type='text' name='col4"+len+"' size=12 value=/""+"'"+"/"

></td>"; //括号
cell5.innerHTML = "<td class='add_content_' width='40%'><div style='HEIGHT: 30px;overflow=auto;' >"+
"<iframe id='selectList"+len+"' src='<%=request.getContextPath()%>/module/platform/dictlist.jsp?className="+

"<%=entityName%>&colname=&htmlFieldName=queryValueCol1' name='selectList"+len+"'"+
" frameborder='0' width='100%' height='100%' scrolling='no' MARGINHEIGHT=5></iframe></div></td>" //查询条件值

cell6.innerHTML = "<td align='left' width='8%'> <input type='text' name='col1"+len+"' size=8 value=/""+"')"+"/"></td>";

// 括号
cell7.innerHTML = "<td align='left' width='8%'>"+logicConn+"</td>"; //逻辑连接符ect>"


}

//获得设置的查询条件
function getCondition( )
{
//alert(window.tb1.rows.length);表格的长度
// alert(document.test.a1. value)
// alert(document.test.conditionCol1 . value)
//获得标签的名字 循环a[i].value 肯定能行
// alert( document.test.getElementsByTagName('input')[1].value)
// alert( document.test.getElementsByTagName('select')[0].value)
var len = window.queryTable.rows.length
//alert(window.queryTable.getElementsByName('col1').value)
//alert(window.queryTable.getElementsByTagName('input')[0].value)
var queryString ="";
for(i=0;i<len;i++)
{

var col1 = window.queryTable.getElementsByTagName('input')[i*3+0].value //左括号
if(col1==null||col1=='null')col1=""

var col2 = window.queryTable.getElementsByTagName('select')[i*3+0].value //获得查询字段名
if(col2==null||col2=='null')col2=""

var col3 = window.queryTable.getElementsByTagName('select')[i*3+1].value //获得逻辑比较符
if(col3==null||col3=='null')col3=""
var col4 = window.queryTable.getElementsByTagName('input')[i*3+1].value //括号
if(col14=null||col4=='null')col4=""
var col5 = window.frames['selectList'+(i+1)].document.dict.queryValueCol1.value //获得iframe中的值
if(col5==null||col5=='null')col5=""

//col5="/'"+col5+"/'"
// alert(col5)
var col6 = window.queryTable.getElementsByTagName('input')[i*3+2].value //括号
if(col6==null||col6=='null')col6=""
var col7 = window.queryTable.getElementsByTagName('select')[i*3+2].value //获得逻辑连接符
if(col3==' like ')col5='%'+col5+'%' //如果是模糊查询，自动增加%
if(col3==' is null '||col3==' is not null ')col5=""; //如果设置了is null和is not null表达式，则后面不需要条件值
if(col3==' is null '||col3==' is not null ')col4="";
if(col3==' is null '||col3==' is not null ')col6=")";
if(col7==null||col7=='null')col7=""
//alert(col5)
if(col2==null||col2==""||col2=='null')
{
//如果col2为空，不再计算条件表达式

break;
}

queryString += col1+col2+col3+col4+col5+col6+col7


}
// alert(queryString)
window.returnValue =queryString;
window.close();

}
-->
</script>




<table width="96%" align="center" class="all">
<tr class="allcontent">
<td class="allcontent">

<ww:form name="queryForm" action = "listPlan">
<fieldset>
<ww:hidden name="operate"/>
<ww:hidden name="serviceMethod" />
<ww:hidden name="queryValueCol1" />

<ww:hidden name="userActionId"/>
<ww:hidden name="actionFlag"/>
<legend></legend>
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" class="query">
<tr class="query_content_">

<td colspan="4" class="query_content_" align="right">
<!--<input type="button" value="新增" onClick="addQueryTable()" class="mybutton">-->

<input type="button" value="执行查询" onClick="getCondition()" class="mybutton">
</tr>
</table>
</fieldset>
<fieldset>
<legend>查询条件设置</legend>
<table width="100%" class="result" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr id="docktr" align="center" class="result_title">
<td nowrap class="result_head_dock" width="10%">括号</td>
<td nowrap class="result_head_dock" width="20%" >查询条件列</td>
<td nowrap class="result_head_dock" width="10%">逻辑运算符</td>
<td nowrap class="result_head_dock" width="10%">括号</td>
<td nowrap class="result_head_dock" width="30%">查询条件值</td>
<td nowrap class="result_head_dock" width="10%">括号</td>
<td nowrap class="result_head_dock" width="10%">逻辑连接符</td>
</tr>
</table>
<div id="FixHeadContainer" style="HEIGHT: 295px;overflow=auto;">
<table width="100%"><tr><td>
<table width="100%" class="result" id="queryTable" border="1" align="center"

cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">


</table>
<script Language="Javascript1.2">
for (i=0;i<queryTable.rows.length;i++) {
(i%2==0)?(table1.rows(i).className = "result_content"):(table1.rows(i).className = "result_content_");
}
document.title="组合查询条件设置";
addQueryTable() ;

</script>
</td></tr>

</table>
</div>
<table width="100%" class="resbutton">
<tr class="resbutton">
</tr>
</table>
</fieldset>
</ww:form>
</td>
</tr>
</table>
<%@include file="/common/tail.jsp"%>