jQuery EasyUI使用教程之建立一個課程表

時間 2019-11-10

標籤 jquery easyui 使用教程建立一個課程表欄目 JQuery 简体版

原文原文鏈接

<jQuery EasyUI最新版下載>html
本教程將爲你展現如何使用jQuery EasyUI建立一個學校的課程表。咱們將建立兩個表：學校的科目在左邊，時間表在右邊，你能夠拖動學校科目並將其放在時間表的單元格中。學校的科目是一個"div class='item'"元素，然而時間表單元格是一個"td class='drop'"元素。app
查看演示函數
顯示學校科目ui
 
 < 
 div 
 class 
 = 
 "left" 
 > 
 
 < 
 table 
 > 
 
 < 
 tbody 
 >< 
 tr 
 > 
 
 < 
 td 
 >< 
 div 
 class 
 = 
 "item" 
 >English</ 
 div 
 ></ 
 td 
 > 
 
 </ 
 tr 
 > 
 
 < 
 tr 
 > 
 
 < 
 td 
 >< 
 div 
 class 
 = 
 "item" 
 >Science</ 
 div 
 ></ 
 td 
 > 
 
 </ 
 tr 
 > 
 
 <!-- other subjects --> 
 
 </ 
 tbody 
 ></ 
 table 
 > 
 
 </ 
 div 
 > 
顯示時間表this
 
 < 
 div 
 class 
 = 
 "right" 
 > 
 
 < 
 table 
 > 
 
 < 
 tbody 
 >< 
 tr 
 > 
 
 < 
 td 
 class 
 = 
 "blank" 
 ></ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "title" 
 >Monday</ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "title" 
 >Tuesday</ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "title" 
 >Wednesday</ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "title" 
 >Thursday</ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "title" 
 >Friday</ 
 td 
 > 
 
 </ 
 tr 
 > 
 
 < 
 tr 
 > 
 
 < 
 td 
 class 
 = 
 "time" 
 >08:00</ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "drop" 
 ></ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "drop" 
 ></ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "drop" 
 ></ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "drop" 
 ></ 
 td 
 > 
 
 < 
 td 
 class 
 = 
 "drop" 
 ></ 
 td 
 > 
 
 </ 
 tr 
 > 
 
 <!-- other cells --> 
 
 </ 
 tbody 
 ></ 
 table 
 > 
 
 </ 
 div 
 > 
拖動左側的學校科目spa
 
 $( 
 '.left .item' 
 ).draggable({ 
 
 revert: 
 true 
 , 
 
 proxy: 
 'clone' 
 
 }); 
將學校的科目放在時間表的單元格中code
 
 $( 
 '.right td.drop' 
 ).droppable({ 
 
 accept:  
 '.item' 
 , 
 
 onDragEnter: 
 function 
 (){ 
 
 $( 
 this 
 ).addClass( 
 'over' 
 ); 
 
 }, 
 
 onDragLeave: 
 function 
 (){ 
 
 $( 
 this 
 ).removeClass( 
 'over' 
 ); 
 
 }, 
 
 onDrop: 
 function 
 (e,source){ 
 
 $( 
 this 
 ).removeClass( 
 'over' 
 ); 
 
 if 
 ($(source).hasClass( 
 'assigned' 
 )){ 
 
 $( 
 this 
 ).append(source); 
 
 }  
 else 
 { 
 
 var 
 c = $(source).clone().addClass( 
 'assigned' 
 ); 
 
 $( 
 this 
 ).empty().append(c); 
 
 c.draggable({ 
 
 revert: 
 true 
 
 }); 
 
 } 
 
 } 
 
 }); 
正如你所看到的代碼同樣，當用戶在左側拖動學校科目並將其放到時間表的單元格中時，onDrop回調函數將會被調用。咱們將左側拖動的源元素複製並把它附加到時間表單元格上，當把學校科目從時間表的某個單元格拖動到其餘單元格時，只需簡單地移動它便可。orm
下載該EasyUI示例：easyui-timetable-demo.ziphtm
有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！

教程