`
flex_莫冲
  • 浏览: 1095638 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery easyui 操作总结

jqueryJavaScriptui 
阅读更多
1、dialog

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


不顯示默認的close按鈕 
closable:false,

提示：dialog繼承自window，所以window的屬性設置dialog也可以用。
2、draggable
缺点：不能设置拖动范围。即使包含在一个div的container下，但是依然可以无限制拖动。而jquery ui能实现该功能。所以jquery easyui的draggable需要手动判断实现该功能。 
//拖动效果
			container.draggable({
				containment : "#grid",//父容器
				scroll : false,
				delay : 0,
				isDrag : true,
				onStopDrag:function(e){
					//获取拖动div容器  控制拖动范围
					var dragContainer = $(".taskSelected").parent().parent();
					var left = parseInt(dragContainer.css("left"));
					var top = parseInt(dragContainer.css("top"));
					if(isNaN(left) || left < 10 ){
						dragContainer.css("left","10px")
					}
					if(isNaN(top) || top < 10 ){
						dragContainer.css("top","10px")
					}
					var maxLeft = parseInt($("#grid").css("width"));
					var maxTop = parseInt($("#grid").css("height"));
					if(left >=  maxLeft){
						dragContainer.css("left",(maxLeft-60)+"px");
					}
					if(top >= maxTop ){
						dragContainer.css("top",(maxTop-60)+"px");
					}
				}
			});


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

删除验证提示 
$(".easyui-validatebox").removeClass("validatebox-invalid");//删除验证提示


删除验证 
$("#modelName").validatebox("destroy");


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

			});



$(document).ready(function(){
    $.extend($.fn.validatebox.defaults.rules, {  
		userID: {  
			validator: function(value){
			    var reg = /^[a-zA-Z_0-9]+$/
		        return reg.test(value);  
			},  
			message: '登錄名必須為字符[A-Z]或數字'  
		}  
    }); 
	
	$.extend($.fn.validatebox.defaults.rules, {  
		validateText: {  
			validator: function(value){
			    var reg = /[<>]+/
		        return !reg.test(value);  
			},  
			message: '不能含有特殊字符<>'  
		}  
    }); 

	$.extend($.fn.validatebox.defaults.rules, {  
		number: {  
			validator: function(value){
			    var reg = /^[0-9]+$/
		        return reg.test(value);  
			},  
			message: '此項必須為數字'  
		}  
    }); 
  
  $.extend($.fn.validatebox.defaults.rules, {  
		  areaCode : {  
			validator: function(value){
			    var reg = /^0\d{0,4}$/
	
		        return reg.test(value);  
			},  
			message: '此項必須為1-4位數字'  
		}  
    }); //Extension number
  $.extend($.fn.validatebox.defaults.rules, {  
		  tel : {  
			validator: function(value){
			    var reg = /^[0-9]{0,8}$/
		        return reg.test(value);  
			},  
			message: '此項必須為1-8位數字'  
		}  
    }); 
  $.extend($.fn.validatebox.defaults.rules, {  
		  extensionNumber : {  
			validator: function(value){
			    var reg = /^[0-9]{0,5}$/
		        return reg.test(value);  
			},  
			message: '此項必須為1-5位數字'  
		}  
    }); 


	$.extend($.fn.validatebox.defaults.rules, {  
		date: {  
			validator: function(value){
			    var reg = /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}$/
		        return reg.test(value);  
			},  
			message: '此項必須為yyyy-mm-dd格式的日期'  
		}  
    }); 
	
	$.extend($.fn.validatebox.defaults.rules, {  
		account: {  
			validator: function(value){
			    var reg = /^[A-Z_0-9]+$/
		        return reg.test(value);  
			},  
			message: 'Account 只能輸入大写字母' 
		}  
$.extend($.fn.validatebox.defaults.rules, {  
		modelName: {  
			validator: function(value){
			    var reg = /^[a-zA-Z_0-9]+$/
		        return reg.test(value);  
			},  
			message: 'Model Name必須為字符[A-Z]或數字'  
		}  
    }); 
    }); 

});


depends驗證依賴特定條件才開啟，如下面的required用{depends:function()}表示，return true才生效。 

"original_price":{
                required: {
                   depends: function(element) {
                      if(some condition){return true;}
                    }
                },
                 number:true,
                 min:0,
                 max:10000
             },


如果需要用到form的valid()方法，form內驗證的輸入框必須帶上name 屬性，否則不計入驗證範圍。

如果需要動態加上輸入框的驗證，則可以通過 
$("#input").rules("add",{required: true,
			checkTitle:true,
			checkTagGroup:true,
			messages: {
			    required: "請填寫標題名稱"
			  }
})



如果不帶name的輸入框需要驗證請使用
$("#input").valitebox();

可通過js動態加上驗證 
$('#input').validatebox({
    required: true,
    validType: 'email'
});


這種用法就跟form沒關係了，有沒有form都無所謂。

發現一個form valid的bug，動態添加form的驗證rules。。 
// init validate
		$("#item_list .tag_input").each(function () {
			console.log($(this));
			$(this).rules("add", {
				required: true,
				checkTitle:true,
				messages: {
					required: "請填寫名稱"
				}
			})
		})


如果對應的元素沒有id，則使用form.valid() 生成的結果是錯誤的。因為某個元素的值丟失了（估計是通過ID匹配的），導致("#itemForm").validate()中的currentElements匹配元素錯誤。而只要給每個驗證元素加上ID值，就可以避免這個問題。真是浪費了我很多時間才找出這個bug



4、格式化日期 
$("#startDate,#endDate").datebox({
		formatter:formater
	});
//格式化日期
function formater(date)
{
	return date.getFullYear()+"-"+(parseInt(date.getMonth())+1) +"-"+date.getDate();
}
<input name="startDate" id="startDate" class="easyui-datebox" /> to 
                	<input name="endDate" id="endDate" class="easyui-datebox" />
//日期控件只读
$(".datebox :text").attr("readonly","readonly");


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

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


选择指定index的tab 
$("#tt").tabs('select',2);

禁用TAB 
$('#tt').tabs('disableTab', 1);	
$('#tt').tabs('enableTab', 1);	// enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2');	enable the tab panel that has 'Tab2' title

获取当前tab 
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);


切换tab时验证。若验证不通过则禁止切换 
	
$("ul.tabs li").bind("mousedown", function(event) {
		var currTabIndex = getCurrTabIndex();
		var index = $(this).index();
		if (currTabIndex == index)
			return;
		var targetIndex = (currTabIndex == 1) ? 0 : 1;
		var valid1 = $("#tabs").find(".validatebox-invalid").length;
		if (valid1) {
			showTip("請填寫完整!");
//禁用要切换的tab再启用。这样就可以禁止tab的onSelect事件，并且样式还是正常的enable。
		$('#tabs').tabs('disableTab', targetIndex);
			$('#tabs').tabs('enableTab', targetIndex);
		} else {
			if (targetIndex == 1) {
				var valid2 = checkMemberValid();
				if (!valid2) {
					$('#tabs').tabs('disableTab', targetIndex);
				}
			}
			$('#tabs').tabs('enableTab', targetIndex);
		}
	})


tab的内容是html 
<div id="tabs" class="easyui-tabs">
						<div title="Project Info" data-options="closable:false,cache:false,href:'/Admin/Project/editProject/projectID/{$projectID}'" style="padding:20px;">
						</div>
						<div title="Videos" data-options="closable:false,cache:false,href:'/Admin/Project/editVideo/projectID/{$projectID}'" style="padding:20px;">
						</div>
					</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强制更改对应的宽度。

代码如下 
/**jquery easy ui datebox**/
.datebox {
	width:126px !important;
}
.datebox .combo-text {
	width:108px !important;
}


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


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



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


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

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

缺点：若iframe中的内容高度是动态的，则需要动态调整父窗口的iframe的高度。否则看不到动态新增的内容。
代码如下 
var iframe = $(window.parent.document).find("#editProjectFrame").eq(0);
					$(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

卸载控件 
currTr.find(".memberList").combobox("destroy");

所有都是destroy方法。

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

若要修改它的格式又要保持繁體。就需要導入zh_TW的js包，並將zh_CN的 
$.fn.datebox.defaults.formatter = function(date){
		var y = date.getFullYear()

7 form
1.3.5版本發現一個bug，比較奇怪的。

$("#addForm").form({
	    'url':'add',
	    onSubmit:function(param){
	        var valid = $(this).form('validate');
	        if (!valid) {
	            form.unmask();
	            return valid;
	        }
	        param.text_content = [];
	        param.image_content = [];
	        $("#item_list .text_content").each(function () {
	        	var textObj = {};
	        	//textObj.title = $(this).find(".text_title_row").val();
	        	textObj.tag = $(this).find(".text_tag_row").val();
	        	textObj.length = $(this).find(".text_content_length_row").val();
	        	param.text_content.push(textObj);
	        })
	        
	        $("#item_list .image_content").each(function () {
	        	var imageObj = {};
	        	//imageObj.title = $(this).find(".image_title_row").val();
	        	imageObj.tag = $(this).find(".image_tag_row").val();
	        	param.image_content.push(imageObj);
	        })
	        param.text_content = JSON.stringify(param.text_content);
	        param.image_content = JSON.stringify(param.image_content);
	        console.log("on submit");
	        return valid;
	    },
	    success:function(data){
	    	submitable = true;
	        var obj = jQuery.parseJSON(data);
	        form.unmask();
	        alert(obj.info);
	        if(obj.status){
	            window.location.href = "/Admin/Template/index";
	        }
	    }
	})

$('#saveBtn').click(function(){
		if (!submitable) return;
	    var valid = form.valid();
	    //check item list
	    if(valid && $('#item_list').find(".row").length === 0){
	        valid=false;
	        alert('請添加文本或圖片');
	    }
	    if (valid) {
	    	submitable = false;
	        form.mask('submiting...');
	        form.submit();
	    } else {
	        validator.focusInvalid();
	        submitable = true;
	    }
	})





上述代碼，在新增頁面提交時，只會執行一次post，而在編輯頁面第一次提交時會執行2次post，若失敗，則之後都是提交一次post。

若將form的代碼寫入saveBtn的click function中也一樣。但是若改寫成

	$('#saveBtn').click(function(){
		if (!submitable) return;
	    var valid = form.valid();
	    //check item list
	    if(valid && $('#item_list').find(".row").length === 0){
	        valid=false;
	        alert('請添加文本或圖片');
	    }
	    if (valid) {
	    	submitable = false;
$("#addForm").form("submit", {
	    'url':'add',
	    onSubmit:function(param){
	        var valid = $(this).form('validate');
	        if (!valid) {
	            form.unmask();
	            return valid;
	        }
	        param.text_content = [];
	        param.image_content = [];
	        $("#item_list .text_content").each(function () {
	        	var textObj = {};
	        	//textObj.title = $(this).find(".text_title_row").val();
	        	textObj.tag = $(this).find(".text_tag_row").val();
	        	textObj.length = $(this).find(".text_content_length_row").val();
	        	param.text_content.push(textObj);
	        })
	        
	        $("#item_list .image_content").each(function () {
	        	var imageObj = {};
	        	//imageObj.title = $(this).find(".image_title_row").val();
	        	imageObj.tag = $(this).find(".image_tag_row").val();
	        	param.image_content.push(imageObj);
	        })
	        param.text_content = JSON.stringify(param.text_content);
	        param.image_content = JSON.stringify(param.image_content);
	        console.log("on submit");
	        return valid;
	    },
	    success:function(data){
	    	submitable = true;
	        var obj = jQuery.parseJSON(data);
	        form.unmask();
	        alert(obj.info);
	        if(obj.status){
	            window.location.href = "/Admin/Template/index";
	        }
	    }
	})	    	

	        form.mask('submiting...');
	        //form.submit();
	    } else {
	        validator.focusInvalid();
	        submitable = true;
	    }
	})






則每次都只提交一次post。



升級到1.5版本試下有沒有這個問題

升級後依然有這個問題。

  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      javascript浮点运算偏差的成因及解决方法
    

  

  

        
  

    
  

    
评论

    
    

  

    1 楼
    jidangrensheng
    2014-03-17  
    
    
  

  
很好的讲解了。。受教 





    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论

相关推荐

    SSH+Jquery easyUI后台管理系统

    总结起来，SSH+jQuery EasyUI后台管理系统是将SSH的强大学术和企业支持与jQuery EasyUI的易用性和美观性相结合，以提供高效、可维护的后台管理解决方案。通过这种方式，开发者可以专注于业务逻辑，而无需过多关注...

    基于JQueryEasyUI类库的WebForm控件库

    总结，基于JQueryEasyUI的WebForm控件库为.NET开发者提供了一个强大的工具集，简化了WebForm开发过程，提高了开发效率。通过深入理解并熟练运用这个控件库，开发者可以创建出既美观又功能强大的Web应用程序。同时，...

    李炎恢jQuery EasyUI视频教程

    ### jQuery EasyUI视频教程知识点概览 #### 一、jQuery EasyUI简介 - **定义**：jQuery EasyUI是一种简化Web开发的工具集，它通过整合jQuery框架与一系列UI组件，帮助开发者快速创建出功能丰富且视觉效果良好的用户...

    jquery-easyui-1.3.3

    总结来说，jQuery EasyUI 1.3.3 是一款强大且易于使用的前端框架，它的组件丰富、功能全面，为Web开发提供了极大的便利。无论是新手还是经验丰富的开发者，都能从中受益，快速构建出功能强大、界面美观的Web应用。

    Jquery EasyUI DeskTop原创

    jQuery的核心特性可以总结为：选择器、DOM操作、事件处理、动画和Ajax。通过使用jQuery，开发者可以更高效地编写JavaScript代码，减少跨浏览器兼容性问题。 **EasyUI框架** EasyUI是基于jQuery的前端框架，提供了...

    jquery-easyui-1.7.0.zip官方文档

    总结，jQuery EasyUI 1.7.0以其丰富的组件、强大的功能和良好的文档支持，成为了前端开发中的得力助手。无论你是初学者还是经验丰富的开发者，都能从中找到合适的工具和方法，快速打造出专业且用户体验优秀的Web应用...

    jqueryEasyUI

    标题中的"jqueryEasyUI"正是指这一强大的前端框架，它极大地简化了网页的界面构建过程，使得开发者能够快速、高效地创建出功能丰富的交互式界面。 jQuery EasyUI 的核心在于其提供的丰富组件和样式，这些组件包括但...

    jQueryEasyUI

    总结，jQueryEasyUI是开发现代Web应用的强大工具，通过其丰富的组件和灵活的数据绑定机制，可以极大地提高开发效率。与Java的结合，使得前后端分工明确，提升了系统的可维护性和扩展性。同时，其响应式设计也适应了...

    【jQueryEasyUI总结】

    《jQueryEasyUI总结》 jQueryEasyUI是一款基于jQuery和HTML5的前端开发框架，它极大地简化了用户界面的构建过程，让开发者可以更专注于业务逻辑而不是界面细节。本篇文章将深入探讨jQueryEasyUI的主要功能、核心...

    jquery EasyUI 1.4.3奇葩案例代码

    总结，"jQuery EasyUI 1.4.3奇葩案例代码"是一个宝贵的资源，它不仅展示了EasyUI在非典型场景下的应用，也提供了一种学习和探索EasyUI新功能和扩展方式的途径。通过对这些案例的深入学习，开发者可以提升自己的前端...

    jquery-easyui-1.4.5_easyuiapi_

    总结，jQuery EasyUI 1.4.5是一个强大且易用的前端框架，通过其丰富的组件和API，开发者可以高效地构建出功能丰富的Web应用。理解并熟练掌握EasyUI的API是提升开发效率的关键，同时也为项目带来了更多可能性。在实际...

    JQueryEasyUI整站文件

    总结起来，jQuery EasyUI 是一个强大的前端开发工具，通过其丰富的组件和简单易用的API，可以帮助开发者快速构建响应式的Web应用。理解并熟练掌握 EasyUI 的组件和API，是提升Web开发效率的关键。同时，结合实际项目...

    Jquery easyUI 离线包

    总结，JQuery EasyUI离线包1.3.0版本为开发者提供了一个完整的开发环境，包括各种组件的DEMO和API文档，使得在没有网络的情况下也能进行高效的工作。通过深入理解和实践，开发者可以轻松创建功能丰富的Web界面，提升...

    jquery-easyui-1.2.3实例参考

    总结，"jquery-easyui-1.2.3实例参考"是一个全面了解和学习jQuery EasyUI的好材料。通过实践这些实例，开发者不仅可以掌握框架的基本用法，还能深入理解其工作原理，从而在实际项目中发挥出jQuery EasyUI的强大潜力...

    JQueryEasyui1.3.6+电子书文档+14套主题

    总结来说，《JQueryEasyui1.3.6+电子书文档+14套主题》是开发人员学习和使用jQuery EasyUI的重要资源，无论是初学者还是经验丰富的开发者，都能从中受益，快速构建出高效、美观的Web应用。通过深入学习和实践，你...

    jQuery EasyUI 中文文档

    ### jQuery EasyUI 中文文档知识点概述 #### 一、jQuery EasyUI 概述 jQuery EasyUI 是一个基于 jQuery 的简化用户界面插件集合。它提供了一系列丰富的用户界面组件，可以帮助开发者快速构建美观且功能强大的 Web ...

    jQuery EasyUI 1.5.2 版 API 中文版 .rar

    总结来说，jQuery EasyUI 1.5.2 版 API 中文版是开发人员不可或缺的工具，它提供了一套完整的解决方案，让开发者能够专注于业务逻辑，而不是繁琐的界面实现。通过深入学习和利用这个API，可以大大提升开发效率，创建...

    jquery easyui图标拓展

    总结来说，"jQuery EasyUI 图标拓展"是针对原生 EasyUI 图标集的一个扩展，它提供了更多样化、个性化的图标选择，以满足更复杂的界面设计需求。开发者可以通过简单的 CSS 类引用，轻松地将这些拓展图标整合进项目中...

    JQueryEasyUI的增删查改

    "JQueryEasyUI的增删查改"是Web应用中最基本的功能，通常指的是创建（Create）、读取（Read）、更新（Update）和删除（Delete）操作，也就是常说的CRUD操作。这些功能对于任何数据管理型的应用来说都是必不可少的。 ...

    Jqueryeasyui文档

    总结，jQuery EasyUI 是一个强大且易用的前端框架，它结合了 jQuery 的便利性和丰富的 UI 组件，为开发者带来了高效的开发体验。通过深入学习和理解这份文档，你将能够轻松构建出美观、功能完善的 Web 应用程序。

Magicbox
Global site tag (gtag.js) - Google Analytics