在一般网站中,用户输入部分内容后,系统会根据数据库自动匹配相应的输入内容,从而提高用户体验度。这里来分享一下用EasyUI做项目中的自动匹配。
主要思路:
1、通过EasyUI封装好的AJAX,从而异步获取数据库的数据,EasyUI自动进行匹配。
2、一般处理程序+HTML进行实现
项目实现:
一、HTML代码:
<h1>任 务 名 称:<input id="txtWorkName" name="txtWorkName" class="easyui-validatebox" required="true" name="txtWorkName" class="" type="text" /><br /></h1> <h1>发 布 单 位:<input id="txtPublishDepart" name="txtPublishDepart" class="easyui-validatebox" required="true" name="txtPublishDepart" type="text" /><br /></h1> <h1>接 收 部 门:<input id="txtReceiveDepart" name="txtReceiveDepart" class="easyui-combobox" data-options=" url: ‘SearchKeys.ashx?method=GetUnit‘ , //提交到一般处理程序 method: ‘get‘, valueField: ‘departmentname‘, //要匹配的字段后台值 textField: ‘departmentname‘, //从数据库获取的显示值 panelWidth: 350, panelHeight: ‘auto‘, " /> </h1>
二、处理程序:
获取HTML页传过来的参数,从而根据参数执行不同的方法;
/// <summary> /// SearchKeys 的摘要说明 /// </summary> public class SearchKeys : IHttpHandler { private HttpContext context = null; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; this.context = context; string method = context.Request["method"]; switch (method) { case "GetUnit": GetUnit(context); break; default: break; } } //自动补全 private void GetUnit(HttpContext context) { context.Response.ContentType = "json"; string para = context.Request["para"]; //调用B层方法获取数据 EvaluationSystem.BLL.UnitBaseInfoBLL allUnitBll = new UnitBaseInfoBLL(); DataSet dtUnitInfo = allUnitBll.GetList(""); //将DataSet转化成Json格式的数据 String json = Dataset2JsonCom(dtUnitInfo); context.Response.Write(json); }
三、转换数据格式
在B层获取的数据要么是Dataset要么是Datatable,需要转换成Json格式的数据,转换方法:
#region DataSet转换成Json格式 /// <summary> /// DataSet转换成Json格式 /// </summary> /// <param name="ds">DataSet</param> /// <returns></returns> public static string Dataset2JsonCom(DataSet ds, int total = -1) { StringBuilder json = new StringBuilder(); foreach (DataTable dt in ds.Tables) { //json.Append("["); json.Append(DataTable2JsonCom(dt)); //json.Append("]"); //json.Append(""); } return json.ToString(); } #endregion #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string DataTable2JsonCom(DataTable dt, int pid = -1) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { int id = pid; jsonBuilder.Append("\""); dt.Columns[j].ColumnName = dt.Columns[j].ColumnName.ToLower(); if (dt.Columns[j].ColumnName == "Name") dt.Columns[j].ColumnName = "text"; jsonBuilder.Append(dt.Columns[j].ColumnName); if (dt.Columns[j].ColumnName.ToLower() == "id" && id != -1) { jsonBuilder.Append("\":" + (id * 10 + Convert.ToInt32(dt.Rows[i][j])) + ","); } else { jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\","); } } if (dt.Columns.Count > 0) { jsonBuilder.Remove(jsonBuilder.Length - 1, 1); } jsonBuilder.Append("},"); } if (dt.Rows.Count > 0) { jsonBuilder.Remove(jsonBuilder.Length - 1, 1); } jsonBuilder.Append("]"); return jsonBuilder.ToString(); } #endregion dataTable转换成Json格式
实现效果: