項目優化經驗分享（一）數據自動匹配

    從今天開始，我將和大家分享一下最近經手項目的優化經驗。今天我們分享的內容是：自動匹配！

引言：

    輸入框數據自動匹配大家應該很熟悉，當我們在使用百度或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.轉換數據格式：由於Ｂ層獲取的數據是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;
        }
    }

效果：

總結：

    從用戶角度出發，以用戶爲主，越靠近用戶的使用習慣，軟件親和力越高，開發的軟件越受歡迎！