当前位置: 首页 > 知识库问答 >
问题:

是否显示日历中的事件列表?

查宜民
2023-03-14

我可以在日历下面的列表中显示事件,但我希望通过JSON数据显示日历中的事件。我已使用CalendarView显示日历。我看了这个,但没能解决我真正想要的问题。

xml

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#2E353D"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="30dp"
                android:layout_height="match_parent"
                android:padding="3dp"
                android:src="@mipmap/calander" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="8dp"
                android:text="Calendar"
                android:textColor="#fff"
                android:textSize="17dp"
                android:textStyle="bold" />

        </LinearLayout>
    </LinearLayout>


      <com.prolificinteractive.materialcalendarview.MaterialCalendarView
            android:id="@+id/calendar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />


    <!--  <CalendarView
        android:id="@+id/calendar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />     -->


    <ListView
        android:id="@+id/calenderlist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


</LinearLayout>

日历片段

  public class CalenderFragment extends Fragment implements OnMonthChangedListener {
    String Navigation_URL = "http://192.168.100.5:84/api/academics/getEvents";
    String access_token;
    ListView listView;
    com.prolificinteractive.materialcalendarview.MaterialCalendarView calendarView;
    ArrayList<CalenderPojoStudent> student_list_calender = new ArrayList<>();

    private HashMap<Integer, List<Event>> map = new HashMap<>();
    private List<CalendarDay> calevents = new ArrayList<>();

    private Calendar cal;
    private List<Event> eventList = new ArrayList<>();


    private MyAdapterCalendar adapter;

    private SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd", Locale.getDefault());

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.calender, container, false);
        getActivity().setTitle("");
        setHasOptionsMenu(true);

        calendarView = (com.prolificinteractive.materialcalendarview.MaterialCalendarView) view.findViewById(R.id.calendar);
        final Calendar calendar = Calendar.getInstance();
        calendarView.setSelectedDate(calendar.getTime());
        calendarView.setSelectedDate(calendar.getTime());


        listView = (ListView) view.findViewById(R.id.calenderlist);
        adapter = new MyAdapterCalendar(getActivity(), eventList);
       // listView.setAdapter(adapter);

        //  calendarView.addDecorator(new HighlightWeekendsDecorator());
        calendarView.addDecorator(new OneDayDecorator());
        // calendarView.addDecorator(new EventDecorator(Color.RED, calendarDays));
        // calendarView.addView(onMonthChanged(calendarView,date));
        // calendarView.addDecorator(new EventDecorator(Color.RED, calendarDays));
        //calendarView.addDecorator(new MySelectorDecorator(getActivity()));


        // calendarView.addDecorator(new EventDecorator("#FF0000",student_list_calender));
        //  calendarView.addDecorator(new EventDecorator("",));
        //calendarView.setDateTextAppearance(View.ACCESSIBILITY_LIVE_REGION_ASSERTIVE);


        SessionManagement session = new SessionManagement(getContext());
        session.checkLogin();
        access_token = session.getAccesstToken();
        makeJsonObjectRequest();


        return view;
    }

    // List<Event> events = new ArrayList<>();


    private void makeJsonObjectRequest() {

        RequestQueue requestQueue = Volley.newRequestQueue(getContext());
        String URL = Navigation_URL;


        StringRequest stringRequest = new StringRequest(Request.Method.GET, URL,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {
                        try {


                            JSONArray jArray = new JSONArray(response);
                            for (int i = 0; i < jArray.length(); i++) {
                                JSONObject jsonObject = jArray.getJSONObject(i);
                                String StartDate = jsonObject.getString("StartDate");
                                String Title = jsonObject.getString("Title");


                                try {
                                    Date date = simpleDateFormat.parse(StartDate);

                                    Log.d("Date ", "" + date);
                                    CalendarDay day1 = CalendarDay.from(date);
                                    Event event = new Event(date, Title);
                                    cal = Calendar.getInstance();
                                    cal.setTime(date);
                                    int month = cal.get(Calendar.MONTH);
                                    if (!map.containsKey(month)) {
                                        List<Event> events = new ArrayList<>();
                                        events.add(event);
                                        map.put(month, events);
                                    } else {
                                        List<Event> events = map.get(month);
                                        events.add(event);
                                        map.put(month, events);

                                    }
                                    calevents.add(day1);

                                } catch (ParseException e) {
                                    e.printStackTrace();
                                }


                            }

                            //CalenderAdapter calenderAdapter = new CalenderAdapter(getActivity(), student_list_calender);
                            //listView.setAdapter(calenderAdapter);
                            cal = Calendar.getInstance();
                            int month = cal.get(Calendar.MONTH);
                            List<Event> event = map.get(month);
                            if (event != null && event.size() > 0)
                                adapter.addItems(event);
                            listView.setAdapter(adapter);
                            EventDecorator eventDecorator = new EventDecorator(Color.RED, calevents);
                            calendarView.addDecorator(eventDecorator);

                        } catch (JSONException e) {
                            makeText(getContext(), "Fetch failed!", LENGTH_SHORT).show();
                            e.printStackTrace();
                        }

                        //
                    }

                }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                makeText(getContext(), error.toString(), LENGTH_LONG).show();
            }
        }) {

            @Override
            public Map<String, String> getHeaders() throws AuthFailureError {
                Map<String, String> headers = new HashMap<String, String>();
                headers.put("Authorization", "Bearer " + access_token);
                headers.put("Content-Type", "application/x-www-form-urlencoded");
                return headers;
            }
/*
            @Override
            protected Map<String, String> getParams() throws com.android.volley.AuthFailureError {
                Map<String, String> map = new HashMap<String, String>();

                map.put("id", master_id);
                map.put("accessID", accessID);
                map.put("currentUser", master_id);
                return map;

            } */
        };


        requestQueue.add(stringRequest);

    }


    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        // TODO Auto-generated method stub
        super.onCreateOptionsMenu(menu, inflater);
        inflater.inflate(R.menu.dashboard, menu);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // handle item selection
        switch (item.getItemId()) {
            case R.id.action_settings:
                // do s.th.
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }


    @Override
    public void onMonthChanged(MaterialCalendarView widget, CalendarDay date) {


        // CalenderAdapter calenderAdapter = new CalenderAdapter(getActivity(), student_list_calender);
        // listView.setAdapter(calenderAdapter);
        Calendar cal = Calendar.getInstance();
        cal.setTime(date.getDate());
        int month = cal.get(Calendar.MONTH);
        List<Event> event = map.get(month);
        if (event != null && event.size() > 0)
            adapter.addItems(event);

        widget.invalidateDecorators();

    }


}

活动装饰

      public class EventDecorator implements DayViewDecorator {

/*
    private final Drawable drawable;
    private final CalendarDay day;
    private final int color;


    public EventDecorator(MaterialCalendarView view, Date date, int colors) {
//       super(view);

        this.day = CalendarDay.from(date);
        this.color = colors;
        this.drawable = createTintedDrawable(view.getContext(), color);
    }


    @Override
    public boolean shouldDecorate(CalendarDay day) {
        if (this.day.equals(day)) {
            return true;
        }
        return false;
    }

    @Override
    public void decorate(DayViewFacade view) {
        view.setSelectionDrawable(drawable);
    }

    private static Drawable createTintedDrawable(Context context, int color) {
        return applyTint(createBaseDrawable(context), color);
    }

    private static Drawable applyTint(Drawable drawable, int color) {
        Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
        DrawableCompat.setTint(wrappedDrawable, color);
        return wrappedDrawable;
    }

    private static Drawable createBaseDrawable(Context context) {
        return ContextCompat.getDrawable(context, R.drawable.ic_menu_send);
    }


   */

    private int color;
    private HashSet<CalendarDay> dates;

    public EventDecorator(int color, Collection<CalendarDay> dates) {
        this.color = color;
        this.dates = new HashSet<>(dates);
    }

    @Override
    public boolean shouldDecorate(CalendarDay day) {
        return dates.contains(day);
    }

    @Override
    public void decorate(DayViewFacade view) {
        view.addSpan(new DotSpan(5, color));
    }
}

事件

  public class Event {

    private Date date;
    private String events;

    public Event(Date date, String events) {
        this.date = date;
        this.events = events;

    }

    public Date getDate() {
        return date;
    }

    public String getEvents() {
        return events;
    }
}

我的适配器日历

public class MyAdapterCalendar extends ArrayAdapter<Event> {

    private List<Event> list;
    private LayoutInflater mInflater;

    public MyAdapterCalendar(Context context, List<Event> list) {
        super(context, R.layout.activity_calendar_event, list);
        this.mInflater = LayoutInflater.from(context);
        this.list = list;
    }

    static class ViewHolder {
        TextView text;

    }

    public void addItems(List<Event> list) {
        this.list.clear();
        this.list.addAll(list);
        notifyDataSetChanged();

    }


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;

        if (convertView == null) {

            convertView = mInflater.inflate(R.layout.activity_calendar_event, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.text = (TextView) convertView.findViewById(R.id.label);

            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.text.setText(list.get(position).getEvents());

        return convertView;
    }
}

activity\u calendar\u事件

RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Hello World"
        android:textSize="20sp"></TextView>


</RelativeLayout>

JSON

[
  {
    "EventID": 1011,
    "Title": "May Day",
    "Description": "Holiday for the International Labour Day",
    "StartDate": "2017-05-01T00:00:00",
    "StartTime": "00:00:00",
    "EndDate": "2017-05-02T00:00:00",
    "EndTime": "00:00:00",
    "IsFullDay": true,
    "IsHoliday": false,
    "DateTime": null
  },
  {
    "EventID": 1020,
    "Title": "d",
    "Description": "",
    "StartDate": "2017-04-27T00:00:00",
    "StartTime": "05:45:00",
    "EndDate": "2017-04-27T00:00:00",
    "EndTime": "05:45:00",
    "IsFullDay": false,
    "IsHoliday": false,
    "DateTime": null
  },
  {
    "EventID": 1019,
    "Title": "Mother's Day",
    "Description": "Mother's day",
    "StartDate": "2017-04-26T00:00:00",
    "StartTime": "10:00:00",
    "EndDate": "2017-04-26T00:00:00",
    "EndTime": "18:00:00",
    "IsFullDay": false,
    "IsHoliday": false,
    "DateTime": null
  }
]

我想在特定日期下显示点,它显示为事件。具体的月份应该列出具体的月份事件,而不是所有的事件,这是我目前正在讨论的事件。

共有3个答案

袁骏祥
2023-03-14

我假设您希望显示月份类型日历中的事件列表。ZCustomCalendar允许您为不同类型的日期创建自定义视图。在该自定义视图中,您可以定义一个列表视图,然后可以在其中显示事件列表。

家西岭
2023-03-14

您将需要一个EventDecorator类,如

public class EventDecorator implements DayViewDecorator {

    private int color;
    private HashSet<CalendarDay> dates;

    public EventDecorator(int color, Collection<CalendarDay> dates) {
        this.color = color;
        this.dates = new HashSet<>(dates);
    }

    @Override
    public boolean shouldDecorate(CalendarDay day) {
        return dates.contains(day);
    }

    @Override
    public void decorate(DayViewFacade view) {
        view.addSpan(new DotSpan(5, color));
    }
}

然后在主要活动/片段上,您需要使用同步任务来获取json数据并设置日历中的事件,就像这个示例一样。

/**
 * Shows off the most basic usage
 */
public class BasicActivityDecorated extends AppCompatActivity implements OnDateSelectedListener {

    private final OneDayDecorator oneDayDecorator = new OneDayDecorator();

    @BindView(R.id.calendarView)
    MaterialCalendarView widget;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_basic);
        ButterKnife.bind(this);

        widget.setOnDateChangedListener(this);
        widget.setShowOtherDates(MaterialCalendarView.SHOW_ALL);

        Calendar instance = Calendar.getInstance();
        widget.setSelectedDate(instance.getTime());

        Calendar instance1 = Calendar.getInstance();
        instance1.set(instance1.get(Calendar.YEAR), Calendar.JANUARY, 1);

        Calendar instance2 = Calendar.getInstance();
        instance2.set(instance2.get(Calendar.YEAR), Calendar.DECEMBER, 31);

        widget.state().edit()
                .setMinimumDate(instance1.getTime())
                .setMaximumDate(instance2.getTime())
                .commit();

        widget.addDecorators(
                new MySelectorDecorator(this),
                new HighlightWeekendsDecorator(),
                oneDayDecorator
        );

        new ApiSimulator().executeOnExecutor(Executors.newSingleThreadExecutor());
    }

    @Override
    public void onDateSelected(@NonNull MaterialCalendarView widget, @NonNull CalendarDay date, boolean selected) {
        //If you change a decorate, you need to invalidate decorators
        oneDayDecorator.setDate(date.getDate());
        widget.invalidateDecorators();
    }

    /**
     * Simulate an API call to show how to add decorators
     */
    private class ApiSimulator extends AsyncTask<Void, Void, List<CalendarDay>> {

        @Override
        protected List<CalendarDay> doInBackground(@NonNull Void... voids) {
            try {
                Thread.sleep(2000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            Calendar calendar = Calendar.getInstance();
            calendar.add(Calendar.MONTH, -2);
            ArrayList<CalendarDay> dates = new ArrayList<>();
            for (int i = 0; i < 30; i++) {
                CalendarDay day = CalendarDay.from(calendar);
                dates.add(day);
                calendar.add(Calendar.DATE, 5);
            }

            return dates;
        }

        @Override
        protected void onPostExecute(@NonNull List<CalendarDay> calendarDays) {
            super.onPostExecute(calendarDays);

            if (isFinishing()) {
                return;
            }

            widget.addDecorator(new EventDecorator(Color.RED, calendarDays));
        }
    }
}

您需要设置该类的模式以包含api调用,并使用该响应将日期绑定到日历。希望这会有帮助!

劳豪
2023-03-14

您需要添加点跨距。此外,我还必须阅读图书馆的文档,因为我自己没有使用过这个。

步骤1:在Fragment类中

 private List<CalendarDay> events = new ArrayList<>();

第2步:

private void makeJsonObjectRequest() {


    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss", Locale.getDefault());

    // i copied your json to load form assets folder
    // in our case you can get the json from the server
    // or any other location of your choice
    String response = loadJSONFromAsset();
    try {
        JSONArray jArray = new JSONArray(response);
        for (int i = 0; i < jArray.length(); i++) {
            JSONObject jsonObject = jArray.getJSONObject(i);
            String StartDate = jsonObject.getString("StartDate");
            Date date = simpleDateFormat.parse(StartDate);

            Log.d("Date ",""+date);
            CalendarDay day = CalendarDay.from(date);
            events.add(day);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }

    EventDecorator eventDecorator = new EventDecorator(Color.RED, events);
    calendarView.addDecorator(eventDecorator);

}

步骤3:更改EventDecorator类

public class EventDecorator implements DayViewDecorator {

private int color;
private HashSet<CalendarDay> dates;

public EventDecorator(int color, Collection<CalendarDay> dates) {
    this.color = color;
    this.dates = new HashSet<>(dates);
}

@Override
public boolean shouldDecorate(CalendarDay day) {
    return dates.contains(day);
}

@Override
public void decorate(DayViewFacade view) {
    view.addSpan(new DotSpan(5, color));
}
}

您可以查看DotSpan并自定义它。这是一个线性背景跨度

我模拟器上的屏幕截图

编辑:

具体的月份应该列出具体的月份事件,而不是所有的事件,这是我目前正在讨论的事件。

您需要检查当前显示的月份,并确保同步listview以相应地显示事件。根据日历显示的月份,清除用于在列表中显示事件的列表数据,并刷新列表。

或者你可以点击日期显示当天的事件。

你怎么做就留给你了。你可以看看这个https://github.com/memfis19/Cadar库,该库应提供见解或帮助您相应地修改代码。根据显示的月份,列表显示事件。

编辑2:

我的适配器

public class MyAdapter extends ArrayAdapter<Event> {

    private  List<Event> list;
    private LayoutInflater mInflater;

    public MyAdapter(Context context, List<Event> list) {
        super(context, R.layout.row, list);
        this.mInflater = LayoutInflater.from(context);
        this.list = list;
    }

    static class ViewHolder {
         TextView text;

    }

    public void addItems(List<Event> list) {
        this.list.clear();
        this.list.addAll(list);
        notifyDataSetChanged();

    }


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;

        if (convertView == null) {

            convertView = mInflater.inflate(R.layout.row, parent,false);
            viewHolder = new ViewHolder();
            viewHolder.text = (TextView) convertView.findViewById(R.id.label);

            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.text.setText(list.get(position).getEvents());

        return convertView;
    }   
}

我的日历片段

public class CalendarFragment extends Fragment implements OnMonthChangedListener {


    private MaterialCalendarView calendarView;
    private List<CalendarDay> calevents = new ArrayList<>();
    private List<Event> eventList = new ArrayList<>();
    private HashMap<Integer,List<Event>> map = new HashMap<>();
    private ListView listView;
    private MyAdapter adapter;
    private Calendar cal;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.calendar, container, false);

        listView = (ListView)view.findViewById(R.id.listview);

        adapter = new MyAdapter(getActivity(),eventList);
        listView.setAdapter(adapter);

        calendarView =  view.findViewById(R.id.calendarView);
        calendarView.setDateTextAppearance(View.ACCESSIBILITY_LIVE_REGION_ASSERTIVE);
        final Calendar calendar = Calendar.getInstance();
        calendarView.setSelectedDate(calendar.getTime());
        calendarView.setOnDateChangedListener(new OnDateSelectedListener() {
            @Override
            public void onDateSelected(@NonNull MaterialCalendarView widget, @NonNull CalendarDay date, boolean selected) {
                calendarView.setHeaderTextAppearance(R.style.AppTheme);
            }
        });



        calendarView.setOnMonthChangedListener(this);

        makeJsonObjectRequest();

        return view;
    }




    private void makeJsonObjectRequest() {


        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss", Locale.getDefault());

        String response = loadJSONFromAsset();
        try {
            JSONArray jArray = new JSONArray(response);
            for (int i = 0; i < jArray.length(); i++) {
                JSONObject jsonObject = jArray.getJSONObject(i);
                String StartDate = jsonObject.getString("StartDate");
                Date date = simpleDateFormat.parse(StartDate);

                String title =  jsonObject.getString("Title");

                Log.d("Date ",""+date);
                CalendarDay day = CalendarDay.from(date);
                Event event = new Event(date,title);
                cal = Calendar.getInstance();
                cal.setTime(date);
                int month = cal.get(Calendar.MONTH);

                if(!map.containsKey(month))
                {
                    List<Event> events = new ArrayList<>();
                    events.add(event);
                    map.put(month,events);
                }else
                {
                    List<Event> events = map.get(month);
                    events.add(event);
                    map.put(month,events);

                }

                calevents.add(day);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        // after parsing
        cal = Calendar.getInstance();
        int month = cal.get(Calendar.MONTH);
        List<Event> event =  map.get(month);
        adapter.addItems(event);
        EventDecorator eventDecorator = new EventDecorator(Color.RED, calevents);
        calendarView.addDecorator(eventDecorator);

    }

    public String loadJSONFromAsset() {
        String json = null;
        try {
            InputStream is = getActivity().getAssets().open("testjson.json");
            int size = is.available();
            byte[] buffer = new byte[size];
            is.read(buffer);
            is.close();
            json = new String(buffer, "UTF-8");
        } catch (IOException ex) {
            ex.printStackTrace();
            return null;
        }
        return json;
    }


    @Override
    public void onMonthChanged(MaterialCalendarView widget, CalendarDay date) {
        Calendar cal = Calendar.getInstance();
        cal.setTime(date.getDate());
        int month = cal.get(Calendar.MONTH);
        List<Event> event =  map.get(month);
        adapter.addItems(event);

    }
}
 类似资料:
  • 我想有一个月历视图显示所有的日子和事件在每一天。我找到了CalendarView,但它并不真正按我想要的方式显示事件。我一直在研究和检查大量的结果,直到我遇到了一个完整的应用程序,这就是SimpleMobileTools's Simple-Calendar。如果您还不明白我要找的是什么,下面是它们在月度视图日历上显示事件的方式: 不过,他们的应用程序有太多的功能,再加上它是一个完整的应用程序。我想

  • 问题内容: 我正在使用asp.net mvc列出jquery完整日历中的事件。下面是我用来通过mvc中的json列出事件的脚本。 但是以上脚本未在日历中显示任何事件。我在上面的脚本中做错了什么? 问题答案: 当我将json事件的日期解析为以下内容时,此问题已解决:

  • 我想显示一个日历,其中包含在日期上使用不同颜色的事件,类似于默认日历应用程序。但是我在默认日历视图中没有看到任何这样的API。 有人能告诉我正确的方向吗?如何进行?我应该扩展默认日历并添加自己的功能吗?或者我应该使用带有PageViewer和片段的5x5文本框吗?

  • 我想能够验证输入日期小时是否已经在谷歌日历中创建。 这是我得到的代码,但我现在被卡住了(谷歌快速入门教程)。这段代码给出了10个即将到来的事件。 但我希望能够输入一个日期,然后在添加之前验证事件是否已经存在。 编辑: 我尝试了这个代码,但是我得到了一个错误。 获取时出错:

  • 最近,在Google日历中添加了新事件并尝试从Google日历API中获取后,我从未获得我帐户主日历的新事件列表。 此外,我还尝试从开发人员控制台获取:https://developers.google.com/google-apps/calendar/v3/reference/events/list#try-it 它给出了相同的空项目列表作为响应,即使未来的事件存在。 但是我能够获取其他日历列表

  • 我正在使用以下代码实现引导datetimepicker: 包括文件的顺序为: 当我点击日历图标时,什么都不会发生。我在实施中犯了什么错误? 编辑: 增加了小提琴手:http://jsfiddle.net/1c1nr9sp/4/