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>