在最近做的《教务-基础系统》中有这样一个功能:为了防止用户误删数据,或者将数据删除后还想恢复,我们对数据的处理不是直接删除,而是允许用户撤销数据,如果用户想使用撤销的数据激活一下即可。这里说一下我撤销操作的实现,作为初学者,我说的可能有很多不到位的地方,还请高手指点!
一、先看一下,课程类型撤销运行效果
由于此处我上传的gif图片不动,我将《课程类型撤销展示》上传空间了。
二、然后说一下这部分使用的技术及插件
1.这里我采用的是jbox插件,这个插件刚刚接触,感觉它的效果还是不错的。
2.撤销部分我采用ajax技术,利用一般处理程序将撤销的数据更新至数据库。
三、最后介绍一下我制作过程及代码的编写
1.准备工作
因为使用jBox插件,于是首先需要导入jBox文件夹,在页面头部引入jBox CSS文件及js文件;在页面撤销后数据库数据也进行撤销,这里的操作使用一般处理程序处理,于是用到handler文件夹。
2.页面头部引用各css文件及js文件,并编写用到的函数
撤销操作需要用到的函数
<!--撤销课程类型弹出框jBox--> <script type="text/javascript"> // 调父窗口请用 parent 或 top,如果是多层iframe,需要调用多个parent var html = "<div style='padding:10px;'>输入撤销原因:<input type='text' id='courseTypeID' name='CourseType' /></div>"; var submit = function (v, h, f) { if (f.courseTypeID == '') { // f.some 或 h.find('#some').val() 等于 top.$('#some').val() $.jBox.tip("请输入撤销原因。", 'error', { focusId: "courseTypeID" }); // 关闭设置 some 为焦点 return false; } //显示你输入的原因 // top.$.jBox.info("撤销原因:" + f.some); //撤销课程类型,通过ajax基础,执行一般处理程序 $.ajax({ // type: 'post', url: '../handler/DeleteCourseTypeByID.ashx', data: "data=" + escape(f.CourseType) + "&CourseTypeID=" + $("#hidd_valCrourseTypeId").val() + "&rnd=" + Math.random(), // dataType: 'text', dataType:'html', success: function (mgs) { alert(mgs); if (Number(mgs) > 0) { if (document.getElementById("t_" + $("#hidd_valCrourseTypeId").val())) $("#t_" + $("#hidd_valCrourseTypeId").val()).html(""); } else { alert("撤销失败!"); } }, error: function () { location.href = location.href; } }) return true; }; //top.$.jBox(html, { title: "撤销原因", submit: submit }); //根据课程类型ID撤销课程类型信息 function CancelCourseTypeById(CourseTypeID) { $("#hidd_valCrourseTypeId").val(CourseTypeID); top.$.jBox(html, { title: "撤销原因", submit: submit }); } // } </script>
3.撤销按钮事件(使用隐藏控件保存课程类型ID)
<!--隐藏控件,保存课程类型ID--> <input type="hidden" value="" id="hidd_valCrourseTypeId" /> <!--撤销按钮,撤销课程类型事件--> <td class="icon tail" width="100px"> <a class="opt" title="撤销" href="javascript:CancelCourseTypeById('<%#Eval("CourseTypeID")%>')"><span class="icon-cancel"> </span></a> </td>
4.一般处理程序(DeleteCourseTypeByID.ashx),与页面头部ajax操作处使用的一般处理程序名称相对应
<%@ WebHandler Language="C#" Class="DeleteCourseTypeByID" %> /* * 创建人:马兆娟 * 创建时间:2013年1月14日15:40:10 * 版权所有:提高班 * 此模块作用:撤销课程类型信息 */ using System; using System.Web; //引用命名空间及BLL层和实体层 using System.Data; //引用课程BLL层 using TeachSystem.BLL.CourseBLL; //引用课程实体层 using TeachSystem.Entity.CourseEntity; public class DeleteCourseTypeByID : IHttpHandler { public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; string strData = ""; string strCourseTypeID = ""; //撤销理由 strData = context.Request.QueryString["data"]; //课程类型ID strCourseTypeID = context.Request.QueryString["CourseTypeID"]; /* * 数据处理类 * * */ //课程类型ID //string strCourseTypeID = context.Request.QueryString["strCourseTypeID"]; //课程类型实体 CourseTypeEntity enCourseType = new CourseTypeEntity(); enCourseType.CourseTypeID = strCourseTypeID; enCourseType.ActionReason = strData; //操作人 enCourseType.OperatorName = "zhang"; //调用BLL层方法,根据课程类型ID撤销课程类型信息 Boolean boolDeleteCourseType = new CourseTypeBLL().CancelCourseType(enCourseType); if (true == boolDeleteCourseType) { //成功,弹出1;失败,弹出0 context.Response.Write("1"); } else { context.Response.Write("0"); } } }
至此撤销操作就完成了,当然这样执行起来依然有瑕疵,需要我们探索改进。