您的位置:首页 > Web前端 > JQuery

jQuery插件第五十五:批量获取值返回Json字符串

2015-04-17 07:38 447 查看
对各种表单元素统一使用etext()这个方法来获取其中的值,单个输入框返回“[value]”。多个输入框同时取值会自动返回Json格式字符串。 复选框多个选择项的值会用"," 间隔。对没有子节点只有文字内容的span和div取值。在不清楚标签的情况下有用。比如说,在添加商品订单的页面,可针对商品明细表格设置数据行选择器 ,进行json字符串处理,随同订单其他数据一起提交到后端。

/*
* jQuery etext plugin 0.2
*
* Copyright (c) 2015 chinet_bridge
*
* 批量获取值返回Json字符串插件 0.2版
*
*/

//Json对象转字符串
var Obj2str = function (o) {
    if (o == undefined) {
        return "";
    }
    var r = [];
    if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
    if (typeof o == "object") {
        if (!o.sort) {
            for (var i in o) r.push("\"" + i + "\":" + Obj2str(o[i]));
            if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                r.push("toString:" + o.toString.toString());
            }
            r = "{" + r.join() + "}"
        } else {
            for (var i = 0; i < o.length; i++) {
                r.push(Obj2str(o[i]));
            }
            r = "[" + r.join() + "]";
        }
        return r;
    }
    return o.toString().replace(/\"\:/g, '":""');
}
; (function (d, b) { 
    d.fn.etext= function(options){
            var defaults={ rowSelector:null};
            var opts = d.extend({},defaults, options);
            var l, k = this,n=[],chkboxname,chkboxlen;           
            d.extend(d.expr[ ":" ], {
	            isText: function( k ) {
		            return d(k).text() != "" && d(k).html().indexOf('>')==-1;
	            }
            });
            if(k.is(":input,:isText")){
                    k.each(function(){
                        var m = d(this);
                        if (m.is(":radio")) {
                            chkboxname='';
                            if(!m.is(":checked")){return true; }  
                            l = m.is(":checked")?d.trim(m.val()):"";                    
                            n.push(l);
                        }else if (m.is(":checkbox")) {     
                            if(!m.is(":checked")){return true; }                                   
                            if(chkboxname==m.attr('name')) {                                                 
                                l += m.is(":checked")?d.trim(m.val())+ ",":"";
                                chkboxlen--;     
                            }else{                     
                                l = m.is(":checked")?d.trim(m.val())+ ",":"";
                                chkboxname=m.attr('name');
                                chkboxlen=d(':checkbox[name='+m.attr('name')+']:checked').length;
                                chkboxlen--;
                            }
                            if(chkboxlen==0){                        
                                l =(l+',').replace(',,',''); n.push(l);  
                            }
                        }else if(m.is(":input")){
                            chkboxname='';        
                            l = m.val();l = d.trim(l); n.push(l);
                        }else if(m.is(":isText")){
                            chkboxname='';l = m.text();l = d.trim(l); n.push(l);
                        }                                      
                    });
            }else{
                var jo={};
                var builder = function(row){
                      row.find(":input,div,span").each(function(){
                        var m = d(this);
                        if (m.is(":radio")) {
                            chkboxname='';
                            if(!m.is(":checked")){return true; }  
                            l = m.is(":checked")?d.trim(m.val()):"";                    
                            jo[m.attr("name")]=l;
                        }else if (m.is(":checkbox")) {     
                            if(!m.is(":checked")){return true; }                                   
                            if(chkboxname==m.attr('name')) {                                                 
                                l += m.is(":checked")?d.trim(m.val())+ ",":"";
                                chkboxlen--;     
                            }else{                     
                                l = m.is(":checked")?d.trim(m.val())+ ",":"";
                                chkboxname=m.attr('name');
                                chkboxlen=row.find(':checkbox[name='+m.attr('name')+']:checked').length;
                                chkboxlen--;
                            }
                            if(chkboxlen==0){                        
                                l =(l+',').replace(',,',''); 
                                jo[m.attr("name")]=l;
                            }
                        }else if(m.is(":input")){                        
                            chkboxname='';        
                            l = m.val();
                            l = d.trim(l);                            
                            jo[m.attr("name")]=l;                        
                        }else if(m.is(":isText")){
                            chkboxname='';l = m.text();l = d.trim(l); 
                            jo[m.attr("name")]=l;
                        }                                                                                                                                 
                    });
                    //直接push json对象不行,会替换之前的数组元素,调试发现转成字符串就不会造成数组元素的数据错乱
                    n[n.length] = Obj2str(jo);         
                }
                if(opts.rowSelector==null){
                      builder(k);  
                }else{
                     k.find(opts.rowSelector).each(function(){
                        var _k=$(this);
                        builder(_k);  
                     });
                }               
            }            
            return "["+n.join()+"]";
    }
})(jQuery);


以下为调用例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.etext.js"></script>
</head>
<body>
    <form id="form1">
    <div id="div1" >
        <input type="text" id="Text1" name="Text1" />
        <input type="text" id="Text11" name="Text11" />
        <input type="text" id="Text2" name="Text2" />
        <input type="radio" id="Radio1" name="Text5" value="1" />
        YES
        <input type="radio" id="Radio2" name="Text5" value="2" />
        No
        <input type="checkbox" id="chkbox1" name="Chkbox" value="甲" />
        甲
        <input type="checkbox" id="chkbox2" name="Chkbox" value="乙" />
        乙 <span id="ufo" name="UFO">4242</span>
    </div>
    <div id="div2">
        <input type="text" id="Text3" name="Text1" />
        <input type="text" id="Text4" name="Text11" />
        <input type="text" id="Text5" name="Text2" />
        <input type="radio" id="Radio3" name="Text5" value="1" />
        YES
        <input type="radio" id="Radio4" name="Text5" value="2" />
        No
        <input type="checkbox" id="Checkbox1" name="Chkbox" value="甲" />
        甲
        <input type="checkbox" id="Checkbox2" name="Chkbox" value="乙" />
        乙 <span id="Span1" name="UFO">4242</span>
    </div>
    </form>
    <input type="button" id="submit" value="获取值" />
    <script language="javascript">

        $("#submit").click(function () {
            var json = $("#form1").etext({ rowSelector: "div" });
            alert(json);
        });        

    </script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐