easyui form小工具 -

wangxiufu1985

浏览: 12834 次
性别:
来自: 安徽

最近访客更多访客>>

jjjssh

Intel_Chip

monk0123456

群众糖糖

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

easyui form小工具

博客分类：

我的JS基础点滴


http://download.microsoft.com/download/7/2/F/72F9A516-384C-408A-A1CE-3934EE96B993/wacserverlanguagepack.exe
  <!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
	<title>Basic Form - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="Utils.js"></script>
</head>
<body>
    <h2>Basic Form</h2>
    <p>Fill the form and submit it.</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" title="New Topic" style="width:400px">
        <div style="padding:10px 60px 20px 60px">
        <form id="ff" method="post">
            <table cellpadding="5">
                <tr>
                    <td>Name:</td>
                    <td><input class="easyui-textbox" type="text" name="tname" data-options="required:true"
							mapping="{name: 'tname', defalut: 'd_value', handler: doHandler}"></input></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"
							mapping="{name: 'temail', defalut: 'd_value', handler: doHandler}"></input></td>
                </tr>
				<tr>
                    <td>Language:</td>
                    <td>
                        <select class="easyui-combobox" name="language" mapping="{name: 'tlanguage', defalut: 'ar', handler: doHandler}">
							<option value="ar">Arabic</option>
							<option value="bg">Bulgarian</option>
							<option value="ca">Catalan</option>
					</td>
                </tr>
            </table>
        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
        </div>
        </div>
    </div>
    <script>
        function submitForm(){
			[b]var testData = Utils.resolveFromFieldsToSyncDatas('#ff', true);[/b]
		 }
        function doHandler(name, value, mapping, datas, opt){
			return value + '_dohandler';
        }
    </script>
</body>
</html>

Utils.js 代码:

    
(function(jquery, window){
	var Utils = window.Utils;
	if (Utils && Utils.ok) {
		return;
	}
	Utils = {};
	Utils.emptyFn = function(){};
	Utils.errorFn = function(msg){ alert(msg || '操作失败');};
   
	var arrayPrototype = Array.prototype,
		sliceFn = arrayPrototype.slice;
   
	var SyncData = function(data, options){
		return new SyncData.init(data, options);
	}
	
	SyncData.init = function(data, options){
		this.data = data;
		this.options = options = options || {};
		this.beforeSync = options.beforeSync || Utils.emptyFn;
		this.errorHandler = options.errorHandler || Utils.errorFn;
		this.successHandler = options.successHandler || Utils.emptyFn;
		this.syncHandler = options.syncHandler || Utils.emptyFn;
		this.postDataType = options.postDataType || 'default'; //object or default
		this.isStrTrim = options.isStrTrim === false ?  false : true;
		
		if (arguments.length > 2) {
			this.extArgs = slice.call( arguments, 2 );
		}
		return this;
	}
	
	SyncData.init.prototype = {
		
		sync: function(options) {
			jquery.extend(this, options || {});
			jquery.extend(this.options, options || {});
			
			if(!this.data) {
				alert('数据格式不对');
				return;
			}
			var reqeustData = this.converPostData();
			if(this.beforeSync(this, reqeustData, this.extArgs) === false) {
				return;
			}
			this.syncHandler.apply(this, reqeustData, function(ret) {
				try {
					var arr = ret.result.split("~");
					if(arr[0] != "S") {
						this.errorHandler.apply(this, [ret.result, ret].concat(this.extArgs));
					} else {
						this.successHandler.apply(this, [ret].concat(this.extArgs))
					}
				} catch(e) {
					this.errorHandler.apply(this, [e, ret].concat(this.extArgs));
				}
			});
		},
		
		converPostData: function() {
			var dadtas,
				data = this.data;
			if (this.postDataType == 'default') {
				dadtas = [];
				for(var attr in data) {
					if (data.hasOwnProperty(attr)) {
						dadtas.push(data[attr]);
					}
				}
			} else {
				datas = [data];
			}
			return dadtas.concat(this.extArgs || [])
		}
	}

	var easyui_fields = ["textbox","combo","combobox","combotree","combogrid","datebox","datetimebox","spinner","timespinner","numberbox","numberspinner","slider"],
		getMapping = function(mappingStr) {
			return eval('['+ mappingStr +']')[0];
		},
		formatValue = function(name, value, mapping, data ,isTrim, opt) {
			var defalutValue = mapping.defalut || '',
				handler = mapping.handler;
			value = value || '';
			value = (isTrim === false) ? value : $.trim(value);
			value = (value == '') ? defalutValue : value;
			if (mapping.handler) {
				return handler(name, value, mapping, data, opt);
			}
			return value;
			
		}
	window.Utils = {
		// mapping="{name: 'propertyname', defalut: '123', hander: fn}" 
		resolveFromFieldsToSyncDatas: function(jq, isTrim) {
			var data = {},
				fetchValue = function(dom, inputvalue, mappingsetting, opt) {
					var pname = (mappingsetting.name || $(dom).attr('name') || $(dom).attr('id'));
					var realValue = formatValue(pname, inputvalue, mappingsetting, data, true, opt);
					if (typeof realValue === "string") { // string
						data[pname] = realValue;
					} else { //obj
						for (var nv in realValue) {
							data[nv] = realValue[nv];
						}
					}
				};
			if ($(jq).form('validate') !== true) {
				alert('表单数据验证失败');
				return null;
			}
			$.each(easyui_fields, function(i, v){
				var selector = '.easyui-' + v + ':not(:disabled)[mapping]';
				$(jq).find(selector).each(function(){
					fetchValue(this, $(this)[v]('getValue'), getMapping($(this).attr('mapping')), 'get');
				})
			});
			$(jq).find('input:hidden[mapping]').each(function(){
					fetchValue(this, $(this).val(), getMapping($(this).attr('mapping')), 'get');
			})
			return new SyncData(data);
		},
		
		resolveFromSyncDatasToFields: function(jq, data) {
			var getRealValue = function(dom, mapping) {
				var pname = (mappingsetting.name || $(dom).attr('name') || $(dom).attr('id'));
				return formatValue(pname, (data[pname] || ''), mapping, data, false, 'set') || '';
			}
			data = data || {};
			$.each(easyui_fields, function(i, v){
				var selector = '.easyui-' + v + ':not(:disabled)[mapping]';
				$(jq).find(selector).each(function(){
					$(this)[v]('setValue', getRealValue(this, getMapping($(this).attr('mapping'))));
				})
			});
			$(jq).find('input:hidden[mapping]').each(function(){
				$(this).val(getRealValue(this, getMapping($(this).attr('mapping'))));
			})
		}
	}
	Utils.ok = true;
	jquery.extend(Utils, window.Utils);
})(jQuery, window)

分享到：

基于cleditor扩展实现表单设计器(正在实现 ... | angularjs源码分析（AngularJS v1.3.0）

2015-01-09 15:22
浏览 478
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyui form小工具

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyui form小工具

评论

发表评论

相关推荐

angular2-download

基于cleditor扩展实现表单设计器(正在实现中...)

D3的使用（Flow事件IP（PORT）关系可视化实现）

基于elasticsearch Rest URL模板动态生成（索引按照日期切分）

Ext drag 那些事

javascript基础: Array

最近访客更多访客>>