$.fn.formX=function(options,params){ var target = this; var methods={ load : function(jq, data) { return jq.each(function() { myload(this, data); }); } }; var myload=function(_4c0,data){ var opts = $.data(_4c0, "form").options; if (typeof data == "string") { var _4c1 = {}; if (opts.onBeforeLoad.call(_4c0, _4c1) == false) { return; } $.ajax({ url : data, data : _4c1, dataType : "json", success : function(data) { _4c2(data.data); }, error : function() { opts.onLoadError.apply(_4c0, arguments); } }); } else { _4c2(data); } function _4c2(data,parentName) { var form = $(_4c0); for ( var name in data) { var val = data[name]; if(parentName)name = parentName+"."+name; var rr = _4c3(name, val); if (!rr.length) { var _4c4 = _4c5(name, val); if (!_4c4) { $("input[name=\"" + name + "\"]", form).val(val); $("textarea[name=\"" + name + "\"]", form).val(val); $("select[name=\"" + name + "\"]", form).val(val); } } _4c6(name, val); if(val instanceof Object)_4c2(val,name); } opts.onLoadSuccess.call(_4c0, data); $(target).form("validate"); } ; function _4c3(name, val) { var rr = $(_4c0).find( "input[name=\"" + name + "\"][type=radio], input[name=\"" + name + "\"][type=checkbox]"); rr._propAttr("checked", false); rr .each(function() { var f = $(this); if (f.val() == String(val) || $.inArray(f.val(), $.isArray(val) ? val : [ val ]) >= 0) { f._propAttr("checked", true); } }); return rr; } ; function _4c5(name, val) { var _4c7 = 0; var pp = [ "textbox", "numberbox", "slider" ]; for (var i = 0; i < pp.length; i++) { var p = pp[i]; var f = $(_4c0).find("input[" + p + "Name=\"" + name + "\"]"); if (f.length) { f[p]("setValue", val); _4c7 += f.length; } } return _4c7; } ; function _4c6(name, val) { var form = $(_4c0); var cc = [ "combobox", "combotree", "combogrid", "datetimebox", "datebox", "combo" ]; var c = form.find("[comboName=\"" + name + "\"]"); if (c.length) { for (var i = 0; i < cc.length; i++) { var type = cc[i]; if (c.hasClass(type + "-f")) { if (c[type]("options").multiple) { c[type]("setValues", val); } else { c[type]("setValue", val); } return; } } } }; } $.extend($.fn.form.methods,methods); $(target).form(options,params); return target; }
User 对像中 有一个 depart 对像
controller中 返回一map map中有一个key:data value:user 对像
表单
<select editable="false" class="easyui-combobox" required="true" name="depart.id" style="width:300px;" data-options="panelHeight:'auto'">
<#list d as departs>
<option value="${d.id}" >${d.name}</option>
</#list>
</select>
<input type="text" name="depart.name">
easyui form 本身不支持这种多级属性绑定
也没有提供相应的相应的处理事件
因此 重写了 easyui的load 事件
使用以上代码 $("#fm").formX(); 其它的与 easyui form表差异。只是将 form()换成了 formX()
交待 一下 easy ui 的版本 jQuery EasyUI 1.4.1
其实与版本的关系不大。升级easyui 理论上也不会影响