无法使用 JSON 将 jqxScheduler 状态存储到 MySQL

Posted 2023-05-08

【中文标题】无法使用 JSON 将 jqxScheduler 状态存储到 MySQL

【英文标题】：Unable to store jqxScheduler state into MySQL using JSON

【发布时间】：2018-12-11 18:46:40

【问题描述】：

我想将jqxScheduler状态保存到mysql，请帮我看看我可以使用什么事件我的要求是将jqxScheduler的状态保存到数据库中并重新加载。

使用下面给定的代码，我正在创建 jqxScheduler，我可以将数据加载到计划中，但是如何将其保存到数据库中以便下次加载？

<script type="text/javascript">
  $(document).ready(function() 
    var appointments = new Array();
    var appointment1 = 
      id: "id1",
      description: "Quarterly Project Review Meeting",
      location: "",
      student: "Nancy",
      calendar: "Room 1",
      start: new Date(2017, 10, 23, 9, 0, 0),
      end: new Date(2017, 10, 23, 16, 0, 0)
    

    appointments.push(appointment1);

    // prepare the data
    var source = 
      dataType: "json",
      dataFields: [
        name: 'id', type: 'string',
        name: 'description', type: 'string',
        name: 'location', type: 'string',
        name: 'student', type: 'string',
        name: 'calendar', type: 'string',
        name: 'style', type: 'string',
        name: 'color', type: 'string',
        name: 'background', type: 'string',
        name: 'borderColor', type: 'string',
        name: 'start', type: 'date',
        name: 'end', type: 'date'
      ],
      id: 'id',
      localData: appointments,
      url: "dsfasdfadsfasfasdfdata.php"
    ;
    var adapter = new $.jqx.dataAdapter(source);
    $("#scheduler").jqxScheduler(
      date: new $.jqx.date(2017, 11, 23),
      width: getWidth("Scheduler"),
      height: 600,
      source: adapter,
      renderAppointment: function(data) 
        // data Object properties
        // appointment - Object with the properties from the Scheduler.s source object.
        // width - int
        // height- int
        // textColor - hex
        // background - hex
        // borderColor - hex
        // style - string
        // cssClass - string
        // html - html string
        // view - string
        var img = "<img style='top: 2px; position: relative;' src='../../images/person.png'/>";
        if (data.appointment.subject == "Nancy") 
          var img = "<img style='top: 2px; position: relative;' src='../../images/woman.png'/>";

         else if (data.appointment.subject == "Peter") 
          var img = "<img style='top: 2px; position: relative;' src='../../images/boss.png'/>";
         else if (data.appointment.subject == "Antony") 
          var img = "<img style='top: 2px; position: relative;' src='../../images/oldboss.png'/>";
         else if (data.appointment.subject == "John") 
          var img = "<img style='top: 2px; position: relative;' src='../../images/asian.png'/>";
        
        if (data.view == "weekView" || data.view == "dayView" || data.view == "monthView") 
          data.html = img + "<i>" + data.appointment.subject + "</i>";
          if (data.appointment.id == "id1") 
            data.style = "#AA4643";
           else if (data.appointment.id == "id2" || data.appointment.id == "id6") 
            data.style = "#309B46";
           else if (data.appointment.id == "id3") 
            data.style = "#447F6E";
          
        
        return data;
      ,
      changedAppointments: function(data) 
        alert("here");
      ,
      ready: function() 
        $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        var source = $('#scheduler').jqxScheduler('source');
        console.log("here")
        console.log(source._source.localData);
      ,
      appointmentDataFields: 
        from: "start",
        to: "end",
        id: "id",
        description: "description",
        location: "location",
        subject: "student",
        style: "style",
        color: "color",
        background: "background",
        borderColor: "borderColor"
      ,
      view: 'weekView',
      appointmentsMinHeight: 20,
      views: [
        'dayView',
        'weekView',
        'monthView'
      ]
    );
  );
</script>

【问题讨论】：

$("#scheduler").jqxScheduler('exportData','JSON'); 请使用此api将所有数据导出为json，然后将其存储在数据库中以保持调度程序的状态。

【参考方案1】：

你可以使用这个功能：

                    $('#scheduler').on('appointmentChange appointmentAdd', function (event)  
                            // lors de la sauvegarde
                            var args = event.args; 
                            var appointment = args.appointment.jqxAppointment; 
                            var pId=appointment.id;
                            var pIdStr=pId.toString();
                            var title=appointment.subject;
                            var description=appointment.description;
                            var start=appointment.from.toString();
                            var end=appointment.to.toString();
                            var background=appointment.background;
                            var borderColor=appointment.borderColor;
                            var color=appointment.color;
                            var draggable="false";
                            var resizable="false";
                            var readOnly="false";
                            var done=0;
                            var pProg="update_action.php";

                            if (title===null) title="Sans Titre";
                            if (background===null) background=defaultBackground;
                            if (borderColor===null) borderColor=defaultBorderColor;
                            if (pIdStr.length>10) pProg="add_action.php";


                            console.log(args.appointment);
                            console.log(start);
                            console.log(end);
                            console.log(pProg);
                            console.log(UrlTache);


                                $.post(
                                    pProg,
                                    
                                            pId : pId,
                                            title : title,
                                            description : description,
                                            start : start,
                                            end : end,
                                            color : color,
                                            background : background,
                                            borderColor : borderColor,
                                            draggable : draggable,
                                            resizable : resizable,
                                            readOnly : readOnly,
                                            UrlTache : UrlTache,
                                            done : done
                                        ,
                                        fRetour_AddAction,
                                        'text'
                                    );
                    );