使用easyui 如何显示二级对象

easyui是一个轻量级的jquery框架，可以很方便的制作出漂亮的页面。但是easyui不支持二级对象的显示，而很多时候我们却需要用到，我们就需要对easyui的form组件进行扩展，下面是扩展代码，原文引用地址： Easyui Form增加myLoad方法,使其支持二级数据对象

$.extend($.fn.form.methods, {
	myLoad : function (jq, param) {
		return jq.each(function () {
			load(this, param);
		});

		function load(target, param) {
			if (!$.data(target, "form")) {
				$.data(target, "form", {
					options : $.extend({}, $.fn.form.defaults)
				});
			}
			var options = $.data(target, "form").options;
			if (typeof param == "string") {
				var params = {};
				if (options.onBeforeLoad.call(target, params) == false) {
					return;
				}
				$.ajax({
					url : param,
					data : params,
					dataType : "json",
					success : function (rsp) {
						loadData(rsp);
					},
					error : function () {
						options.onLoadError.apply(target, arguments);
					}
				});
			} else {
				loadData(param);
			}
			function loadData(dd) {
				var form = $(target);
				var formFields = form.find("input[name],select[name],textarea[name]");
				formFields.each(function(){
					var name = this.name;
					var value = jQuery.proxy(function(){try{return eval('this.'+name);}catch(e){return "";}},dd)();
					var rr = setNormalVal(name,value);
					if (!rr.length) {
						var f = form.find("input[numberboxName=\"" + name + "\"]");
						if (f.length) {
							f.numberbox("setValue", value);
						} else {
							$("input[name=\"" + name + "\"]", form).val(value);
							$("textarea[name=\"" + name + "\"]", form).val(value);
							$("select[name=\"" + name + "\"]", form).val(value);
						}
					}
					setPlugsVal(name,value);
				});
				options.onLoadSuccess.call(target, dd);
				$(target).form("validate");
			};
			function setNormalVal(key, val) {
				var rr = $(target).find("input[name=\"" + key + "\"][type=radio], input[name=\"" + key + "\"][type=checkbox]");
				rr._propAttr("checked", false);
				rr.each(function () {
					var f = $(this);
					if (f.val() == String(val) || $.inArray(f.val(), val) >= 0) {
						f._propAttr("checked", true);
					}
				});
				return rr;
			};
			function setPlugsVal(key, val) {
				var form = $(target);
				var cc = ["combobox", "combotree", "combogrid", "datetimebox", "datebox", "combo"];
				var c = form.find("[comboName=\"" + key + "\"]");
				if (c.length) {
					for (var i = 0; i < cc.length; i++) {
						var combo = cc[i];
						if (c.hasClass(combo + "-f")) {
							if (c[combo]("options").multiple) {
								c[combo]("setValues", val);
							} else {
								c[combo]("setValue", val);
							}
							return;
						}
					}
				}
			};
		};
	}
});

使用的时候只需要简单调用即可，数据为json格式，类似于这样：

var data={"code":"4877","codename":"卓越绩效","type":"1","models":[{"page":0,"rows":0,"sort":null,"order":null,"pageVO":null,"id":"138596413407202","code":"4877","content":"测试内容3","grade":"A","gradename":"卓越","codename":"卓越绩效","type":"1","typename":"通用评价","group":null,"editor":null},{"page":0,"rows":0,"sort":null,"order":null,"pageVO":null,"id":"138596413407203","code":"4877","content":"测试内容4","grade":"A","gradename":"卓越","codename":"卓越绩效","type":"1","typename":"通用评价","group":null,"editor":null},{"page":0,"rows":0,"sort":null,"order":null,"pageVO":null,"id":"138596413407204","code":"4877","content":"测试内容15","grade":"A","gradename":"卓越","codename":"卓越绩效","type":"1","typename":"通用评价","group":null,"editor":null}]}

form表单中这样接收就可以了：

<form id="plan_evaluatestranderEdit_editForm" method="post">
        <table class="tableForm">
        <tr>
            <th>标准代码</th>
            <td><input id="plan_evaluatestranderEdit_code" name="code" class="easyui-validatebox" data-options="required:true" /></td>
            <th>标准名称</th>
            <td><input id="plan_evaluatestranderEdit_codename" name="codename" class="easyui-validatebox" data-options="required:true" /></td>
            <th>类型</th>
            <td><input name="type" id="edit_evaluaestrander_type" panelHeight="auto"/></td>
        </tr>
        <tr id="evaluatestrander_tr0">
            <th><input type="text" name="models[0].id" hidden="hidden"/>1.</th>
            <td colspan="3"><input id="models[0].content" name="models[0].content" class="easyui-validatebox" data-options="required:true" style="width:365px"/></td>
            <th>等级</th>
            <td><input class="edit_eval_grade" name="models[0].grade" panelHeight="auto"/></td>
        </tr>
        <tr id="evaluatestrander_tr1">
            <th><input type="text" name="models[1].id" hidden="hidden"/>2.</th>
            <td colspan="3"><input id="models[1].content" name="models[1].content" class="easyui-validatebox" data-options="required:true" style="width:365px"/></td>
            <th>等级</th>
            <td><input class="edit_eval_grade" name="models[1].grade" panelHeight="auto"/></td>
        </tr>
        <tr id="evaluatestrander_tr2">
            <th><input type="text" name="models[2].id" hidden="hidden"/>3.</th>
            <td colspan="3"><input id="models[2].content" name="models[2].content" class="easyui-validatebox" data-options="required:true" style="width:365px"/></td>
            <th>等级</th>
            <td><input class="edit_eval_grade" name="models[2].grade" panelHeight="auto"/></td>
        </tr>
        <tr  id="evaluatestrander_tr3">
            <th><input type="text" name="models[3].id" hidden="hidden"/>4.</th>
            <td colspan="3"><input id="models[3].content" name="models[3].content" class="easyui-validatebox" data-options="required:true" style="width:365px"/></td>
            <th>等级</th>
            <td><input class="edit_eval_grade" name="models[3].grade" panelHeight="auto"/></td>
        </tr>
        <tr id="evaluatestrander_tr4">
            <th><input type="text" name="models[4].id" hidden="hidden"/>5.</th>
            <td colspan="3"><input id="models[4].content" name="models[4].content" class="easyui-validatebox" data-options="required:true" style="width:365px"/></td>
            <th>等级</th>
            <td><input class="edit_eval_grade" name="models[4].grade" panelHeight="auto"/></td>
        </tr>
        </table>
    </form>