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的文章！

教程