欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

之前用在ASP.NET MVC 框架下使用EasyUI开发系统,在开发过程中一直没有使用过combogrid的多选项( multiple)。所以一直也没遇到这个问题;

在combogrid的multiple参数为true的情况下(多选),通过easyui的$('#fm').form('submit')方法提交form表单时,后台只能获取到combogrid的最后一个选项值;

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

前端代码:

<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表单提交,后台只能获取最后一个值的解决办法

使用 $('#T_ProductName').combogrid("setValues", data.T_ProductName.split(","));后的效果:

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