HTML 利用 select 過濾 javascript fullcalendar 的內容

2018-08-14

1078
0
jQuery
2018-08-21

最近把 select 當作 fullcalendar 套件的 filter

整理了一點心得...

P.S 只記錄關鍵部分的 code

範例:

假設今天要做一個補習班的行事曆, 要show出學生在某段時間上了某堂課

做一個 filter, 裡面有課程可以選擇,

方法:

用 select 搭配 fullcalendar

選到 select 裡面的選項

會只 show 出 fullcalendar 裡面符合選項的 event

流程:

先假設, select 的 id 設為 selectId

1.初始化 fullcalendar

$('#calendarId').fullCalendar({
 //fullcaledar大部分的參數省略
 eventSources:[{
   url: '/projectName/...',   //此url會打到後端, 我用spring搭配restful, 撈完資料可以傳值回前端
   type: 'post',
   contentType : "application/json;charset=UTF-8", //撈資料本例我用json, 一定要設定編碼要不然又亂碼
   dataType : "json", //這裡也要設定
   data:{
     title: "title",  //title會直接show在行事曆上,本例我是拿來當學生的姓名
     start: "start",
     end: "end",
     description: "description"  //只能接 fullcalendar 中 event(在fullcalendar顯示的每一筆行程)的參數
   },                            //後端有擁有這四個屬性的pojo,封裝從資料庫撈的值再傳到前端
   error: function() {
      alert('有錯!');
   }
  }],
  eventRender: function(event, element) {
    	 element.find('.fc-title').after("<span>" + event.description + "</span>"); 
         //行事曆上的每一筆 event 沒有 show 出 description 的地方, 就用.after()自己設一個	            
		 element.attr( 'data-description', event.description );
         //這是用來過濾要show或是要hide甚麼資料用的
		 element.attr( 'data-title', event.title );
         
  }
});

只記錄 " eventSources " 可以取得多個資料來源

與 " eventRender " , 當每一筆資料被渲染在 fullcalendar 時, 可以修改這筆資料的 DOM

P.S 對其他參數有興趣請參考:https://fullcalendar.io/download
下載後有很多範例可供參考, notepad++ 直接開裡面的範例就可以看到其他的參數

至於 POJO 我是這樣寫的...

import org.springframework.stereotype.Component;

@Component
public class Event {
	
	private String title;
	
	private String start;
	
	private String end;
	
	private String description;

	//...以下省略,都是setter與getter

}

2.建立 select

<select  id="selectId" > 
   <option value="Java">java</option>
   <option value="python">python</option>
   <option value="C">C</option>
   <option value="C++">C++</option>
</select>

這裡的值會跟行事曆裡面的 data-description 對應到

3.一旦 filter 被切換項目, 將沒有被選擇到的部分都藏起來

比如說我有 java, C++, C, python 這四個選項

而撈出來的每筆 event 資料中的 description , 會是這 4 個選項其一

假設我選了java, 那麼每一個 event 中 data-description 這個屬性中不是java的就不能讓user看到, 是java就show出來

$('#selectId').change(function(){

   //先show出所有的課程
   $('#selectId').each(function() {
        $("a[data-description='" + $(this).val()  + "']" ).show();               
   }); 

   //取得沒被選擇的所有選項串成字串
   var str = "";
   $('#selectId').find("option:not(:selected)").each(function() {
           str += $( this ).val() + ",";
   }); 

   //將字串分割, 在迴圈內將 與沒有被選擇的 event 藏起來
   for(var i = 0; i<arr.length; i++){
       //event 實際上就是 <a></a>, 要讓整個 event 不見就要控制它
       //取得data-description為arr[i] 的 <a>,再 hide
       $("a[data-description='" + arr[i]  + "']" ).hide();       
   }   
});

總結:

其實讓每個 html 元素的 data-* attribute 設定跟 select 裡面的選項相同

再去操作他們我自己覺得挺方便的

但在網路上我比較常看到

一輸入string就把裡面有string的資料過濾出來,

不是的藏起來這種寫法 ( 在 jQuery datatable 套件的範例就找到蠻多 )

上面寫的部分缺少了後端程式, 跟實際上測試的效果

心情好&&有時間時, 我再自己補起來...

2018.8.21 增加 POJO 的code

回首頁