1.在aspx页面内引入相关的js文件和CSS文件。文件具体路径可能有所不同,但要注意js文件引用的先后顺序。
2.为Dropdownlist控件加CSS类easyui-combobox。
3.加入js脚本,让下拉框拥有搜索功能。
//相当于select的onchange事件 $('#<%= ddlManufacturer.ClientID%>').combobox({ onChange: function (newValue, oldValue) { var count = $("#<%= ddlManufacturer.ClientID%> option").length; var ddlFac = document.getElementById("<%= ddlManufacturer.ClientID%>"); for (var i = 0; i < count; i++) { if (ddlFac.options[i].value == newValue) { __doPostBack('<%= ddlManufacturer.ClientID%>', ''); break; } } } });
这个很重要,有这些脚本才能让下拉框有搜索功能。特别注意javascript代码中的onChange,easyui框架屏蔽了客户端HTML <select>标签的onchange事件,asp.net服务器控件dropdownlist默认的SelectedIndexChanged事件也不会触发了。既然不会触发,当然也不会Postback了。那要与服务器交互怎么办?easyui为我们加了这个:onChange:function(oldValue,newValue)。这个function就是下拉框索引改变时调用的函数。这里又要注意了,由于下拉框支持手动输入文字并自动搜索,只要文字改变就会触发这个事件然后调用那个function,newValue就是改变后的值。这就给回发带来了一点麻烦:我们并不需要文字一改变就回发,而是匹配选项才回发,这就有了代码里的for循环判断。__doPostBack这个函数大家应该不陌生了,asp.net服务器控件向服务器回发用的就是这个函数。这样,就实现了带搜索功能的下拉框。写到这里,大家可能觉得大功告成了。没错,一般情况下,这样就可以使用了。不过,还是有点小问题:当你把这个控件放到UpdatePanel里时,每次一回发,dropdownlist的样式都没了,回到了默认的下拉框状态。这是为什么呢?我觉得是因为UpdatePanel局部刷新,并没有将整个页面重新载入,第三步里js代码就没有执行,所以看不到效果了。解决这个问题有个办法,就是在后台事件处理方法中动态插入javascript代码,将以上javascript代码执行一遍就行啦。
- ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "refreshEasyui",
- scripts+ " if(window.reRegisterJS != undefined){reRegisterJS();}", true);
scripts就是第三步里的javascript代码。
至此,真的可以告一段落了。大家也可以把它做成用户控件,方便以后重用。有不合理的地方,欢迎 大家和我交流!
联系客服