⽇历插件FullCalendar应⽤：（⼆）数据增删改
接上⼀篇。
这⼀篇主要讲使⽤fullcalendar插件如何做数据的增删改，⽤到了art.dialog web对话框组件，上⼀篇⽤到的webForm来展现数据，这⼀篇使⽤mvc模式来对数据进⾏增删改查。
1、准备⼯作
本⼈⽤的SQLServer2012，⾸先创建任务数据库 Task：
USE[TestDemo]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE[dbo].[Task](
[ID][nvarchar](50) NOT NULL,
[Name][nvarchar](50) NULL,
[Contents][nvarchar](max) NULL,
[StartDate][datetime]NULL,
[EndDate][datetime]NULL,
CONSTRAINT[PK_Task]PRIMARY KEY CLUSTERED
(
[ID]ASC
)WITH (PAD_INDEX =OFF, STATISTICS_NORECOMPUTE =OFF, IGNORE_DUP_KEY =OFF, ALLOW_ROW_LOCKS =ON, ALLOW_PAGE_LOCKS =ON) ON[PRIMARY] ) ON[PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
创建MVC解决⽅案，此时mvc模式不再赘述，相信⼤家都会如何运⽤，然后把上篇⽂章⽤到的css以及js⽂件添加到本解决⽅案中。
在⾸页Index页⾯中引⼊⽂件以及添加div：(⽇历展现⽅式与之前相同)
<link href="../../Content/css/fullcalendar.css" rel="stylesheet"/>
<link href="../../Content/css/jquery.ui.css" rel="stylesheet"/>
<link href="../../Content/css/style.default.css" rel="stylesheet"/>
<script src="../../Scripts/Plugins/jquery-1.7.min.js"></script>
<script src="../../Scripts/Plugins/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../../Scripts/Plugins/fullcalendar.min.js"></script>
<script src="../../Scripts/Plugins/fullcalendar.js"></script>
<div id='calendar' >
</div>
创建任务类：
///<summary>
///任务类
///</summary>
public class Task
{
public string ID { get; set; }
///<summary>
///任务名称
///</summary>
public string Name { get; set; }
///<summary>
///内容
///</summary>
public string Contents { get; set; }
///<summary>
///开始时间
///</summary>
public DateTime? StartDate { get; set; }
///<summary>
///结束时间
/
//</summary>
public DateTime? EndDate { get; set; }
}
2、任务查看
任务查看上篇已经介绍，不再过多的讲述，由于实现⽅式发⽣了改变所以简单的提⼀下，把数据表中的数据查询出来然后展现在fullcalendar上，我⽤ado 来对数据进⾏操作，⾸先创建CommonDbHelper类：
public class CommonDbHelper
{
#region属性
///<summary>
///数据库连接字符串
///</summary>
private string connectionString;
public string ConntionString
{
get
{
return connectionString;
}
set
{
connectionString = value;
}
}
#endregion
#region构造⽅法
///<summary>
///从配置中⾃动读取数据库类型及连接字符串
///</summary>
public CommonDbHelper()
{
}
#endregion
///<summary>
///执⾏查询语句
///</summary>
///<param name="SqlString">查询语句</param>
///<returns>DataTable </returns>
public DataTable ExecuteQuery(string sqlString)
{
using (IDbConnection iConn = new SqlConnection(this.ConntionString))
{
DataSet ds = new DataSet();
try
{
System.Data.IDataAdapter iAdapter = new SqlDataAdapter(sqlString, (SqlConnection)iConn); iAdapter.Fill(ds);
}
catch (System.Exception e)
{
throw new Exception(e.Message);
}
finally
{
if (iConn.State != ConnectionState.Closed)
{
iConn.Close();
}
}
return ds.Tables[0];
}
}
}
View Code
然后添加泛型类SQLHelper通过反射把查询出来的DataTable转换为list：
public class SQLHelper<Tentity> where Tentity : class,new()
{
///<summary>
///获取所有数据
///</summary>
///<returns></returns>
public IList<Tentity> GetData(string statement)
{
var dt = new CommonDbHelper().ExecuteQuery(statement);
if (dt == null || dt.Rows.Count == 0){
return null;
}
IList<Tentity> list = new List<Tentity>(dt.Rows.Count);
// 获得此模型的类型
Type type = typeof(Tentity);
string tempName = "";
foreach (DataRow dr in dt.Rows)
{
Tentity t = new Tentity();
// 获得此模型的公共属性
PropertyInfo[] propertys = t.GetType().GetProperties();
foreach (PropertyInfo pi in propertys)
{
/
/ 检查DataTable是否包含此列
tempName = pi.Name;
if (dt.Columns.Contains(tempName))
{
if (!pi.CanWrite) continue;
object value = dr[tempName];
if (value != DBNull.Value)
pi.SetValue(t, value, null);
}
}
list.Add(t);
}
return list;
}
}
在查询所有数据时只需要这样写然后foreach循环就可以了：
SQLHelper<Task> dataHelper = new SQLHelper<Task>();
string strcom = "SELECT * FROM Task";
IList<Task> tasks = dataHelper.GetData(strcom);
3、任务的添加操作
添加页⾯信息，新增Edit界⾯：
@model MvcApplication1.Models.Task
<script type="text/javascript">
$(function () {
$("#start").datetimepicker({
hour: 5,
minute: 20
});
$("#end").datetimepicker({
hour: 13,
minute: 15
});
});
</script>
<div>
<form id="myForm" method="post" action="">
<div class="aboxmanageform">
<table >
<tr>
<td class="item_title">
任务名称：
jquery插件分享</td>
<td colspan="3">
<input id="Name" name="Name" type="text" value="@Model.Name" class="longinput"/>
</td>
</tr>
<tr>
<td class="item_title">
任务内容：
</td>
<td colspan="3">
<textarea cols="80" name="Contents" id="Contents" rows="10" class="longinput">@Model.Contents</textarea> </td>
</tr>
<tr>
<td class="item_title">
开始时间：
</td>
<td>
<input id="start" name="StartDate" type="text" value="@Model.StartDate" class="longinput"/>
</td>
<td class="item_title">
结束时间：
</td>
<td>
<input id="end" name="EndDate" type="text" value="@Model.EndDate" class="longinput"/>
</td>
</tr>
</table>
<input type="hidden" name="ID" value="@Model.ID"/>
</div>
</form>
</div>
添加art.dialog的css、js 引⽤：
<link href="../../Content/css/default.css" rel="stylesheet"/>
<script type="text/javascript" src="../../Scripts/Plugins/artDialog.js"></script>
在添加任务的时候需要有开始时间，结束时间。时间的选择⽤到的是jqueryui的⽇期datepicker，但是在官⽹提供的资料中只能选择⽇期，不能选择⼩时，分等信息，然后在⽹上到了⼀个插件可以选择⼩时，分。在起始页引⼊⽂件：
<script src="../../Scripts/Plugins/jquery-ui-timepicker-addon.js"></script>
在点击⽇历界⾯时弹出任务添加界⾯效果如下图：
在选择⽇期时是这样显⽰的：
是不是感觉很别扭？⾸先⽇期的⽉，星期都是英⽂展现，并且input中的格式为⽉、⽇、年显⽰很别扭，所以对其进⾏处理以及格式年⽉⽇的展现我把它放到了ui.datepicker.js⽂件中：
jQuery(function($){
$.ional['zh-CN'] = {
closeText: '关闭',
prevText: '<；上⽉',
nextText: '下⽉>',
currentText: '今天',
monthNames: ['⼀⽉','⼆⽉','三⽉','四⽉','五⽉','六⽉',
'七⽉','⼋⽉','九⽉','⼗⽉','⼗⼀⽉','⼗⼆⽉'],
monthNamesShort: ['⼀','⼆','三','四','五','六',
'七','⼋','九','⼗','⼗⼀','⼗⼆'],
dayNames: ['星期⽇','星期⼀','星期⼆','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周⽇','周⼀','周⼆','周三','周四','周五','周六'],
dayNamesMin: ['⽇','⼀','⼆','三','四','五','六'],
dateFormat: 'yy-mm-dd', firstDay: 1,
isRTL: false};
$.datepicker.setDefaults($.ional['zh-CN']);
});
在填写完信息保存时⽤ajax，POST⽅法访问InsertData.ashx⼀般处理程序通过ado⽅式来对数据进⾏插⼊：
var SaveDatas = function () {
var name = $("#Name").val();
var contents = $("#Contents").val();
var startdatestr = $("#start").val();
var enddatestr = $("#end").val();
var mainid; //数据主键
var taskdata = { name: name, contents: contents, confshortname: 'M1', start: startdatestr, end: enddatestr };
$.ajax({
type: "POST",
url: "../DateHandle/InsertData.ashx",
data: taskdata, //要发送的数据
success: function (data) {
//对话框⾥⾯的数据提交完成，data为操作结果
//data为主键ID
mainid = data;
var schdata2 = { title: name, fullname: name, confshortname: 'M1', start: startdatestr, end: enddatestr, id: mainid };
$('#calendar').fullCalendar('renderEvent', schdata2, true);
$("#start").val(''); //开始时间
$("#end").val(''); //结束时间
$("#Name").val(''); //标题
}
});
}
可能有⼈注意到了红⾊部分，在保存成功后界⾯不会展现新添加的任务，所以要对其进⾏渲染操作。
4、任务的编辑操作
在fullcalendar.js⽂件⾥初始化calendar的⽅法中有eventClick⽅法，此⽅法的⽤处就在于点击⽇历上的信息时执⾏⾃⼰想要的操作，在此⽆疑我们想要点击某个任务来进⾏修改，fullcalendar属性中有⼀个id(事件的唯⼀标识)，在上⾯添加的操作中我们已经把insert后返回的主键赋值给id，所以在点击每个任务时，可以把id传递过去进⾏修改操作。
上⾯的编辑界⾯中我⽤到的实体对数据进⾏展现，所以在请求到Edit的Action时如果是新建操作则new ⼀个Task返回到界⾯，如果是编辑则查询数据库是否存在，如果存在则返回，Controller⾥的Edit⽅法：
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Edit(string id)
{
if (!string.IsNullOrEmpty(id))
{
SQLHelper<Task> dataHelper = new SQLHelper<Task>();
string str = string.Format("SELECT * FROM Task where ID ='{0}'", id);
IList<Task> task = dataHelper.GetData(str);
return PartialView(task[0]);
}
else
return PartialView(Create());
}
///<summary>
///创建初始化数据
/
//</summary>
///<returns></returns>
private static Task Create()
{
Task task = new Task();
task.Name = "";
task.Contents = "";
task.StartDate = null;
task.EndDate = null;
task.ID = null;
return task;
}
编辑界⾯：
在编辑完信息保存时⽤ajax，POST⽅法访问UpdateData.ashx⼀般处理程序通过ado⽅式来对数据进⾏更新：
var SaveEditDatas = function (event) {
var startdatestr = $("#start").val(); //开始时间
var enddatestr = $("#end").val(); //结束时间
var name = $("#Name").val();
var contents = $("#Contents").val();
event.fullname = name;
event.start = startdatestr;
var schdata = { name: name, contents: contents, start: startdatestr, end: enddatestr, id: event.id };
$.ajax({
type: "POST",
url: "../DateHandle/UpdateData.ashx",
data: schdata, //要发送的数据
success: function (data) {
$('#calendar').fullCalendar('updateEvent', event);
}
});
}
同样的，红⾊部分也需要注意在修改完之后要通过updateEvent进⾏更新
4、任务的删除操作
在上⾯的编辑操作中有⼀个删除按钮，在点开任务时，点击此按钮进⾏删除。同样的，把主键ID传递给DeleteData.ashx⼀般处理程序通过ado⽅式对数据进⾏删除。
$.ajax({
type: "POST",
url: "../DateHandle/DeleteData.ashx",
data: para,
success: function (data) {
$('#calendar').fullCalendar('removeEvents', event.id);
}
});
删除完之后要通过removeEvents进⾏删除。
好了，以上就是本⽂章的主要内容，本⽂其实上周就应该写完发布的，最近有点⼉忙，元旦回来后赶紧把这篇补上，这个插件就讲到这⾥，⽂章中很多代码都没有过多的处理，简单的把增删改查写了写，提供⼀个⼩⼩的思路，可能在您以后的⼯作中会⽤到此插件，如果能帮助到您，我将倍感荣幸，如有不⾜，请多多指正，在下感激不尽。。。
发表评论