现在位置首页 / 项目实战 /正文

js/jquery项目知识小结(js数据类型/数组处理/checkbox/时间格式化)

作者: IT小兵 | 2014年10月17日| 热度:℃ | 评论: |参与:

这几天一直处理bug,遇到很多js的坑,比如上一篇[js eval解析JSON中的注意点]就是和同事遇到的一个问题。

现在将几个实际bug学到的jquery经验做个小结。

1、js数据类型:

虽然说js是解析型脚本语言,但是也是有自己的类型,只是这个类型没有那么复杂而已。

js的数据类型有:字符串、数字、布尔、数组、对象、Null、Undefined

var x               
 // x 为 undefined
 var x = 6; 
 // x 为数字
 var x = "Bill";     
 // x 为字符串

我们可以看到x随着赋值的不同,类型也是不同的。这个有点像C# 4.0里的泛型感念。

今天遇到的问题就是:

问题描述:

 我定义了一个数组:

//多选商品。
var SelectedProduct=new Array();
var SelectedProductName = new Array(); 
function SetCheckedPro(id, name) {
      
    var isChecked = $('#ckbProduct_' + id).prop('checked');
    
    var _exist = $.inArray(id, SelectedProduct);
    if (  isChecked && _exist < 0) {
        SelectedProduct.push(id);
        SelectedProductName.push(id + ":" + name);
    }
    else if (isChecked == false && _exist >= 0) {
        SelectedProduct.pop(id);
        SelectedProductName.pop(id + ":" + name);
    }
     
    ShowSelectedProduct();
}
function ShowSelectedProduct() {
    var html = "";
    $.each(SelectedProductName, function (key, val) {
        html = html + ", " + val;
    });
    $("#divselectedproduct").html(html);
}

我们可以看到SelectedProduct数组接收一个id。我本意是int型的。但是在赋值的加了" 号。就变成了字符串,然后在

 var _exist = $.inArray(id, SelectedProduct);

时候,1和"1"是永远不相等。。。我一直怀疑数据的问题。。原来是一个弱智的bug。

2、jquery Select2怎么赋值已经选择的数据?

前几天写的怎么使用jquery Select2,只是获取数据,但是怎么回写这个数据到jquery Select2?

只需要一下代码即可:

   var tagss = new Array();
                             
                            $.each(EditActiveModel.CommunityList, function (key, val) {
                                tagss.push(val.Id);
                                }); 
                        
                        $("#selectsq").val(tagss).trigger("change");

tagss是一个数组,填充Select2的val属性。

3、Jquery plupload在Form充当submit角色。 [jquery Plupload 参数/事件使用说明]中说明了使用jquery Plupload ajax post数据到服务端。

但是在编辑这个form的情况下,默认Plupload控件没有选择文件,这时候是无法激活Plupload的ajax提交的。

这是需要判断一下,是不是选择了文件。

可以在FilesAdded事件中,增加一个变量,如果选择了就设置变量为“”。在提交函数判断一下即可:

 //绑定文件添加进队列事件
    uploaderbig.bind('FilesAdded', function (uploaderbig, files) {
        //设置变更了大图。
        if (ID > 0) {//又选择了新图片。设置大图字段为-1;
            EditActiveModel.bigphotourl = "-1";//在服务端判断一下这个字段。如果是-1就去post file取第一个文件。不是则木人没有修改
        }
        for (var i = 0, len = files.length; i < len; i++) {
            var file_name = files[i].name; //文件名 
            var html = '<li  id="file-' + files[i].id + '">'
                + file_name + '</li>';
            $('#imageListtempbig').html(html);
            !function (i) {
                previewImage(files[i], function (imgsrc) {
                    $('#file-' + files[i].id).append('<img width=\'50%\' height=\'50%\'  src="' + imgsrc + '" />');
                })
            }(i);
        }
    });
}

  //设置变更了大图。

        if (ID > 0) {//又选择了新图片。设置大图字段为-1;

            EditActiveModel.bigphotourl = "-1";//在服务端判断一下这个字段。如果是-1就去post file取第一个文件。不是则木人没有修改


        }

提交函数,判断如果没有使用Plupload上传文件,则走正常的jquery ajax post:

///开始上传。
function StartUp() {
      
    var formdata = GetModel();
    if (formdata != false) {
        var data;
        if (ID > 0) {
            formdata.id = EditActiveModel.id;
     data = {
         Operate: "edit",
            model: JSON.stringify(formdata)
        }; 
        }
        else{
        data = {
            Operate: "add", 
            model: JSON.stringify(formdata)
        }; 
        }
        if (EditActiveModel.bigphotourl=="-1"){
        uploaderbig.setOption("multipart_params", data);
        uploaderbig.start();
        }
        else {
            NoneFileUpload(data);
        }
    }
}
function NoneFileUpload(args) {
    $.ajax({
        type: "post",
        dataType: 'json',
        url: ajaxUrl,
        data: args,
        success: function (data, textStatus) {
            if (data != null) {
                var model = eval(data);
                if (model != null && model != "undefined") {
                    alert("修改成功!"); window.location.href = "List.aspx?RightID=49&oper=list";
                }
                else {
                    alert("变更数据失败!"); return;
                }
            }
        },
        complete: function (XMLHttpRequest, textStatus) {
        },
        error: function (e) {
            alert("变更数据失败!"); return;
        }
    });
}

4、Js日期格式化函数:

// 对Date的扩展,将 Date 转化为指定格式的String 
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, 
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子: 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1,                 //月份 
        "d+": this.getDate(),                    //日 
        "h+": this.getHours(),                   //小时 
        "m+": this.getMinutes(),                 //分 
        "s+": this.getSeconds(),                 //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds()             //毫秒 
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

使用:

  $("#txtStartTime").val((new Date(data.begintime)).Format("yyyy-M-d h:m"));


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询