項目優化經驗分享(一)數據自己主動匹配
阿新 • • 發佈:2017-05-18
als 主動 options option reg shee total tomat 功能
從今天開始。我將和大家分享一下近期經手項目的優化經驗。今天我們分享的內容是:自己主動匹配!
引言:
輸入框數據自己主動匹配大家應該非常熟悉,當我們在使用百度或google時,在搜索框中輸入數據,就會得到對應提示,這給我們的搜索帶來了非常大的方便,假如說我要搜索火車票訂票官網。可是我不記得是全稱是什麽,12593?還是12596?,其實。我在搜索框中輸入火車站就能夠看到想要找的站點全稱了,如圖:
如此有用的功能,當然要拿來用到我們自己的系統裏,來看看怎麽實現吧!
思路:
1.引用jquery-easyui封裝好的包。導入到js和css文件。
2.異步獲取數據庫中數據,轉換成Json格式。esayui自己主動匹配。
3.HTML代碼實現;
實現:
1.引用jquery-easyui,導入js和css文件(下載地址),頁面加入引用時註意順序:
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script src="js/Student.js" type="text/javascript"></script> <script src="js/RobCourse.js" type="text/javascript"></script> <script src="js/ajax.js" type="text/javascript"></script> <link href="css/Student.css" rel="stylesheet" type="text/css" /> <link type="text/css" href="css/easyui.css" rel="stylesheet" /> <link type="text/css" href="css/demo.css" rel="stylesheet" />
2.Html代碼
<div id="courseBlock" style="margin-left: 10px;"> <label for="txtCourse">選優先課:</label> <%--<input type="text" id="txtCourse" style="width: 103px; height:22px;border-width:1px;border-bottom:none;background-color:white;" />--%> <input id="txtCourse" name="txtCourse" class="easyui-combobox" data-options="valueField:‘indexing‘,textField:‘coursename‘, method: ‘post‘,url:‘handler/AutoMatchingCourse.ashx?dropCourseCategoryValue=&dropCollegeValue=&dropExistValue=‘" /> <input type="button" id="btnAddCourse" class="btnadd" value="+" /> </div>
3.獲取HTML頁傳過來的參數,並進行處理:
public class AutoParttenCourse : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //實例化表格 DataTable dt = new DataTable(); //實例化當前選課類 ChooseCourseBLL chooseCourse = new ChooseCourseBLL(); //實例化參數實體類 CollegeEntity enCollege = new CollegeEntity(); CourseCategoryEntity enCourseCategory = new CourseCategoryEntity(); CurrentTeachCourseEntity enCurrentTeachCourse = new CurrentTeachCourseEntity(); string dropCourseCategoryValue = context.Request["dropCourseCategoryValue"]; string dropCollegeValue = context.Request["dropCollegeValue"]; string dropExistValue = context.Request["dropExistValue"]; if (dropCourseCategoryValue == null) dropCourseCategoryValue = ""; if (dropCollegeValue == null) dropCollegeValue = ""; if (dropExistValue == null) dropExistValue = ""; //獲得查詢條件 enCourseCategory.CourseCategoryID = dropCourseCategoryValue; enCollege.CollegeID = dropCollegeValue; enCurrentTeachCourse.IsEmpty = dropExistValue; //獲得數據 dt = chooseCourse.QueryCurrentTeachCourseByGroup(enCollege, enCourseCategory, enCurrentTeachCourse); string res = DataTable2JsonCom(dt); context.Response.Write(res); } }4.轉換數據格式:因為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(); jsonBuilder.Append(dt.Columns[j].ColumnName); 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格式 public bool IsReusable { get { return false; } }
效果:
總結:
從用戶角度出發,以用戶為主,越靠近用戶的使用習慣。軟件親和力越高,開發的軟件越受歡迎!
項目優化經驗分享(一)數據自己主動匹配