ITPub博客

首页 > Linux操作系统 > Linux操作系统 > COOLITE的COMBOBOX智能检索应用指南

COOLITE的COMBOBOX智能检索应用指南

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-07-30 19:19:29 0 删除 编辑


下面是演示效果,请欣赏.


通过在输入区中输入要筛选的内容,将会自动匹配出你要找的记录.
但对于我们赛选条件更复杂的记录,该如何找寻呢? 我们可以点击右侧的"..."
接着就会出现下图

只要左键点击记录,此记录就会返回到之前的输入框中.

我们来看看代码如何实现
首先是Hander文件,做出处理自动检索的后台服务方法,
通过传递过来的筛选条件,调用做好的分页方法,去过滤出记录..

 


 1    [WebService(Namespace = "http://tempuri.org/")]
 2     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 3     public class HospitalHandler : IHttpHandler
 4     {
 5 
 6         public void ProcessRequest(HttpContext context)
 7         {
 8             context.Response.ContentType = "text/plain";
 9             int start = 0;
10             int limit = 10;
11             string sort = string.Empty;
12             string dir = string.Empty;
13             string query = string.Empty;
14 
15             if (!string.IsNullOrEmpty(context.Request["start"]))
16             {
17                 start = int.Parse(context.Request["start"]);
18             }
19 
20             if (!string.IsNullOrEmpty(context.Request["limit"]))
21             {
22                 limit = int.Parse(context.Request["limit"]);
23             }
24 
25             if (!string.IsNullOrEmpty(context.Request["sort"]))
26             {
27                 sort = context.Request["sort"];
28             }
29 
30             if (!string.IsNullOrEmpty(context.Request["dir"]))
31             {
32                 dir = context.Request["dir"];
33             }
34 
35             if (!string.IsNullOrEmpty(context.Request["query"]))
36             {
37                 query = context.Request["query"];
38             }
39             string strwhere = "";
40             int count;
41             if (query != "*")
42             {
43                 strwhere = "FullName like '%" + query + "%'";
44             }
45 
46             List<V_HospitalInfo> hospitals = V_HospitalController.Current.GetPaged(strwhere, "FullName  ASC", start, limit, out count);
47             context.Response.Write(string.Format("{{totalCount:{1},'datas':{0}}}", JSON.Serialize(hospitals), count));
48 
49         }
50 
51         public bool IsReusable
52         {
53             get
54             {
55                 return false;
56             }
57         }
58     }
59 
60 


然后是前台的代码


<ext:Store runat="server" AutoLoad="false" ID="stoHospital"> 
            
<Reader> 
            
<ext:JsonReader Root="datas" TotalProperty="totalCount"> 
            
<Fields> 
            
<ext:RecordField Name="HospitalID" /> 
            
<ext:RecordField Name="FullName" /> 
            
<ext:RecordField Name="CityText" /> 
            
<ext:RecordField Name="AreaText" /> 
           
            
Fields> 
            
ext:JsonReader> 
            
Reader> 
        
ext:Store> 
看过Coolite的Custom Search范例的可能会问了,ext:HttpProxy 怎么没写?
其实本人是在DNN框架下使用的,所以这个文件的定位我写到了.cs代码中

HttpProxy httpProxy = new HttpProxy();
                httpProxy.Url 
= this.ModulePath + "http://www.cnblogs.com/VAP.Modules.Hospital/VAP.Modules.Hospital.HospitalAccount/HospitalHandler.ashx";
                httpProxy.Method 
= HttpMethod.POST;
                
this.stoHospital.Proxy.Add(httpProxy);
                stoHospital.DataBind();
当然,如果每此必要,你也可以像官网范例中,直接写上如。
<ext:Store runat="server" ID="Store1">
            
<Proxy>
                
<ext:HttpProxy Method="POST" Url="Plants.ashx" />
            
Proxy>


下面是Combobox的代码

Code
<script type="text/javascript">
        
var PopupSelectHospital = function(combobox,hidfield)
    {
    openHospital(combobox,hidfield);
    }
        
  
script>
<style type="text/css">
        .search-item 
{
            font
: normal 11px tahoma, arial, helvetica, sans-serif;
            padding
: 3px 10px 3px 10px;
            border
: 1px solid #fff;
            border-bottom
: 1px solid #eeeeee;
            white-space
: normal;
            color
: #555;
        
}
        
        .search-item h3 
{
            display
: block;
            font
: inherit;
            font-weight
: bold;
            color
: #222;
        
}

        .search-item h3 span 
{
            float
: right;
            font-weight
: normal;
            margin
: 0 0 5px 5px;
            width
: 180px;
            display
: block;
            clear
: none;
        
} 
        
        p 
{ width: 650px; }
        
        .ext-ie .x-form-text 
{ position: static !important; }
    
style>
<ext:Hidden runat="server" ID="hidHospital">ext:Hidden>
<ext:ComboBox
                     
ID="cboHospital" 
                      runat
="server"
                      FieldLabel
="医院"
                       StoreID
="stoHospital"
                        DisplayField
="FullName" 
                        ValueField
="HospitalID"
                         TypeAhead
="true" 
                         LoadingText
="查找中"
                        PageSize
="10"
                        ItemSelector
="div.search-item"        
                        MinChars
="0" >
                        
<Template>
                        
<tpl for=".">
                              
<div class="search-item">
                                 
<h3><span>城市:{CityText}span>{FullName}h3>
                                    地区:{AreaText}
                              
div>
                            
tpl>
                        
Template>
                            
<Triggers>
                                
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                
<ext:FieldTrigger Icon="Ellipsis" Qtip="选择医院" />
                            
Triggers>
                            
<Listeners>
                                
<Select Handler="this.triggers[0].show();" />
                                
<Blur Handler="#{hidHospital}.setValue(this.getValue());" />
                                
<BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                
<TriggerClick Handler="if(index == 0) {this.clearValue();#{hidHospital}.setValue('');this.triggers[0].hide(); }else if(index==1){PopupSelectHospital(this,#{hidHospital});}" />
                            
Listeners>
                    
ext:ComboBox>
要点
1.建立了两个Trigger,一个处理清空内容(所检索到的记录或者弹出查找到的记录), 另一个就是弹出新页面检索记录.
  Listeners几个事件就是针对是否隐藏"清空"按键的判断逻辑
2.仔细看,有一个ext:Hiddren, 真是一个关键点,其实本来根本没必要使用多一个Hiddren, 因为Combobox中的,Value和Text,就可以分别对应
一个显示值,和一个实际值,。。  我们从检索的下来框中选中的记录,也可以直接回填上这两个值,   但是实际上,我们使用SetValue想手动赋值给Combobox
值和显示值时,就发现,Value和Text都会被设置成同样的一个内容,我们不可能单独的修改掉其中一个,我们回传给检索框变得困难了,这使的应用起来相当麻烦.
google上也找到一些Ext下的偏门,但是本人没有试成功,所以,干脆,就用一个Hiddren单独存放这种实际值,再在一些Listeners中把值传递给Hiddren.

好的,我们看看.cs代码.

读取时:

if (objPolicy.HospitalID != Null.NullGuid)
            {

                hidHospital.Value 
= objPolicy.HospitalID.ToString();
                cboHospital.SetValue(objPolicy.HospitalFullname);
                cboHospital.ShowTrigger(
0);
            }
            
else
            {
                cboHospital.ConcealTrigger(
0);
                cboHospital.Triggers[
0].HideTrigger = true;
                cboHospital.SetValue(
"");
                
            }
ShowTrigger是显示Trigger,
ConcealTrigger是隐藏Trigger,
这个是隐藏那个"清空"的
更新时:

if (!string.IsNullOrEmpty(this.hidHospital.Value.ToString()))
            {
                objPolicy.HospitalID 
= new Guid(this.hidHospital.Value.ToString());
            }
            
else
            {
                objPolicy.HospitalID 
= Null.NullGuid;
            }

下面是弹出的window代码

<script type="text/javascript">
    
var hidCtrl;
    
var hidID;
    
var openHospital = function (Ctrl,Hid) {
        hidCtrl
=Ctrl;
        hidID
=Hid;
        
var window = <%= HospitalWindow.ClientID %>;
        window.show();
    }
    
    
    
var cellclickHospital = function (grid , rowIndex,columnIndex, e) {
        
var columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id
        var record = grid.getStore().getAt(rowIndex);  // Get the Record
        if (columnId != 'EditColumn')
        {
            
<%= HospitalWindow.ClientID %>.hide(null);
            hidCtrl.setValue(record.data[
'FullName']);
            hidID.setValue(record.data[
'HospitalID']);
            
            hidCtrl.triggers[
0].show();   
        }
    }

script>


GridPanel中写入
    
<Listeners>
    
<CellClick Fn="cellclickHospital"/>
    
Listeners>

到这,就能实现一个功能健全的自动检索了

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-610892/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5297316