项目优化经验分享（一）数据自动匹配

从今天开始，我将和大家分享一下最近经手项目的优化经验。今天我们分享的内容是：自动匹配！

引言：

输入框数据自动匹配大家应该很熟悉，当我们在使用百度或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;
}
}

效果：

总结：

从用户角度出发，以用户为主，越靠近用户的使用习惯，软件亲和力越高，开发的软件越受欢迎！