jquery easyui 操作总结-白红宇

jquery easyui 操作总结

阅读量：5969 次

发布时间：2019-06-19

本文共 9099 字，大约阅读时间需要 30 分钟。

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

1、dialog

Java代码

$("#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按鈕

Java代码

closable:false,

提示：dialog繼承自window，所以window的屬性設置dialog也可以用。

2、draggable

缺点：不能设置拖动范围。即使包含在一个div的container下，但是依然可以无限制拖动。而jquery ui能实现该功能。所以jquery easyui的draggable需要手动判断实现该功能。

Java代码

//拖动效果

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')

文本验证

Java代码

<input type="text" name="taskName" id="taskName" validType="validateText" required="true" class="easyui-validatebox" />

删除验证提示

Java代码

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

删除验证

Java代码

$("#modelName").validatebox("destroy");

扩展验证

Java代码

$.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" />

});

Java代码

$(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]或數字'

}

});

});

});

4、格式化日期

Java代码

$("#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初始化

Java代码

<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

Java代码

$("#tt").tabs('select',2);

禁用TAB

Java代码

$('#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

Java代码

var tab = $('#tt').tabs('getSelected');

var index = $('#tt').tabs('getTabIndex',tab);

切换tab时验证。若验证不通过则禁止切换

Java代码

$("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

Java代码

<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强制更改对应的宽度。

代码如下

Java代码

/**jquery easy ui datebox**/

.datebox {

width:126px !important;

}

.datebox .combo-text {

width:108px !important;

}

2 初始化的时候以下代码执行了2次

Java代码

$("#tabs").tabs({

onLoad:function(i){

console.log(i);

initProject();//初始化editProject页面

}

})

这个原因是因为我在div中添加了tab的class，easyui会初始化一次，定义了tabs函数又会执行一次。将div的class删除掉就可以了。

如下

Java代码

<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%;">

</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

Java代码

<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的高度。否则看不到动态新增的内容。

代码如下

Java代码

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

卸载控件

Java代码

currTr.find(".memberList").combobox("destroy");

所有都是destroy方法。

6 datetimebox

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

若要修改它的格式又要保持繁體。就需要導入zh_TW的js包，並將zh_CN的

Java代码

$.fn.datebox.defaults.formatter = function(date){

var y = date.getFullYear();

var m = date.getMonth()+1;

var d = date.getDate();

return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);

};

$.fn.datebox.defaults.parser = function(s){

if (!s) return new Date();

var ss = s.split('-');

var y = parseInt(ss[0],10);

var m = parseInt(ss[1],10);

var d = parseInt(ss[2],10);

if (!isNaN(y) && !isNaN(m) && !isNaN(d)){

return new Date(y,m-1,d);

} else {

return new Date();

}

};

考入對應的位置。

如設置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#

分享到：