jquery easyUI相关

jquery easyUI相关
===================================
easyUI表单验证处理
//jquery easyUI 表单验证不通过让光标定位在第一个未通过验证的input上提示用户。
if(!validateXXXX())
{
console.log("validate");
$("#BoxDivID input").each(function(){
if($(this).hasClass("validatebox-invalid")){
$(this).focus();
return false;
}
});
return;
}

注意事项：
jquery hasClass 判断class是否存在。
jquery each循环,要实现break和continue的功能：
break----用return false;
continue --用return ture;
======================================
input字段设置为easyui-numberbox 只能输入数字的，但通过复制粘帖的方式输入其他字符后出现异常，无法恢复正常，需要重设class样式特殊处理。

$("#addProperty .sortNumber").blur(function(){
if(!$.isNumeric($("#addProperty .sortNumber").val())){
$("#addProperty .sortNumber").addClass("validatebox-invalid");
}
});
======================================
combobox设为只读状态 editable:false,

$("#partner").combobox({
url:'xxxx',
valueField:'partner_id',
textField:'partner_name',
mode:'remote',
delay:500,
editable:false,
onSelect:function(record)
{
//xxx
}
});
======================================
JQuery easyUI扩展验证机制的正则表达式

$.extend($.fn.validatebox.defaults.rules,{
length:{
validator:function(value,param){
var len=$.trim(value).length;
return len>=param[0]&&len<=param[1];
},
message:"输入内容长度必须介于{0}和{1}之间."
},
mobile : {// 验证手机号码
validator : function(value) {
return /^(13|15|18)\d{9}$/i.test(value);
},
message : '手机号码格式不正确(正确格式如：13450774432)'
},
email:{
validator : function(value){
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
},
message : '请输入有效的电子邮件账号(例：abc@126.com)'
}
});

<input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">
<input id="mobile" type="text" class="easyui-validatebox" validType="mobile" name="mobile" required="true" maxlength="13" style="width:150px"></input>

//JQuery easyUI扩展验证机制的正则表达式
$.extend($.fn.validatebox.defaults.rules, {
length:{validator:function(value,param){
var len=$.trim(value).length;
return len>=param[0]&&len<=param[1];
},
message:"去掉首尾空格后内容长度介于{0}和{1}之间."
}
});
在input里的使用方法：
data-options="required:true,validType:['length[1,50]']"

======================================
easyui-panel 弹窗自适应,当屏幕分辨率大于800px使用800px，否则使用屏幕宽度99%，高度98%。
<div id="p" class="easyui-panel"></div>

var dgwidth = $(window).width()*0.99;
var dgheight = $(window).height()*0.98;
if(dgwidth>800){
dgwidth = 800;
}
if(dgheight>680){
dgheight = 680;
}
$("#dgCreate").window({
title:"panel title",
width: dgwidth,
height:dgheight,
cache:false,
minimizable:false,
maximizable:false,
collapsible:false,
resizable:false,
href:'http://youurl',
modal:true
});

====================================
消息框：
$.messager.alert('警告','警告消息');
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
alert('确认删除');
}
});

===================================
提示框
1. 通过标签创建提示框，给元素添加一个"easyui-tooltip"的类名，无需任何Javascript代码。
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
2. 通过Javascript创建提示框。
<a id="dd" href="javascript:void(0)">Click here</a>
$('#dd').tooltip({
position : 'right',
content : '<span style="color:#fff">This is the tooltip message.</span>',
onShow : function() {
$(this).tooltip('tip').css({
backgroundColor : '#666',
borderColor : '#666'
});
}
});

===================================
jquey easyui dialog第二次点击时不能正常打开问题解决办法：
把dialog外层div在页面写死的<div id="dgSelectGoodsCategory"></div>变成动态创建的，在关闭后
var dgdiv = $('<div></div>');
dgdiv.attr('id','dgSelectGoodsCategory');
$(document.body).append(dgdiv);
注：在onClose的时候不需要destroy，否则会报错。
$('#dgSelectGoodsCategory').dialog('destroy');
会报错 TypeError: $.data(...) is undefined

$('#dgSelectGoodsCategory').dialog({
title: '选择商品品类',
width: 900,
height: 600,
closed: false,
cache: false,
href: 'URL',
modal: true,
onClose: onSelectGoodsClass
});

===================================
页面跳转，点击菜单和替换URL的两种方法
function returnQueryPage()
{
var url = window.location.href;
url = url.substring(0,url.indexOf("&goods_id="));
url = url.replace("modify?","index/");
url = url.replace(/=/g,"/");
url = url.replace(/&/g,"/");
window.location = url;
/*
$(".sideMenu1 li").each(function()
{
var text = $(this).text();
//菜单名称在后台可以动态配置的，代码里不能这样写死
if(text.indexOf("组合商品档案") != -1)
{
$(this).click();
return;
}
});
*/
}

===================================

绑定table的datagrid值

function getTableOptions()
{
    var columns = [[
        //{checkbox:true,width:30},
        {field:'t_id',width:120,halign:'center',align:'center',title:'模版ID'},
        {field:'t_name',width:150,halign:'center',align:'center',title:'模版名称'},
        {field:'t_img',width:185,halign:'center',align:'center',title:'模版图片'},
        {field:'t_area_num',width:120,align:'center',halign:'center',title:'分区数'},
        {field:'t_id2',width:120,halign:'center',align:'center',title:'操作',
                formatter:function(value,row,index){
                    return "<a href=javascript:doDelete('"+row.t_id2+"') style='text-decoration:underline'>删除</a>";
                }
        }
    ]];
    var data = {
            rownumbers:true,
            singleSelect:true,
            checkOnSelect:false,
            selectOnCheck:false,
            autoRowHeight:false,
            idField:'t_id',
            pageSize:10,
            pageList: [5,10,15,20,25,30],
            pagination:false,
            toolbar:'#toolbar1',
            onClickRow:clickTable1,
            columns:columns
        };
    return data;
}

$(document).ready( function(){
    var options = getTableOptions();
    $("#my_table").datagrid(options);
    query_data();
});

function query_data()
{
    $.ajax({
        url:'{:U("/query_template_data")}',
        type:'post',
        data:'',
        dataType:'json',
        success:function(data){
            //field 不能重复
            for(var i in data){
                for(var key in data[i]){
                    //console.log(key);
                    if(key == "t_id"){
                        data[i]["t_id2"] = data[i][key];
                    }
                }
            }
            //console.log(data);
            $("#my_table").datagrid("loadData",data);
        },
        error:function(error){
            $.messager.alert('error', "error");
        }
    });
}

function doDelete(t_id){
    $.messager.confirm('删除','是否确定删除模版?',function(r){
        if (r){
            $.ajax({
                type: 'post',
                url : "{:U('/Dependency/AppGoodsTemplate/doDelete')}",
                dataType:'json',
                data: 'ids=' + t_id,
                success: function(result){
                    if(result.status == 0){
                        $.messager.alert('成功',"删除模版成功");
                        $("#my_table").datagrid("clearSelections");
                        //清除子datagrid数据
                        $('#my_sub_table').datagrid('loadData', { total: 0, rows: [] });
                        //重新请求数据
                        query_data();
                    }else{
                        $.messager.alert('失败',result.message);
                    }
                },
                error: function(result) {
                    $.messager.alert('error');
                }
            });
        }
    });
}

===================================
easyui的数字验证框可以输入小数点向右,precision 是保留几个小数点
<input class="input easyui-numberbox" min="0.01" value="1" max="100000000" precision="2" type="text" name="price" />
EasyUI 验证框使用方法:
//***************************
missingMessage：未填写时显示的信息
validType：验证类型见下示例
invalidMessage：无效的数据类型时显示的信息
required="true" 必填项
class="easyui-validatebox" 文本验证
class="easyui-numberbox" 数字验证

===================================
如何让jquery-easyui的combobox像select那样不可编辑?
为combobox添加editable属性 设置为false
$('#goods_series').combobox({
url:"xxx/getBrandsGoodsSeries"+"?goods_brand_id="+goodsbrand,
valueField:'goods_series',
textField:'goods_series',
editable:false
});
获取值：
'goods_series':$("#goods_series").combobox("getValue"),
表单：
<input class="easyui-combobox" type="text" id="goods_series" style="border:solid 1px #95b8e7;width:120px;height:23px;" />

通过combogrid 选择级联的方式加载内容：
function goodsbrandSelect(){
var goodsbrand = -1;
var brandgrid = $('#goodsbrand').combogrid('grid').datagrid('getSelected');
if (brandgrid != null) {
goodsbrand = brandgrid.goods_brand_id;
}
$('#goods_series').combobox({
url:"xxx/getBrandsGoodsSeries"+"?goods_brand_id="+goodsbrand,
valueField:'goods_series',
textField:'goods_series',
editable:false
});
}
后台thinkphp代码：
public function getBrandsGoodsSeries(){
$goods_brand_id = I('get.goods_brand_id', -1);
$result = array();
$goods = M('goods')->field('goods_id, goods_series')
->where(array('goods_brand_id'=>$goods_brand_id))->where("goods_series is not null")
->group("goods_series")->select();

if (!empty($goods)){
$result = $goods;
}
echo json_encode($result);
}
===================================
easyui datagrid 取消选中,重新加载清除datagrid选中状态方法
$("#my_table_id").datagrid("clearSelections");
===================================================
JavaScript parseInt() 函数
parseInt("10");//返回 10
parseInt("19",10); //返回 19 (10+9)，后面的10表示10进制

var ctype = {$ctype};
改成
var ctype = parseInt("{$ctype}");
解决ThinkPHP模版传值{$ctype}这种写法在Dreamweaver报错的问题
===================================
jQuery 2.x 把支持IE6, 7, 8 了，这个是主流趋势了
向下兼容的有一些插件可以使用，基本功能能够兼容，做新项目建议使用最新版的，Android手机现在主流app都只支持4.0以上版本的了
太旧版本的问题太多，兼容起来太费时间精力还影响到新版本特效的使用
XP默认是IE6 win7 默认是IE8. 不支持IE8 问题有点大吧
IE8不支持很多html5特性，根据html5来做的效果只能用插件来兼容
IE6基本上新做的网站都不考虑兼容了
根据百度统计 国内IE8 占的份额还是比较大的，IE6只有4.28%，chrome份额最大，现在一般用户都会装多个浏览器的
bootstrap应该基本上也可以兼容到的，只是效果没那么好而已

注：奇虎360浏览器份额在2010年10月至2011年3月，和2012年9月以来，两次大幅下降，是因为360浏览器去掉了原本的浏览器特征（User-Agent），而表现为IE等浏览器特征所致。
(以上百度自己的说明) 360浏览器份额在中国至少有25%
360用的就是IE和chrome的内核，国内的浏览器几乎都是这样的

====================================

更多内容以后更新