後端json對象初始化form表單

利用json對象初始化form表單用法:

<script type="text/javascript" src="${home}js/jquery.initForm.js"></script>
<script type="text/javascript">
	$(xxx).initForm(val)
</script>
/*
 * jquery 初始化form插件,傳入一個json對象,爲form賦值 
 * @requires jQuery v1.5 or later
 * note:  1、此方法能賦值一般所有表單,但考慮到checkbox的賦值難度,以及表單中很少用checkbox,這裏不對checkbox賦值
 *		  2、此插件現在只接收json賦值,不考慮到其他的來源數據
 *		  3、對於特殊的textarea,比如CKEditor,kindeditor...,他們的賦值有提供不同的自帶方法,這裏不做統一,如果項目中有用到,不能正確賦值,請單獨賦值
 *		  4、支持form.serializeArray()格式和如:user類的單層json對象{name:'xx',age:10}初始化user表單
 */	
(function($){
	$.fn.extend({
		initForm:function(options){
			var jsonStrValue;
			if(Object.prototype.toString.call(options) === "[object String]"){//如果是json字符串
				jsonStrValue = options;
			}else{
				jsonStrValue = JSON.stringify(options)
			}
			//默認參數
			var defaults = {
				jsonValue:jsonStrValue,
				isDebug:false	//是否需要調試,這個用於開發階段,發佈階段請將設置爲false,默認爲false,true將會把name value打印出來
			}
			//設置參數
			var setting = $.extend({}, defaults, options);
			var form = this;
			jsonValue = setting.jsonValue;
			//如果傳入的json字符串,將轉爲json對象
			if($.type(setting.jsonValue) === "string"){
				jsonValue = $.parseJSON(jsonValue);
			}
			//如果傳入的json對象爲空,則不做任何操作
			if(!$.isEmptyObject(jsonValue)){
					$.each(jsonValue,function(key,value){
						if(jsonValue.length){
							addValue(form,this.name,this.value,setting)
						}else{					
							addValue(form,key,value,setting)
						}
					})
			}
			return form;	//返回對象,提供鏈式操作
		}
	});
	/**
	* 設置值到對應的表單裏
	*/
	function addValue(form,key,value,setting){
		//是否開啓調試,開啓將會把name value打印出來
		if(setting.isDebug){
			console.log("name:"+key+"; value:"+value);
		}
		var formField = form.find("[name='"+key+"']");
		if($.type(formField[0]) === "undefined"){
			if(setting.isDebug){
				console.log("can not find name:["+key+"] in form!!!");	//沒找到指定name的表單
			}
		} else {
			var fieldTagName = formField[0].tagName.toLowerCase();
			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);//防止value爲boolean值
			} else if(fieldTagName == "textarea"){
				//do something special
				formField.val(value);
			} else {
				formField.val(value);
			}
		}
	}
})(jQuery)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章