js表單快速取值/賦值 快速生成下拉框

1.表單取值/賦值公共方法

//表單序列化:文本框的name字段和數據源一致<form id="myForm" onsubmit="return false;">
function getFormJsonData(formId) {
    var fields = $("#" + formId).serializeArray();
    var f = {};
    $.each(fields, function (index, field) {
        f[field.name] = field.value;
    })
    return f;
}
//表單填充數據:文本框的name字段和數據源一致
function setFormJsonData(data) {
    if (data) {
        for (var i in data) {
            ////console.log(i + ":" + data.JingShenBing[i]);
            if (document.getElementsByName(i + "").length > 0) {
                document.getElementsByName(i + "")[0].value = data[i];
            }

        }
    }

}

 

2.調用

 <form id="form2" name="form2" onsubmit="return false">
        <input name="name" />
        <input name="age" />
        <input value="提交" type="button" onclick="getFormData()" />
        <input value="setValue" type="button" onclick="setFormData()" />
    </form>

 <script>function getFormData() {
            var data = getFormJsonData("form2");
            data.id = 1; //追加數據
            var data1={sex:'0'}; 
 Object.assign(data1, data); //copy復制對象

            console.log(data1);
        }
        function setFormData() {
            var data = {"name":"jay","age":"22"};
            setFormJsonData(data);
        }
    </script>

 

3.生成下拉框

//調用:createSelect("url","Name","Id","selectId",-1, [{"Name":"全部","Id":"-1"}],null);
//參數:數據源地址,顯示字段,取值字段,下拉框id,默認選中值,開頭追加數據,成功回調
function createSelect(url,displayField,valueField,selectId, defaultValue, insertDataAtFirst, cb) {
    try {
        var obj = document.getElementById(selectId);
        //var url = obj.getAttribute("attr-url");
        //var displayField = obj.getAttribute("attr-displayField");
        //var valueField = obj.getAttribute("attr-valueField");

        ////alert(displayField);
        var str = "";
        if (insertDataAtFirst) {
            for (var i = 0; i < insertDataAtFirst.length; i++) {
                var item = insertDataAtFirst[i];
                ////console.log("option:", item[displayField]);
                str += "<option value='" + item[valueField] + "'  >" + item[displayField] + "</option>";
            }
        }
        ajax(url, null, function (data) {
            if (data) {
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    ////console.log("option:", item[displayField]);
                    str += "<option value='" + item[valueField] + "'>" + item[displayField] + "</option>";
                }

            }
            obj.innerHTML = str;
            if (defaultValue != null && defaultValue != "") {
                obj.value = defaultValue;
            }
            
            if (cb) {
                cb(obj.value);
            }
        });
    } catch (e) {
        console.log('%c createSelect error:', 'background:white;color:red',e);
    }

    

}

調用:

//參數:數據源地址,顯示字段,取值字段,下拉框id,默認選中值,開頭追加數據,成功回調

createSelect("api/Dict/GetProvinces", "Name", "Id", "selProvince", -1, {Id:-1,Name:"請選擇"}, null);

 

968AF3B3-37D5-4689-ACAB-9BB3D0F6BAD4 From:http://www.cnblogs.com/xuejianxiyang/p/8416527.html