做条件查询时的小技巧

 

在做查询时，一般我们都是首先选择查询项，如姓名，然后查询值，如“周”进行模糊查询，则所有名字中含有“周”的记录将被查出，如“马周”、“周向宁”等。如果查询项是年份，部门等有固定值的情况呢，要做添加的话，毋庸考虑，是用下拉菜单。如果是查询呢，有的简单的系统可能会用直接令用户输入的方法，这种方法虽然简单易行，但是很不友好，用户会觉得不舒服。

比较友好的界面设计方法应该是当查询项是姓名，名称及类似查询项时，使用文本框输入；如果查询项是年份时则使用下拉菜单。另外还有一个广泛应用于 ERP 系统， OA 系统， MIS 系统等中的按照部门查询，这种情况下有可能是部门会动态增加或减少，那么查询项我们可以有两种设计方法，第一种，尽可能将以后会出现的所有不猛加入下拉菜单；第二种将部门记录从数据库中读出显示在下拉菜单中。

示例代码如下：

 

< script type = "text/javascript" >

       function check()

       {

           var msg = document.getElementById( "searchitem1" );

           if ( 'depName' .match(msg.value))

           {

              document.all( 'showName' ).style.display= "none" ;

              document.all( 'showDep' ).style.display= "block" ;

           }

           else{

              document.all( 'showName' ).style.display= "block" ;

              document.all( 'showDep' ).style.display= "none" ;

              }

          

       }

< form name = "Form" method = "post" >

           < table >

              < tr >

                  < td width = "10%" ></ td >

                  < td >

                     < select name = "query.searchitem1" id = "searchitem1"

                         onclick = "check();" >

                         < option value = "name" >

                            姓名

                         </ option >

                         < option value = "depName" >

                            部门

                         </ option >

                     </ select >

                  </ td >

                  < td >

                     < div id = "showName" style = "display: block;" >

                         < input type = "text" name = "query.searchvalue2" style = "width: 150px" >

                     </ div >

                     < div id = "showDep" style = "display: none;" >

按部门查询的第一种方法       

    < select name = "query.searchvalue1" id = "searchvalue1"

                            style = "width: 150px" >

                            < option value = " 办公室 " >

                                办公室

                            </ option >

                            < option value = " 市场部 " >

                                市场部

                            </ option >

                         </ select >  

按部门查询的第二种方法， departmentlist 为符合查询要求的 department 列表

                  <% < select name = "query.searchvalue2" id = "searchvalue2"

                            style = "width: 150px" >

                            < c:forEach var = "item" items = "${departmentlist}">

                                < option value = "<c:out value='$item.deptName}'/>">

                                   ${item.deptName}

                                </ option >

                            </ c:forEach >

                         </ select >   %>

</ div >

                    

                  </ td >

                  < td >

< input type = "button" name = "button" value=" 查 询 style = "cursor: hand;" />

                  </ td >

              </ tr >

           </ table >