【问题标题】:is their was to add loop inside in javascript他们是在javascript中添加循环吗
【发布时间】:2020-10-19 19:19:20
【问题描述】:

我尝试使用日历代码笔中的模板,所以我的目标是添加一些具有事件名称以及开始和结束日期的事件。所以我正在使用 java 并使用 JSP 来编码这是代码输出即将到来但是需要定义索引,一次又一次,我尝试了很多添加循环的方法,但得到错误

<%@page import="java.util.Arrays"%>
<%@page import="java.sql.ResultSet"%>
 <%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>   

</head>
<body>
<br/>
<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>
    </div>
  </div>
</div>
<%
String[] eventArray=new String[3];
String[] startdateArray=new String[3];
String[] enddateArray=new String[3];
int i=0;
try {
    Class.forName("com.mysql.jdbc.Driver");
    Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/calendar","root","");
    Statement st=(Statement) con.createStatement();
    ResultSet rs=(ResultSet) st.executeQuery("select * from events");
    while(rs.next()){
        eventArray[i]=rs.getString("event");
        startdateArray[i]=rs.getString("startdate");
        enddateArray[i]=rs.getString("enddate");
        
        /*System.out.println("Event is:" +eve);
        System.out.println("Starting Date is:" +startdate);
        System.out.println("Ending date is:" +enddate);*/
    
        i=i+1;  
    }
} catch (Exception e) {
    e.printStackTrace();
}
%>
<script>
var event=[ ];
var startd=[ ];
var endd=[ ];

<%for(int x=0;x<eventArray.length;x++) {%>
event[<%= x %>]='<%=eventArray[x]%>';
startd[<%= x %>]='<%=startdateArray[x]%>';
endd[<%= x %>]='<%=enddateArray[x]%>';
<%}%>
var j=0;
even:[
{ title: event[j] ,start: startd[j],end: endd[j],}
]
$(document).ready(function() {
        $('#calendar').fullCalendar({
            
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            
            defaultDate: '2020-06-28',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
                events: [
                                { title: event[j] ,start: startd[j],end: endd[j],},
                                //{ title: event[5] ,start: startd[5],end: endd[5],},
                            //{ title: event[j] ,start: startd[j],end: endd[j],},
                            //{ title: event[j+1] ,start: startd[j+1],end: endd[j+1],},
                            //{ title: event[j+2] ,start: startd[j+2],end: endd[j+2],},
                        ]
            
        });
    });
</script>

所以我刚刚在数据库中添加了 3 个事件,因此删除了 cmets 我得到了与事件有关的 3 个日期,但如果它们是 100 个事件,我无法正确添加 100 个,所以我需要一些方法来解决这个问题 请有人帮助我 任何想法请发表评论,以便我们尝试 提前致谢 谢谢。

【问题讨论】:

  • java != javascript
  • 我什至知道,但我该如何解决我的问题我尝试了多种方法,但都没有奏效
  • 我什至知道...那为什么要同时标记呢?

标签: javascript java jsp web web-deployment


【解决方案1】:

您可以使用objects 创建json-array,而不是在js 中创建3 个不同的数组,并将其传递给fullcalender 下的events。您需要在代码中进行一些更改:

您的 javascript 代码:

<script>
 var datas=new Array(); //declare this
<%for(int x=0;x<eventArray.length;x++) {%>

 //adding  data
    items={};
    items["title"]='<%=eventArray[x]%>';
    items["start"]='<%=startdateArray[x]%>';
    items["end"]='<%=enddateArray[x]%>';
    datas.push(items);//push data into array
<%}%>
console.log(datas)
$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
         left: 'prev,next today',
         center: 'title',
          right: 'month,basicWeek,basicDay'
      },
            
      defaultDate: '2020-06-28',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: datas //pass same json array created
    });
 });
</script>

演示代码

var datas=new Array();
//adding dummy data
items={};
items["title"]="abc";
items["start"]="2020-05-20";
items["end"]="2020-05-26";
datas.push(items);
//adding dummy data
items={};
items["title"]="abwc";
items["start"]="2020-06-15";
items["end"]="2020-06-28";
datas.push(items);
console.log(datas)


$(document).ready(function() {
  $('#calendar').fullCalendar({

    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay'
    },

    defaultDate: '2020-06-28',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events:datas//passs the same

  });
});
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>
    </div>
  </div>
</div>

【讨论】:

  • 非常感谢您提供如此清晰的解释。就像我是网络编程的初学者一样,我对努力提高自己的技能很感兴趣,所以如果你能帮助我,我需要一些帮助,可以通过某种联系方式。所以当你有空时,你可以帮助我在编程方面进行开发,非常感谢寻求帮助和解释
猜你喜欢
  • 2023-03-25
  • 1970-01-01
  • 2013-03-23
  • 1970-01-01
  • 2021-05-30
相关资源
最近更新 更多