FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班
（三）c# asp.net 操作FullCalendarDemo5 拖拽排班
通过指定拖拽事件的方法，来实现用户外部关联数据拖拽，通过ajax来实现异步数据保存，从而不刷新页面，满足用户体验。
在index.aspx代码页，页面<body>部分不变，对<script>部分进行更新。老版本中，直接指定drop:function(event){}即可，但新版的事件调用方法变化很大。FullCalendar v5.11.2 版本的调用方法如下：
document.addEventListener('DOMContentLoaded', function () {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendar.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
//var checkbox = document.getElementById('drop-remove');
// 初始化 external events
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function (eventEl) {
return {
title: eventEl.innerText
};
}
});
// 初始化 the calendar
var calendar = new Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: 'zh-cn',//指定中文
editable: true,
eventOrder: 'order',//排序
droppable: true, // 允许拖拽
drop: function (info) {
//是否 "拖拽后删除" ，当checkbox 选定后?
//if (checkbox.checked) {
// // if so, remove the element from the "Draggable Events" list
// info.draggedEl.parentNode.removeChild(info.draggedEl);
//}
var start_day = info.dateStr; //取用户拖拽到位的日期
var title = info.draggedEl.innerText; //取拖拽对象的文本
var eventData;
if (title) {
eventData = {
title: title,
start: start_day
};
var str = JSON.stringify(eventData);//将eventData对象转json字符串
$.ajax({
contentType: "application/json",
type: "post",
datatype: "json",
url: "index.aspx/DropSave", //异步执行的方法
data: "{'datastr':'" + str + "'}", //post请求传递的数据
success: function (msg) {
alert("拖拽保存成功");//可以注释掉
},
error: function (x) {
alert("失败" + x);
}
});
}
},
events: [<%=jsonstr_start %>] //显示的值班表数据
});
calendar.render();
});
页面首先还是要先显示已经排好的值班表，只是增加了drop事件。
在index.aspx.cs代码页，
[WebMethod]
public static bool DropSave(string datastr)
{
JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
Dutydata _jsondutydata = jsonSerializer.Deserialize<Dutydata>(datastr);
DateTime start = _jsondutydata.start;
string personname = _jsondutydata.title;//用户名后面跟了一个\n
personname = personname.Substring(0, personname.Length - 1);
string tmp_sql = @"select UserID from Users where Username='" + personname + "'";
DBHelp db = new DBHelp();
DataSet ds = db.GetDataSetSql(tmp_sql);
int userid = int.Parse(ds.Tables[0].Rows[0][0].ToString());
string sqlstr = string.Format("INSERT INTO dutyplay(dutydate,userid,personname,duty_time) VALUES ('{0}','{1}','{2}','{3}')", start, userid, personname, DateTime.Now);
int i = DBHelp.ExecuteCommand(sqlstr);
if (i > 0)
{
return true;
}
else
{
return false;
}
}
代码很简单，使用了json数据类型，Dutydata对象包含start和title两个属性，start记录值班日期，title记录值班员姓名。
（源码后）
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
