EasyUI的Combogrid 多选项通过Form表单提交，后台只能获取最后一个值的解决办法

程序员文章站 2024-02-05 12:56:28

...

之前用在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(",")方法转为字符串;

EasyUI的Combogrid 多选项通过Form表单提交，后台只能获取最后一个值的解决办法

跟着这个思路，我改了一下在 .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解决
        
    }
});

加载赋值失败的效果：

EasyUI的Combogrid 多选项通过Form表单提交，后台只能获取最后一个值的解决办法