网站页面的优化,专家:核酸检测公司该不该上市,wordpress调用一篇,申请网站就是做网站吗前段时间#xff0c;写一个用户部门的管理页面#xff0c;需要对后台获取的用户数据实现英汉检索功能。 同时#xff0c;选定一个选项之后#xff0c;需要触发事件与后台交互#xff0c;将该用户所在的部门显示到页面右边的ListBox控件中。 一、Dojo的FilteringSelect组… 前段时间写一个用户部门的管理页面需要对后台获取的用户数据实现英汉检索功能。 同时选定一个选项之后需要触发事件与后台交互将该用户所在的部门显示到页面右边的ListBox控件中。 一、Dojo的FilteringSelect组件实现拼音检索功能 在网上有不少相关的介绍其中比较经典的有海盗乱语的关于重写Dojo的FilteringSelect组件实现拼音检索功能的介绍地址http://cosbor.web-144.com/?p38、http://cosbor.web-144.com/?p52。由于作者的Demo后台以及pinyin4j的jar包都是基于Java平台的本人花了一点时间将其实现在.Net平台下并成功的实现了FilteringSelect选中事件的注册。实现原理请详细参考海盗乱语博客中的分析这里对.Net平台下的实现思路做简要说明并贴出源码供大家参考在此对作者提供的思路表示感谢 首先引入Dojo工具包在dojo目录下添加一个test文件夹新建一个FilteringSelect.js文件如下图 FilteringSelect.js文件的作用是重写FilteringSelect组件海盗乱语的博文中给出了的代码清单为方便起见转贴如下 View Code define([dojo/_base/declare, // declare,dojo/dom-attr, // domAttr.getdijit/form/FilteringSelect
], function(declare, domAttr ,FilteringSelect){return declare(test.FilteringSelect, [FilteringSelect], {displayValueAttr:null, //新增一个自定义属性用于指定FilteringSelect的textbox中最终显示内容的属性字段// summary:// 覆盖dijit.form._AutoCompleterMixin的同名方法使FilteringSelect支持displayValueAttr指定textbox最终显示内容而不是默认显示searchAttr指定的字段内容_announceOption: function(/*Node*/ node){if(!node){return;}// pull the text value from the item attached to the DOM nodevar newValue;if(node this.dropDown.nextButton ||node this.dropDown.previousButton){newValue node.innerHTML;this.item undefined;this.value ;}else{var item this.dropDown.items[node.getAttribute(item)];var displayAttr this.displayValueAttr!null?this.displayValueAttr:this.searchAttr;//此处判断是否配置了自定义属性displayValueAttrnewValue (this.store._oldAPI ? // remove getValue() for 2.0 (old dojo.data API)this.store.getValue(item, displayAttr) : item[displayAttr]).toString();//将this.searchAttr替换为displayAttrthis.set(item, item, false, newValue);}// get the text that the user manually entered (cut off autocompleted text)this.focusNode.value this.focusNode.value.substring(0, this._lastInput.length);// set up ARIA activedescendantthis.focusNode.setAttribute(aria-activedescendant, domAttr.get(node, id));// autocomplete the rest of the option to announce changethis._autoCompleteText(newValue);},});
}); 然后新建一个WebForm页面放置一个FilteringSelect控件数据源取值为页面类继承过来的userListstr字段页面前台代码如下 View Code % Page Title LanguageC# AutoEventWireuptrue CodeFileOrgRelation.aspx.cs InheritsOrgRelation %!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlnshttp://www.w3.org/1999/xhtmlhead idHead1 runatservertitle/titlescript srcScripts/jquery-1.4.1-vsdoc.js typetext/javascript/scriptlink hrefScripts/dojo/dijit/themes/claro/claro.css relstylesheet typetext/css /link hrefScripts/dojo/dojo/resources/dojo.css relstylesheet typetext/css /script srcScripts/dojo/dojo/dojo.js typetext/javascript/scriptscript typetext/javascript//参数设置require([test/FilteringSelect,dojo/store/Memory,dojo/domReady!], function (FilteringSelect, Memory) {var jsonstr %userListStr%;var json jQuery.parseJSON(jsonstr);var obj {data:};obj[data] json;var selectStore new Memory(obj);//创建FilteringSelectvar testSelect new FilteringSelect({id: testSelect,name: test,value: ,store: selectStore,searchAttr: py, //指定输入文本框进行用来进行检索的字段labelAttr: name, //指定下拉菜单中显示的字段displayValueAttr: name, //指定选中下拉菜单后显示在输入框中的字段required: false,autoComplete: false}, testSelect);});//注册失去焦点事件window.onload function () {function selblur() {var guid dijit.byId(testSelect).attr(value);alert(guid);window.location.href OrgRelation.aspx?userId guid;return false;}var sel dojo.byId(testSelect);dojo.connect(sel, onblur, selblur);};/script/headbodyform idForm1 methodpost runatserverdiv aligncenter idtitlestrong编辑用户部门关系/strong/divdiv styletext-align: center;width: 100%;padding-top: 100px;font-size:15px;选择用户:input idtestSelect//div/form/body/html 最后在页面加载事件中获取用户数据序列化之后赋给protected类型的userListstr字段。其中这里引用到微软提供的获取汉字拼音的类库ChnCharInfo.dll,代码请单如下 View Code 1 using System;2 using System.Collections.Generic;3 using System.Linq;4 using System.Web;5 using System.Web.UI;6 using System.Web.UI.WebControls;7 using Microsoft.International.Converters.PinYinConverter;8 using System.Text;9 using System.Text.RegularExpressions;
10 using System.Web.Script.Serialization;
11
12 public partial class OrgRelation : System.Web.UI.Page
13 {
14 protected string userListStr string.Empty;
15
16 protected void Page_Load(object sender, EventArgs e)
17 {
18 if (!IsPostBack)
19 {
20 GetUsers();
21 }
22 }
23
24 //与前台页面Json对象格式对应的类
25 public class UserInfo
26 {
27 public string name { get; set; }
28 public string id { get; set; }
29 public string py { get; set; }
30 }
31
32 protected void GetUsers()
33 {
34 //获取用户信息及每项记录的拼音简码
35 ListUser list new BLL.User().GetUsers();
36 ListUserInfo UserInfoList new ListUserInfo();
37 foreach (User item in list)
38 {
39 UserInfo userInfo new UserInfo();
40 userInfo.id item.UserId;
41 userInfo.name item.User Name;
42 userInfo.py GetPY(item.UserName);
43 UserInfoList .Add(userInfo);
44 }
45 JavaScriptSerializer jsonSerializer new JavaScriptSerializer();
46 //执行序列化 并赋值
47 userListStr jsonSerializer.Serialize(UserInfoList);
48 }
49
50 #region 拼音检索的相关方法
51 /// summary
52 /// 获得一个汉字字符的拼音的字符串集合,并处理声调和空值
53 /// /summary
54 /// param namech汉字字符/param
55 /// returns/returns
56 public static Liststring GetPinyins(char ch)
57 {
58 Liststring list new Liststring();
59 ChineseChar cc new ChineseChar(ch); //获得包含汉字信息的对象
60 foreach (string item in cc.Pinyins)
61 {
62 if (item ! null)
63 {
64 string temp item.Substring(0, item.Length - 1);
65 if (!list.Contains(temp))
66 {
67 list.Add(temp);
68 }
69 }
70 }
71 return list;
72 }
73 /// summary
74 /// 得到一个词组的拼音的首字母字符串多音取第一个
75 /// /summary
76 /// returns/returns
77 public static string GetPY(string str)
78 {
79 Regex reg new Regex([\u4e00-\u9fa5]);
80 StringBuilder sb new StringBuilder();
81 for (int i 0; i str.Length; i)
82 {
83 string ch str[i].ToString();
84 if (reg.IsMatch(ch))
85 {
86 string s GetPinyins(str[i])[0];
87 sb.Append(s[0]);
88 }
89 else
90 {
91 sb.Append(ch);
92 }
93 }
94 return sb.ToString();
95 }
96 #endregion
97 } 这样拼音检索的功能就完成了。不过有两点不尽人意的地方1.使用拼音检索后不好再使用中文检索2.网上查了很久没有选中项改变事件介绍代码中只是注册了一个失去焦点事件在与后台交互方面不太方便可能是本人对dojo事件不熟欢迎对dojo api有研究的大侠指点。 二、JqueryUI的autocomplete插件实现拼音检索功能 其实JqueryUI也提供了一个非常好用的插件--autocomplete它与ChnCharInfo.dll类库配合使用不仅能实现同样优秀的检索功能而且能够很好的解决上述两个问题。不妨来看看 需要用到的相关组件和引用的类库Jquery-UI 、汉字拼音转换语言包类库ChnCharInfo .dll和Json对象序列化类库Newtonsoft.Json.dll如下所示 1.WebForm的aspx页面实现 首先引入jquery-1.8.2.js、jquery-ui-1.9.0.custom.js、jquery-ui-1.9.0.custom.css然后在页面加载完成的事件中写如下脚本 1 script typetext/javascript2 $(function () {3 $(#selCompate).autocomplete({4 source: GetUser.ashx,5 minLength: 1,6 //以下为选中事件7 select: function (event, ui) {8 temp ui.item;9 $(#hidUserId).val(temp.id);
10 $(#hidUserName).val(temp.label);
11 $(#form2).attr(action, ./OrgRelation.aspx?contactId temp.id contactName temp.label);
12 $(#form2).submit();
13 }
14 });
15 $(#selCompate).val($(#hidUserName).val())
16 });
17 /script 其中第4行的 source: GetUser.ashx,是指键入字符后发送异步请求的地址GetUser.ashx负责向请求的客户端提供满足Json格式的用户信息第5行的minLength: 是输入到几个字符时开始发送异步请求第7行的select: function(event, ui){}即选中事件ui.item表示被选中的项第8-9行的隐藏域存值是为了页面刷新后能重新获取该选中项的相关信息重新写回页面以备用第10-11行以当前选中项的id和label被为参数向OrgRelation.aspx发送post请求是实现将选中用户的所在部门查询处来显示到页面右侧的ListBox控件中其服务端实现与本次讨论的内容无关代码就不贴出来了。 页面的完整代码清单如下 View Code % Page Title LanguageC# AutoEventWireuptrue CodeFileOrgRelation.aspx.csInheritsOrgRelation%!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head idHead1 runatservertitle/titlescript srcScripts/jquery-1.8.2.js typetext/javascript/scriptscript srcScripts/jquery-ui-1.9.0.custom.js typetext/javascript/scriptlink hrefcss/ui-lightness/jquery-ui-1.9.0.custom.css relstylesheet typetext/css /script typetext/javascript$(function () {$(#selCompate).autocomplete({source: GetUser.ashx,minLength: 1,//以下为选中事件select: function (event, ui) {temp ui.item;$(#hidUserId).val(temp.id);$(#hidUserName).val(temp.label);$(#form2).attr(action, ./OrgRelation.aspx?UserId temp.id UserName temp.label);$(#form2).submit();}});$(#selCompate).val($(#hidUserName).val())});/script
/head
bodyform idform2 methodpost action./OrgRelation.aspx namesendForm/formform idForm1 methodpost runatserver input typehidden idhidUserId namehidUserId value%currentUserId% /input typehidden idhidUserName namehidUserName value%currentUserName%/asp:ScriptManager IDScriptManager1 runatserver/asp:ScriptManagerdiv idoutlinediv aligncenter idtitlestrong编辑用户部门关系/strong/divdiv idmaintable aligncentertrtddivb选择用户:/bnbsp;asp:UpdatePanel IDUpdatePanel2 runatserverContentTemplate
input typetext idselCompate styleline-height: 10px; margin-top: 0px;margin-left: 0px; height: 23px; runatserver //ContentTemplate/asp:UpdatePanelbr /b选择部门/b/divbr //tdtd/tdtd/td/trtrtd valigntop width41%div idleftasp:UpdatePanel IDUpdatePanel1 runatserverContentTemplateasp:TreeView IDTreeViewOrgData runatserver Font-Names微软雅黑 Height385pxFont-Size11pt ForeColorBlack BackColorAliceBlue OnTreeNodeCollapsedTreeViewOrgData_TreeNodeCollapsedOnTreeNodeExpandedTreeViewOrgData_TreeNodeExpanded ShowCheckBoxesAll/asp:TreeView/ContentTemplate/asp:UpdatePanel/div/tdtd aligncenter valignmiddle width18%pasp:Button IDbtnAddOrg runatserver Width85px Text添加部门 Height22pxBorderStyleSolid BorderColorDarkGray BackColorGhostWhite Font-Size9ptOnClickbtnAddOrg_Click/asp:Button/ppasp:Button IDbtnRemoveOrg runatserver Width85px Text 移除部门 Height22pxBorderStyleSolid BorderColorDarkGray BackColorGhostWhite Font-Size9ptOnClickbtnRemoveOrg_Click/asp:Button/p/tdtd valigntop aligncenter width41%div idrightasp:ListBox IDLBOrg runatserver Width300px Height350px Rows13 BackColorAliceBlueFont-Size11pt SelectionModeMultiple /asp:ListBox/div/td/tr/table/divbr /div aligncenter idbottomasp:Button IDbtnBack runatserver Text·返 回· BackColor#f8f8ff /nbsp;nbsp;asp:Button IDbtnSave runatserver Text·保 存· BackColor#f8f8ff onclickbtnSave_Click //div/div/form
/body
/html 2.Global.asax中用户数据的准备 由于这里的用户数据不经常变化考虑到搜索是需要频繁的向服务端请求数据因此将用户数据存入了Application中这样搜索时直接从Application中取不用每次去数据库查询。 Application对象的赋值是在全局应用程序Global.asax的 Application_Start事件中完成的代码如下 void Application_Start(object sender, EventArgs e) {Application.Lock();Application[User] GetUsers();Application.UnLock();} 获取用户信息的GetUser方法中同时完成了拼音简码的获取代码如下 protected Liststring GetUsers(){ListModel.User list new BLL.User().GetUsers();Liststring UserList new Liststring();foreach (Model.User item in list){UserList .Add(item.Id|item.Name|GetPY(item.Name).Replace( ,).ToLower());}return UserList ;}/// summary/// 获得一个汉字字符的拼音的字符串集合,并处理声调和空值/// /summary/// param namech汉字字符/param/// returns/returnspublic static Liststring GetPinyins(char ch){Liststring list new Liststring();Microsoft.International.Converters.PinYinConverter.ChineseChar cc new Microsoft.International.Converters.PinYinConverter.ChineseChar(ch); //获得包含汉字信息的对象foreach (string item in cc.Pinyins){if (item ! null){string temp item.Substring(0, item.Length - 1);if (!list.Contains(temp)){list.Add(temp);}}}return list;}/// summary/// 得到一个词组的拼音的首字母字符串多音取第一个/// /summary/// returns/returnspublic static string GetPY(string str){Regex reg new Regex([\u4e00-\u9fa5]);StringBuilder sb new StringBuilder();for (int i 0; i str.Length; i){string ch str[i].ToString();if (string.IsNullOrEmpty(ch)){}else if (reg.IsMatch(ch)){string s GetPinyins(str[i])[0];sb.Append(s[0]);}else{sb.Append(ch);}}return sb.ToString();} 至于Application与数据库中数据的一致的考虑可提供一个一般处理程序UpdateApplication.ashx负责更新Application(代码与Global.asax中基本相同)当数据库发生变化时访问UpdateApplication.ashx即可更新Application[Contact]对象。 3.GetUser.ashx中返回符合检索条件的数据 GetUser.ashx中响应搜索事件的服务端代码清单如下 1 % WebHandler LanguageC# ClassGetUser %2 3 using System;4 using System.Web;5 using BLL;6 using System.Collections.Generic;7 using System.Text.RegularExpressions;8 using System.Web.Script.Serialization;9 using Microsoft.International.Converters.PinYinConverter;
10
11 public class GetUser :JavaScriptSerializer,IHttpHandler
12 {
13 public void ProcessRequest(HttpContext context)
14 {
15 int i 0;
16 Liststring strlist context.Application[User] as Liststring;
17 string inputStr context.Request.QueryString.Get(term).ToLower();
18 ListUserItem userList new ListUserItem();
19
20 foreach (string str in strlist)
21 {
22 string[] userArr str.Split(|);
23 if (i 10)
24 {
25 Regex reg new Regex(^ inputStr);
26 if (reg.IsMatch(userArr[2]) || reg.IsMatch(userArr[1]))
27 {
28 UserItem item new UserItem();
29 item.id userArr[0];
30 item.label userArr[1];
31 item.value userArr[2];
32 userList.Add(item);
33 i;
34 }
35 }
36 else
37 {
38 break;
39 }
40 }
41
42 context.Response.ContentType application/json;
43 string output Newtonsoft.Json.JsonConvert.SerializeObject(userList);
44 context.Response.Write(output);
45 }
46
47 public bool IsReusable
48 {
49 get
50 {
51 return false;
52 }
53 }
54 }
55
56 public class UserItem57 {
58 public string id { get; set; }
59 public string label { get; set; }
60 public string value { get; set; }
61 } 第17行是获取文本框中输入的检索字符串inputstr这里使用正则表达式对获取名称以inputstr开头的记录中文检索或者拼音简码以inputstr开头的记录拼音检索。如果需要模糊检索功能可以修改第25行的正则表达式为Regex reg new Regex(inputStr);即可。如果需要更多字段的复合检索(例如用户手机号邮箱地址等)也只要Application对像赋值时获取相关的字段信息在26行的if判断中增加相应匹配项即可。 其中UserItem是为页面提供Json对象的类label是必须字段搜索框中显示的内容即该字段的值。得到符合条件的数据集合后需要使用Newtonsoft.Json.JsonConvert的SerializeObject方法进行序列化再返回给客户端。 到此即实现了本文开篇的贴图效果。 转载于:https://www.cnblogs.com/Extreme/archive/2013/02/17/Extreme_ChnCharSearch.html
