你的位置:首页 > Java教程

[Java教程]日历插件FullCalendar应用:(二)数据增删改


接上一篇 日历插件FullCalendar应用:(一)数据展现。

这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webForm来展现数据,这一篇使用mvc模式来对数据进行增删改查。

1、准备工作

本人用的SQLServer2012,首先创建任务数据库 Task: 

USE [TestDemo]GOSET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOCREATE 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' style="margin-top:10px;margin-left:5px"></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.net来对数据进行操作,首先创建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()    {      this.connectionString = ConfigurationManager.AppSettings["ConnectionString"];          }    #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 style="width:650px">        <tr>          <td class="item_title">            任务名称:          </td>          <td colspan="3">            <input id="Name" name="Name" type="text" style="width:516px" 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" style="width:516px" 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>

     在fullcalendar.js文件里 初始化calendar的方法中有dayClick方法,此方法在点击日历的时可进行自己想要的操作。我希望在点击日历的时候弹出可添加任务的对话框,在填写信息之后点击保存,把信息保存到数据库,此刻就用到了art.dialog组件(具体的API以及如何使用可登陆官网自己学习http://lab.seaning.com/很容易掌握) 

添加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($){  $.datepicker.regional['zh-CN'] = {    closeText: '关闭',    prevText: '&#x3c;上月',    nextText: '下月&#x3e;',    currentText: '今天',    monthNames: ['一月','二月','三月','四月','五月','六月',    '七月','八月','九月','十月','十一月','十二月'],    monthNamesShort: ['一','二','三','四','五','六',    '七','八','九','十','十一','十二'],    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],    dayNamesMin: ['日','一','二','三','四','五','六'],    dateFormat: 'yy-mm-dd', firstDay: 1,    isRTL: false};  $.datepicker.setDefaults($.datepicker.regional['zh-CN']);});

     在填写完信息保存时用ajax,POST方法访问InsertData.ashx一般处理程序通过ado.net方式来对数据进行插入:

 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.net方式来对数据进行更新: 

 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;    event.end = enddatestr;       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.net方式对数据进行删除。

 $.ajax({   type: "POST",    url: "../DateHandle/DeleteData.ashx",    data: para,    success: function (data) {                 $('#calendar').fullCalendar('removeEvents', event.id);    }  });

删除完之后要通过removeEvents进行删除。

     好了,以上就是本文章的主要内容,本文其实上周就应该写完发布的,最近有点儿忙,元旦回来后赶紧把这篇补上,这个插件就讲到这里,文章中很多代码都没有过多的处理,简单的把增删改查写了写,提供一个小小的思路,可能在您以后的工作中会用到此插件,如果能帮助到您,我将倍感荣幸,如有不足,请多多指正,在下感激不尽。。。

最后一定要分享源码:https://yunpan.cn/cu8Fn5CV3VsRD 访问密码 163b