文档章节

jquery easyui 操作总结

 大东家
发布于 2015/08/27 13:21
字数 2015
阅读 23
收藏 0

src:http://lhdst-163-com.iteye.com/blog/1707232


1、dialog 
Java代码   收藏代码
  1. $("#dialog-form").dialog({  
  2.                     title : "任務",  
  3.                     width : 500,  
  4.                     resizable : false,  
  5.                                         cache: false,  //禁止缓存  
  6.                 href: '/Admin/Project/videoPlayer',//加载的页面地址  
  7.                                         closed: false,//默认不弹出  
  8.                     modal : true,//模式化窗口  
  9.                     shadow:false,//是否显示隐藏。若dialog的宽高是动态变化的,shadow不会自动更新。这种情况下最好设置为false。否则要手动处理  
  10.                     buttons : [{  
  11.                         text : 'Save',  
  12.                         handler : saveTask  
  13.                     }, {  
  14.                         text : 'Cancel',  
  15.                         handler : resetDialog  
  16.                     }]  
  17.                 });  
  18. $('#dialog-form').dialog('close');//关闭  
  19. $('#dialog-form').dialog('open');//打开  


不顯示默認的close按鈕 
Java代码   收藏代码
  1. closable:false,  

提示:dialog繼承自window,所以window的屬性設置dialog也可以用。 
2、draggable 
缺点:不能设置拖动范围。即使包含在一个div的container下,但是依然可以无限制拖动。而jquery ui能实现该功能。所以jquery easyui的draggable需要手动判断实现该功能。 
Java代码   收藏代码
  1. //拖动效果  
  2.             container.draggable({  
  3.                 containment : "#grid",//父容器  
  4.                 scroll : false,  
  5.                 delay : 0,  
  6.                 isDrag : true,  
  7.                 onStopDrag:function(e){  
  8.                     //获取拖动div容器  控制拖动范围  
  9.                     var dragContainer = $(".taskSelected").parent().parent();  
  10.                     var left = parseInt(dragContainer.css("left"));  
  11.                     var top = parseInt(dragContainer.css("top"));  
  12.                     if(isNaN(left) || left < 10 ){  
  13.                         dragContainer.css("left","10px")  
  14.                     }  
  15.                     if(isNaN(top) || top < 10 ){  
  16.                         dragContainer.css("top","10px")  
  17.                     }  
  18.                     var maxLeft = parseInt($("#grid").css("width"));  
  19.                     var maxTop = parseInt($("#grid").css("height"));  
  20.                     if(left >=  maxLeft){  
  21.                         dragContainer.css("left",(maxLeft-60)+"px");  
  22.                     }  
  23.                     if(top >= maxTop ){  
  24.                         dragContainer.css("top",(maxTop-60)+"px");  
  25.                     }  
  26.                 }  
  27.             });  


3、validate 
整个form的验证结果 
$("#taskForm").form('validate') 
文本验证 
Java代码   收藏代码
  1. <input type="text" name="taskName" id="taskName" validType="validateText"  required="true"  class="easyui-validatebox" />  

删除验证提示 
Java代码   收藏代码
  1. $(".easyui-validatebox").removeClass("validatebox-invalid");//删除验证提示  


删除验证 
Java代码   收藏代码
  1. $("#modelName").validatebox("destroy");  


扩展验证 
Java代码   收藏代码
  1. $.extend($.fn.validatebox.defaults.rules, {    
  2.                 equals: {    
  3.                     validator: function(value){    
  4.                         return value > 0;  
  5.                     },    
  6.                     message: '數據不正確,請重新輸入'    
  7.                 }    
  8. //数字验证应用扩展验证规则  
  9. <input name="test"  max="9999.99" precision="2" invalidMessage="不能超過6位數字"   
  10.                                  value="{$printDetailsBSig}" validType="equals[]"  class="sig easyui-numberbox" />  
  11.   
  12.             });  


Java代码   收藏代码
  1. $(document).ready(function(){  
  2.     $.extend($.fn.validatebox.defaults.rules, {    
  3.         userID: {    
  4.             validator: function(value){  
  5.                 var reg = /^[a-zA-Z_0-9]+$/  
  6.                 return reg.test(value);    
  7.             },    
  8.             message: '登錄名必須為字符[A-Z]或數字'    
  9.         }    
  10.     });   
  11.       
  12.     $.extend($.fn.validatebox.defaults.rules, {    
  13.         validateText: {    
  14.             validator: function(value){  
  15.                 var reg = /[<>]+/  
  16.                 return !reg.test(value);    
  17.             },    
  18.             message: '不能含有特殊字符<>'    
  19.         }    
  20.     });   
  21.   
  22.     $.extend($.fn.validatebox.defaults.rules, {    
  23.         number: {    
  24.             validator: function(value){  
  25.                 var reg = /^[0-9]+$/  
  26.                 return reg.test(value);    
  27.             },    
  28.             message: '此項必須為數字'    
  29.         }    
  30.     });   
  31.     
  32.   $.extend($.fn.validatebox.defaults.rules, {    
  33.           areaCode : {    
  34.             validator: function(value){  
  35.                 var reg = /^0\d{0,4}$/  
  36.       
  37.                 return reg.test(value);    
  38.             },    
  39.             message: '此項必須為1-4位數字'    
  40.         }    
  41.     }); //Extension number  
  42.   $.extend($.fn.validatebox.defaults.rules, {    
  43.           tel : {    
  44.             validator: function(value){  
  45.                 var reg = /^[0-9]{0,8}$/  
  46.                 return reg.test(value);    
  47.             },    
  48.             message: '此項必須為1-8位數字'    
  49.         }    
  50.     });   
  51.   $.extend($.fn.validatebox.defaults.rules, {    
  52.           extensionNumber : {    
  53.             validator: function(value){  
  54.                 var reg = /^[0-9]{0,5}$/  
  55.                 return reg.test(value);    
  56.             },    
  57.             message: '此項必須為1-5位數字'    
  58.         }    
  59.     });   
  60.   
  61.   
  62.     $.extend($.fn.validatebox.defaults.rules, {    
  63.         date: {    
  64.             validator: function(value){  
  65.                 var reg = /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}$/  
  66.                 return reg.test(value);    
  67.             },    
  68.             message: '此項必須為yyyy-mm-dd格式的日期'    
  69.         }    
  70.     });   
  71.       
  72.     $.extend($.fn.validatebox.defaults.rules, {    
  73.         account: {    
  74.             validator: function(value){  
  75.                 var reg = /^[A-Z_0-9]+$/  
  76.                 return reg.test(value);    
  77.             },    
  78.             message: 'Account 只能輸入大写字母'   
  79.         }    
  80. $.extend($.fn.validatebox.defaults.rules, {    
  81.         modelName: {    
  82.             validator: function(value){  
  83.                 var reg = /^[a-zA-Z_0-9]+$/  
  84.                 return reg.test(value);    
  85.             },    
  86.             message: 'Model Name必須為字符[A-Z]或數字'    
  87.         }    
  88.     });   
  89.     });   
  90.   
  91. });  


4、格式化日期 
Java代码   收藏代码
  1. $("#startDate,#endDate").datebox({  
  2.         formatter:formater  
  3.     });  
  4. //格式化日期  
  5. function formater(date)  
  6. {  
  7.     return date.getFullYear()+"-"+(parseInt(date.getMonth())+1) +"-"+date.getDate();  
  8. }  
  9. <input name="startDate" id="startDate" class="easyui-datebox" /> to   
  10.                     <input name="endDate" id="endDate" class="easyui-datebox" />  
  11. //日期控件只读  
  12. $(".datebox :text").attr("readonly","readonly");  


碰到一个问题,页面初始化时给一个datebox赋值,赋值是成功的,页面显示了这个值,也能将这个值赋给一个变量。但是在post form的时候这个datebox的getvalue是空的,查看html的值也是空的。但是给个延时50毫秒,html就有值了。很奇怪啊 

5、TAB 
div初始化 
Java代码   收藏代码
  1. <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px;">  
  2.         <div title="Tab1" data-options="tools:'#p-tools'" style="padding:20px;">  
  3.         </div>  
  4.         <div title="Tab2" data-options="closable:true,cache:false,href:'tabs_href_test.html'" style="padding:20px;">  
  5.             This is Tab2 with close button.  
  6.         </div>  
  7. </div>  


选择指定index的tab 
Java代码   收藏代码
  1. $("#tt").tabs('select',2);  

禁用TAB 
Java代码   收藏代码
  1. $('#tt').tabs('disableTab'1);   
  2. $('#tt').tabs('enableTab'1);  // enable the second tab panel  
  3. $('#tt').tabs('enableTab''Tab2'); enable the tab panel that has 'Tab2' title  

获取当前tab 
Java代码   收藏代码
  1. var tab = $('#tt').tabs('getSelected');  
  2. var index = $('#tt').tabs('getTabIndex',tab);  


切换tab时验证。若验证不通过则禁止切换 
Java代码   收藏代码
  1.       
  2. $("ul.tabs li").bind("mousedown", function(event) {  
  3.         var currTabIndex = getCurrTabIndex();  
  4.         var index = $(this).index();  
  5.         if (currTabIndex == index)  
  6.             return;  
  7.         var targetIndex = (currTabIndex == 1) ? 0 : 1;  
  8.         var valid1 = $("#tabs").find(".validatebox-invalid").length;  
  9.         if (valid1) {  
  10.             showTip("請填寫完整!");  
  11. //禁用要切换的tab再启用。这样就可以禁止tab的onSelect事件,并且样式还是正常的enable。  
  12.         $('#tabs').tabs('disableTab', targetIndex);  
  13.             $('#tabs').tabs('enableTab', targetIndex);  
  14.         } else {  
  15.             if (targetIndex == 1) {  
  16.                 var valid2 = checkMemberValid();  
  17.                 if (!valid2) {  
  18.                     $('#tabs').tabs('disableTab', targetIndex);  
  19.                 }  
  20.             }  
  21.             $('#tabs').tabs('enableTab', targetIndex);  
  22.         }  
  23.     })  


tab的内容是html 
Java代码   收藏代码
  1. <div id="tabs" class="easyui-tabs">  
  2.                         <div title="Project Info" data-options="closable:false,cache:false,href:'/Admin/Project/editProject/projectID/{$projectID}'" style="padding:20px;">  
  3.                         </div>  
  4.                         <div title="Videos" data-options="closable:false,cache:false,href:'/Admin/Project/editVideo/projectID/{$projectID}'" style="padding:20px;">  
  5.                         </div>  
  6.                     </div>  

若是这种内置方式,则内置的html的js文件必须放在主页面内。否则不会调用。相当于用get方式将该html的内容嵌套到主页面中。而不会加载对应的js和css文件。 

在tab加载完内容之后执行初始化函数 
$("#tabs").tabs({ 
onLoad:function(i){ 
console.log(i); 
initProject();//初始化editProject页面 

}) 

这种方式的优点:由于嵌套的内容是div,所以内容的高度增加或减少后会自动调整div的高度。 
缺点: 
1 若2个tab都包含了datebox元素,第2个tab的datebox的宽度会被设置为0.不知道什么原因。只能通过css强制更改对应的宽度。 

代码如下 
Java代码   收藏代码
  1. /**jquery easy ui datebox**/  
  2. .datebox {  
  3.     width:126px !important;  
  4. }  
  5. .datebox .combo-text {  
  6.     width:108px !important;  
  7. }  


2 初始化的时候以下代码执行了2次 
Java代码   收藏代码
  1. $("#tabs").tabs({  
  2.         onLoad:function(i){  
  3.             console.log(i);  
  4.             initProject();//初始化editProject页面  
  5.         }  
  6.     })  


这个原因是因为我在div中添加了tab的class,easyui会初始化一次,定义了tabs函数又会执行一次。将div的class删除掉就可以了。 
如下 
Java代码   收藏代码
  1. <div id="tabs" style="min-height:400px;height:650px; overflow: hidden;">  
  2.                         <div title="Project Info" data-options="closable:false,cache:false,href:'/Admin/Project/editProject/projectID/{$projectID}'" style="padding:0px;width:100%;height100%;">  
  3.                         <!-- <iframe scrolling="no" id="editProjectFrame" frameborder="0"  src="/Admin/Project/editProject/projectID/{$projectID}" style="width:100%;height:600px;"></iframe>-->  
  4.                         </div>  
  5.                         <div title="Videos" data-options="closable:false,cache:false" style="padding:0px;height: 100%;">  
  6.                             <iframe scrolling="no" id="editVideoFrame" frameborder="0"  src="/Admin/Project/editVideo/projectID/{$projectID}" style="width:100%;height:100%;"></iframe>  
  7.                         </div>  
  8.                     </div>  



设置tab的内容是iframe 
Java代码   收藏代码
  1. <div title="Tab4 with iframe" data-options="closable:true" style="overflow:hidden">  
  2.             <iframe scrolling="yes" frameborder="0"  src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>  
  3.         </div>  


这种方式是将整个html文件嵌入,包括了html,js,css 而不只是html内容。 

这种方式的优点:用iframe是独立的页面,若已经实现了该页面,基本上不用怎么修改代码。 

缺点:若iframe中的内容高度是动态的,则需要动态调整父窗口的iframe的高度。否则看不到动态新增的内容。 
代码如下 
Java代码   收藏代码
  1. var iframe = $(window.parent.document).find("#editProjectFrame").eq(0);  
  2.                     $(iframe).css("height",parseInt($(iframe).css("height").substring(0,3)) + 30 + "px");  


tabs的参考资料: 
http://www.easyui.info/archives/164.html 
http://www.easyui.info/archives/501.html 

卸载控件 
Java代码   收藏代码
  1. currTr.find(".memberList").combobox("destroy");  

所有都是destroy方法。 

6 datetimebox 
datetimebox不像datebox,它没有formate方法可以设置日期格式。只能通过导入locale语言包。来更改日期时间格式。 

若要修改它的格式又要保持繁體。就需要導入zh_TW的js包,並將zh_CN的 
Java代码   收藏代码
  1. $.fn.datebox.defaults.formatter = function(date){  
  2.         var y = date.getFullYear();  
  3.         var m = date.getMonth()+1;  
  4.         var d = date.getDate();  
  5.         return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);  
  6.     };  
  7.     $.fn.datebox.defaults.parser = function(s){  
  8.         if (!s) return new Date();  
  9.         var ss = s.split('-');  
  10.         var y = parseInt(ss[0],10);  
  11.         var m = parseInt(ss[1],10);  
  12.         var d = parseInt(ss[2],10);  
  13.         if (!isNaN(y) && !isNaN(m) && !isNaN(d)){  
  14.             return new Date(y,m-1,d);  
  15.         } else {  
  16.             return new Date();  
  17.         }  
  18.     };  

考入對應的位置。 

如設置datetimebox為只讀,也同樣是設置 
$(".datebox :text").attr("readonly","readonly"); 
而不是.datetimebox 

showSeconds="false" 設置不顯示毫秒 

setValue()設置日期 

getValue()取得日期 


datetimebox也有onSelet 事件,选择某个日期时就会触发。当在onSelect中将datetimebox 的值设置为'',再点击的时候存储的值是当前日期。 


7. combobox 
Defines how to load list data when text changed. Set to 'remote' if the combobox loads from server. When set to 'remote' mode, what the user types will be sent as the http request parameter named 'q' to server to retrieve the new data. 

若是remote請求,則會默認帶一個q的request參數。無法更改成其他類型。 

参考: 
http://www.jeasyui.com/documentation/index.php#
分享到:   

本文转载自:http://blog.csdn.net/xiaohelong2005/article/details/19189037

粉丝 22
博文 255
码字总数 111936
作品 0
长沙
项目经理
私信 提问
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程【20讲】 jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。非职业讲师孙宇讲授,全...

Amamatthew
2014/09/28
1K
0
EasyUI 1.5.x Of Insdep Theme 1.0.0 RC1 美化主题大包已发布

关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正...

magicweng
2017/02/22
6.2K
24
jQuery EasyUI DataGrid Checkbox 数据设定与取值

有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyUI 官网 jQuery EasyUI Documentation DataGrid Demo CheckBox select on DataGrid...

Amamatthew
2014/10/10
231
0
jQuery EasyUI IE8 兼容性问题

网页错误详细信息 用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media ......

码农先生
2013/06/01
52.6K
10

没有更多内容

加载失败,请刷新页面

加载更多

刚哥谈架构 (二) 我眼中的架构师

之前在公司,有小伙伴在向别人介绍我的时候,经常会有人这么说:“刚哥是我们的architcture”,如果来人是老外,心中一定是一惊,心中暗叹,“这位匪首看上去貌不惊人,难道已经做到了架构和...

naughty
27分钟前
2
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
56分钟前
44
2
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部