项目经历——EasyUI的检索和更新操作
什么事都耐不住“磨”？！
比如一个让人很头疼的问题，对于项目中所用到的EasyUI框架就是一个很明显的感受。项目使用的EasyUI框架，自身封装好的样式使得开发者不用考虑具体的div和css样式了，但是却折腾的接手项目不久的我们。那谁说的，生命不息，折腾不止，今天也来折腾一下EasyUI的简单操作——对EasyUI的增删改查。
业务分析：
1、页面加载的时候，从数据库对应的表或视图中检索对应的记录显示在页面上面；
2、设置时间或者通过不通过条件，可以根据设置的条件显示具体的数据
3、单击认证，将审阅状态和是否认证都修改成Yes，取消认证则将两者修改成No；
功能实现：
查询操作：
Html代码：
<%--表格显示区--%>
<table id="tt" title="审核日志信息" class="easyui-datagrid" style="width: auto; height: 370px" idfield="itemid" pagination="true" iconcls="icon-save"
data-options="rownumbers:true,url:'ExamineVerifyLog.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb' ," fitcolumns="true" striped="true">
<%-- 表格标题--%>
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'RealName',width:100">用户名</th>
<th data-options="field:'Title',width:120,align:'right'">日志标题</th>
<th data-options="field:'PublishDate',width:100">时间</th>
<th data-options="field:'ExamineSign',width:100">审阅状态</th>
<th data-options="field:'ExamineMessage',width:100">通知</th>
<th data-options="field:'ExamineSign',width:60,align:'left'">是否认证</th>
</tr>
</thead>
<input type="hidden" id="test" name="test" />
</table>
<%--工具栏-包括按时间查找、按是否通过代码审核查找、查找按钮--%>
<div id="tb" style="padding: 5px; height: auto">
<div>
时间从:
<input id="StartTime" name="StartTime" class="easyui-datebox" style="width: 100px" />
到:
<input id="EndTime" name="EndTime" class="easyui-datebox" style="width: 100px" />
机器审核:
<select class="easyui-combobox" id="Category" name="Category" panelheight="auto" style="width: 100px">
<option value="Yes">通过</option>
<option value="No">未通过</option>
</select>
<a href="#" class="easyui-linkbutton" iconcls="icon-search" onclick="reloadgrid()">Search</a>
<a href="#" id ="renzheng" class="easyui-linkbutton" iconcls="icon-add" style="margin-left: 360px" onclick="modify('Yes')">认证</a>
<a href="#" id="cancelrenzheng" class="easyui-linkbutton" iconcls="icon-remove" onclick="modify('No')">取消认证</a>
</div>
</div>
//查询并把数据传递给后台，数组
function getQueryParams(queryParams) {
var StartTime = $("#StartTime").datebox("getValue");
var EndTime = $("#EndTime").datebox("getValue");
//var KeyWord = document.getElementById("KeyWord").value;
var Category = $("#Category").combobox("getValue");
queryParams.StartTime = StartTime;
queryParams.EndTime = EndTime;
//queryParams.KeyWord = KeyWord;
queryParams.Category = Category;
return queryParams;
}
//增加查询参数，重新加载表格
function reloadgrid() {
//查询参数直接添加在queryParams中
var queryParams = $('#tt').datagrid('options').queryParams;
getQueryParams(queryParams);
$('#tt').datagrid('options').queryParams = queryParams;//传递值
//alert(queryParams.Category);
$("#tt").datagrid('reload');//重新加载table
}
这里都是EasyUI封装好的数据显示区和检索功能区。注意事项：
1、table中的 url:'ExamineVerifyLog.ashx/ProcessRequest', 是要引用的一般处理程序
2、pageSize:5,pageList:[5,10,15,20] 是设置每页显示的数量
3、"field:'要绑定的数据 '用来绑定自己数据库对应的字段，其中的样式居中等可以自行设置。
4、查询传递参数，应该和工具栏区的控件ID名称 保持一致。
一般处理程序：
//声明B层类 userLogBLL userlog = new userLogBLL();
public void ProcessRequest(HttpContext context)
{
string command = context.Request.QueryString["test"];
if (command == null)
{
Query(context);
}
if (command == "modify")
{
Modify(context);
}
else
{
Query(context);
}
}
//查询显示该页面下面的信息
public void Query(HttpContext context)
{
context.Response.ContentType = "text/plain";
//===============================================================
//获取查询条件:【用户id,开始时间，结束时间，关键字】
string category, startTime, endTime;
category = startTime = endTime = "";
if (null != context.Request.QueryString["Category"])
{
category = context.Request.QueryString["Category"].ToString().Trim();
}
if (null != context.Request.QueryString["StartTime"])
{
startTime = context.Request.QueryString["StartTime"].ToString().Trim();
}
if (null != context.Request.QueryString["EndTime"])
{
endTime = context.Request.QueryString["EndTime"].ToString().Trim();
}
//================================================================
//获取分页和排序信息：页大小，页码，排序方式，排序字段
int pageRows, page;
pageRows = 10;
page = 1;
string order, sort, oderby; order = sort = oderby = "";
if (null != context.Request.QueryString["rows"])
{
pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());
}
if (null != context.Request.QueryString["page"])
{
page = int.Parse(context.Request.QueryString["page"].ToString().Trim());
}
if (null != context.Request.QueryString["sort"])
{
order = context.Request.QueryString["sort"].ToString().Trim();
}
if (null != context.Request.QueryString["order"])
{
sort = context.Request.QueryString["order"].ToString().Trim();
}
//===================================================================
//组合查询语句：条件+排序
StringBuilder strWhere = new StringBuilder();
if (category != "")
{
strWhere.AppendFormat(" ExamineSign= '{0}' and ", category);
}
if (startTime != "")
{
strWhere.AppendFormat(" PublishDate >= '{0}' and ", startTime);
}
if (endTime != "")
{
strWhere.AppendFormat(" PublishDate <= '{0}' and ", endTime);
}
//删除多余的and
int startindex = strWhere.ToString().LastIndexOf("and");//获取最后一个and的位置
if (startindex >= 0)
{
strWhere.Remove(startindex, 3);//删除多余的and关键字
}
if (sort != "" && order != "")
{
//strWhere.AppendFormat(" order by {0} {1}", sort, order);//添加排序
oderby = order + " " + sort;
}
//DataSet ds = Bnotice.GetList(strWhere.ToString()); //调用不分页的getlist
//调用分页的GetList方法
DataSet ds = userlog.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);
int count = userlog.GetRecordCount(strWhere.ToString());
string strJson = ToJson.Dataset2Json(ds, count);
context.Response.Write(strJson);
context.Response.End();
}
修改更新认证：
Html代码：
//修改管理员
function modify(flag) {
$('#fm').form('clear');
var row = $('#tt').datagrid('getSelected');//获取选中行
//定义更新所需要的参数，也就是数据库对应的字段，从页面表格中获取即可。
var userid = row.UserID;
var content = row.Content;
var examinemessage = row.ExamineMessage;
var publishdate = row.PublishDate;
var realname = row.RealName;
var title = row.Title;
var userlogid = row.UserLogID;
var examineSign=flag;
var xmlHttp = null;
//创建Ajax核心对象.表示当前浏览器不是ie
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {//IE浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "ExamineVerifyLog.ashx?test=modify&UserID=" + userid + "&Content=" + content + "&ExamineSign=" + examineSign + "&ExamineMessage=" + examinemessage + "&PublishDate=" + publishdate + "&RealName=" + realname + "&Title=" + title + "&UserLogID=" + userlogid;
//设置请求方式为GET，url，异步提交
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function () {
//alert(xmlHttp.readyState);
//判断是否执行完毕
if (4 == xmlHttp.readyState) {
//若执行成功
if (200 == xmlHttp.status) {
//调用reload
$('#tt').datagrid('reload');
}
else {
alert("请求失败！错误代码：" + xmlHttp.status);
}
}
};
//开启异步请求
xmlHttp.send(null);
}
一般处理程序代码：
/// <summary>
/// 修改记录
/// </summary>
/// <param name="context"></param>
public void Modify(HttpContext context)
{
//声明实体类
Entity.userLogEntity entityuserlog = new Entity.userLogEntity();
entityuserlog.UserID = context.Server.UrlDecode(context.Request.QueryString["UserID"]);
entityuserlog.Content = context.Server.UrlDecode(context.Request.QueryString["Content"]);
entityuserlog.ExamineMessage = context.Server.UrlDecode(context.Request.QueryString["ExamineMessage"]);
entityuserlog.PublishDate = context.Server.UrlDecode(context.Request.QueryString["PublishDate"]);
entityuserlog.Title = context.Server.UrlDecode(context.Request.QueryString["Title"]);
entityuserlog.UserLogID = context.Server.UrlDecode(context.Request.QueryString["UserLogID"]);
entityuserlog.ExamineSign = context.Server.UrlDecode(context.Request.QueryString["ExamineSign"]);
try
{
if (userlog.Update(entityuserlog))//判断是否更新成功
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
catch (Exception ex)
{
}
}
当然，这里没有写出D层的方法，D层都是动软代码生成的，不是我们自己写的，生成好之后，直接调用东软代码生成的方法~~~
自己的感觉：
对于ＥasyUI，我的感觉就是：各种封装好的框架，要实现相应的功能，调用其封装好的方法即可。但是这句话说起来简单，真正的做到，却是让人那个什么隐隐生疼的赶脚~~~这里还是多亏了成龙师哥的帮助，^_~......
补充一句闲话：说话是一回事，交流是另一回事！
