js 编辑弹窗显示 文本框赋值方法封装

js 编辑弹窗显示 文本框赋值方法封装

• 场景

  
  image.png

上图所示点击编辑按钮弹出一个窗口，这时需要对弹窗内的文本框进行赋值显示，传统写法是：
$('#tag_name').val('1'); $('#type').val(1) $('#sort').val(1)
如果后面字段多起来，这样写就太耗费时间了，于是便封装了以下方法（参考网上别人发的，进行了略微调整）

封装方法如下（目前只支持 input select textarea 赋值）：

(function($){
    $.fn.extend({
        initForm:function(options){
            //默认参数
            var defaults = {
                jsonValue:"",
                exclude:[],     //不需要进行初始化的name,将name字符串数组传入
                name_equal:{}, //name相同时，对应下标
                isDebug:false   //是否需要调试，这个用于开发阶段，发布阶段请将设置为false，默认为false,true将会把name value打印出来
            }
            //设置参数
            var setting = $.extend({}, defaults, options);
            var form = this;
            jsonValue = setting.jsonValue;
            name_equal = setting.name_equal;
            // console.log(jsonValue);
            //如果传入的json字符串，将转为json对象
            if($.type(setting.jsonValue) === "string"){
                jsonValue = $.parseJSON(jsonValue);
            }
            if($.type(setting.name_equal) === "string"){
                name_equal = $.parseJSON(name_equal);
            }


            //如果传入的json对象为空，则不做任何操作
            if(!$.isEmptyObject(jsonValue)){
                var debugInfo = "";
                $.each(jsonValue,function(key,value){
                    //是否开启调试，开启将会把name value打印出来
                    if(setting.isDebug){
                        //alert("name:"+key+"; value:"+value);
                        debugInfo += "name:"+key+"; value:"+value+" || ";
                    }
                    if(setting.exclude.indexOf(key) > -1){
                        if (name_equal[key] !== undefined){
                            key = name_equal[key]
                        }

                        var formField = form.find(" [name='"+key+"']");

                        if($.type(formField[0]) === "undefined"){
                            if(setting.isDebug){
                                alert("can not find name:["+key+"] in form!!!");    //没找到指定name的表单
                            }
                        } else {
                            var fieldTagName = formField[0].tagName.toLowerCase();
                            // console.log(fieldTagName);
                            if(fieldTagName == "input"){
                                if(formField.attr("type") == "radio"){
                                    $("input:radio[name='"+key+"'][value='"+value+"']").attr("checked","checked");
                                }else {
                                    formField.val(value);
                                }
                            } else if(fieldTagName == "select"){
                                //do something special
                                formField.val(value);
                            } else if(fieldTagName == "textarea"){
                                //do something special
                                formField.val(value);
                            } else {
                                formField.val(value);
                            }
                        }
                    }
                })
                if(setting.isDebug){
                    alert(debugInfo);
                }
            }
            return form;    //返回对象，提供链式操作
        }
    });
})(jQuery)

调用方法如下：

 let name_arr = ['id','tag_name','type','sort'];
 let name_equal = {}
 let options = {jsonValue:data,exclude:name_arr,name_equal:name_equal,isDebug:false};
 $("#edit_form").initForm(options)

方法解释：
name_arr： input框name属性名，如： <input type='text' name='tag_name'>

name_equal： 当有多个input属性名相同，但数组下标不同时，即可指定不同的下标对应 返回数据的值，如：

 <input type='text' name='tag_name[1]'>
  <input type='text' name='tag_name[2]'>
  <input type='text' name='tag_name[2]'>

这时 name_equal 值应该为：

name_equal = {
    tag_name_1:'tag_name[1]',
    tag_name_2:'tag_name[2]',
    tag_name_3:'tag_name[3]',
}

如上代码中，tag_name_1 为后端返回的数据结构

options：
第一个参数 jsonValue：后端返回的数据（json格式）
第二个参数 exclude：需要赋值的input框数组，name_arr
第三个参数 name_equal：有相同name，下标不同时传入的json 数组值
第四个参数 is_debug： 是否开启调试