📌  相关文章
📜  jQWidgets jqxScheduler cellDoubleClick 事件(1)

📅  最后修改于: 2023-12-03 15:02:20.693000             🧑  作者: Mango

jQWidgets jqxScheduler cellDoubleClick 事件介绍

jQWidgets jqxScheduler是一个功能强大的基于jQuery的日历、日程安排控件，具有可定制化、跨浏览器兼容等特点，广泛应用于企业管理，资源调配等方面。

cellDoubleClick事件是jQWidgets jqxScheduler控件中的一个重要事件，用于在双击单元格时触发。程序员可以通过此事件实现在点击某一个时间点时，打开一个窗口用于接收用户的输入，从而实现新建任务、约束安排等功能。

使用方法

jqxScheduler对象是jQWidgets jqxScheduler的核心对象，因此事件的注册需要通过该对象进行。

//获取控件对象
var scheduler = $("#scheduler").jqxScheduler({ 
     width: "100%",
     height: 700,
     date: new $.jqx.date(new Date(2016, 11, 13)),
     view : 'weekView',
     resources: resourcesAdapter,
     appointmentDataFields:
     {
         from: "start",
         to: "end",
         id: "id",
         description: "description",
         location: "location",
         subject: "subject",
         resourceId: "calendar"
     },
     views:
     [
         'dayView',
         'weekView',
         'monthView'
     ]
   });

//注册事件
scheduler.on('cellDoubleClick', function(event){
  //事件处理代码
});
事件参数

cellDoubleClick事件的触发会传递一个事件对象event作为唯一参数。该事件对象具有以下属性：

| 属性 | 类型 | 说明 | | --- | --- | --- | | date | Date对象 | 触发事件时所双击的单元格的日期时间 | | resource | Object对象 | 触发事件时所双击的单元格相对应的资源对象 | | originalEvent | Event对象 | 触发事件的原始事件对象，例如点击事件（click）或双击事件（dblclick） |

事件处理

事件处理方法内部可以通过事件a对象访问触发事件时双击单元格的相关信息，例如时间、坐标等。示例代码：

scheduler.on('cellDoubleClick', function(event){
  //获取事件属性
  var cellDate = event.date;
  var resource = event.resource;
  var x = event.originalEvent.pageX;
  var y = event.originalEvent.pageY;
  
  //打开窗口，接收用户输入
  if(resource.id == "Room 1"){
    window.open("http://example.com/newBookingForm.aspx?date=" +  cellDate + "&x=" + x + "&y=" + y);
  }
  else{
    alert("该资源被占用，请重新选择！");
  }
});

在上述代码中，用户在双击房间信息区域的某一单元格时，系统会打开一个新的窗口，用于接收用户的预定信息，否则将会提示资源被占用等信息。

参考链接