EasyUI的Combogrid 多选项 通过Form表单提交,后台只能获取最后一个值的解决办法
之前用在ASP.NET MVC 框架下使用EasyUI开发系统,在开发过程中一直没有使用过combogrid的多选项( multiple)。所以一直也没遇到这个问题;
在combogrid的multiple参数为true的情况下(多选),通过easyui的$('#fm').form('submit')方法提交form表单时,后台只能获取到combogrid的最后一个选项值;
前端代码:
<form id="form1" method="post">
<div style="padding-top: 2px;margin-left: 10px; margin-right: 10px;">
<table class="form">
<tr>
<th class="formTitle">模板名称</th>
<td class="formValue" colspan="3">
<input id="T_FullName" name="T_FullName" type="text" class="easyui-textbox " data-options="required:true" />
</td>
</tr>
<tr>
<th class="formTitle">项目负责人</th>
<td class="formValue">
<input id="T_TeamLeader" name="T_TeamLeader" type="text" class="easyui-combogrid" data-options="required:true" />
</td>
</tr>
<tr>
<th class="formTitle">产品名称</th>
<td class="formValue">
<input id="T_ProductName" name="T_ProductName" type="text" class="easyui-combobox " data-options="required:true" />
</td>
</tr>
</table>
</div>
</form>
<script>
$('#T_ProductName').combogrid({
url: '/BaseDataManage/Product/GetGridJson',
multiple: true,
idField: 'T_FullName',
textField: 'T_FullName',
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'T_FullName', title: '产品名称', width: 280 }
]],
});
function submitForm() {
$("#form1").form({
url: "/ProjectManage/ProductionTemplate/SubmitForm",
ajax: true,
onSubmit: function (param) {
var isValid = $(this).form('enableValidation').form('validate');
if (!isValid) {
$.loading(false);
}
return isValid;
},
success: function (data) {
var data = eval('(' + data + ')');
if (data.state == "success") {
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
$("#form1").submit();
}
</script>
后台代码:
public ActionResult SubmitForm(ProductionTemplateEntity entity, string keyValue)
{
try
{
app.SubmitForm(entity, keyValue);
return Success("操作成功。");
}
catch (Exception ex)
{
return Error(ex.Message);
}
}
提交后发现,T_ProductName 字段只保存了我勾选的最后一个选项值。
于是我在网上问了度娘,度娘说他不知道,然后我又去了easyui官方论坛找了找,最终只找到了两篇相似的帖子。
https://www.jeasyui.com/forum/index.php?topic=2301.0(issue with multiple property of combogrid)
https://www.jeasyui.com/forum/index.php?topic=3459.0(combobox multiple not working)
在帖子中,官方回复是,在php代码中,需要通过循环遍历 提交的参数,或者用join(",")方法转为字符串;
跟着这个思路,我改了一下在 .NET MVC 模式下的后台处理前端form表单提交方法的入参变量类型。一般在.NET MVC 模式下,我们接收的前端传入参数有两种,一种是直接将需要提交的form表单对应的实体作为参数的变量类型实现所有字段整体接收,另一种是将表单字段分别作为传入参数一个一个的接收;
表单实体参数:
public ActionResult SubmitForm(ProductionTemplateEntity entity,string keyValue){
//具体实现业务
}
表单字段参数:
public ActionResult SubmitForm(string T_CraftProcess, string T_ProductName, string T_AssignerId, string T_ApproverId, string T_CopyforUserId, string keyValue){
//具体实现业务
}
无论哪一种,在遇到combogrid或者combobox 多选的时候,都只能接收到最后一个选项。
所以在.NET MVC开发过程中,在Controller 后台处理提交表单的方法中,需要将参数变量类型修改一下,将需要传入多个选项值的字段改为List集合。比如,前端combogrid多选的字段为:T_ProductName,如上面的两种方法我修改为List<string> T_ProductName,如下所示:
表单实体参数修改后的方法:
public ActionResult SubmitForm(ProductionTemplateEntity entity,List<string> T_ProductName,string keyValue){
entity.T_ProductName = Utils.GetArrayStr(T_ProductName,",");
app.SubmitForm(entity, keyValue);
}
表单字段参数修改后的方法:
public ActionResult SubmitForm(string T_CraftProcess, string T_ProductName, string T_AssignerId, string T_ApproverId, string T_CopyforUserId, string keyValue){
ProductionTemplateEntity entity=new ProductionTemplateEntity();
entity.T_ProductName = Utils.GetArrayStr(T_ProductName,",");
entity.T_CraftProcess= T_CraftProcess;
entity.T_AssignerId= T_AssignerId;
entity.T_ApproverId= T_ApproverId;
entity.T_CopyforUserId= T_CopyforUserId;
app.SubmitForm(entity,keyValue);
return Success("操作成功。");
}
这样,通过List集合就可以将多个选项值传入,然后可以以逗号分隔的字符串的形式存入数据库。
大部分以逗号(,)分隔的字符串,在通过form(load,data)的方法中,对应combobox和combogrid字段时,都可以自动转为多选赋值。如果遇到有的字段不能赋值,建议可以通过combogrid("setValues",values)解决;
比如:
$.ajax({
url: "/ProjectManage/ProductionTemplate/GetFormJson",
data: { keyValue: keyValue },
dataType: "json",
async: false,
success: function (data) {
$('#form1').form('load', data);
$('#T_ProductName').combogrid("setValues", data.T_ProductName.split(","));//针对combogrid 多选项赋值不成功的,可以通过setValues解决
}
});
加载赋值失败的效果:
使用 $('#T_ProductName').combogrid("setValues", data.T_ProductName.split(","));后的效果: