JqG​​rid:表单字段中的自动填充

时间:2018-01-26 20:17:53

标签: jqgrid free-jqgrid

我正在使用免费版(最新版)的jqgrid和MVC c#。

我有表单字段设置。当用户在页脚按钮(添加)中单击添加时,它会显示包含所有表单域的模式弹出窗口。

我希望表单字段中的第一个文本框能够自动完成,即当他们开始在文本框中输入他们的empployee数字时,我应该查询我的mvc控制器并获取数据然后预填充是否匹配。一旦预填充,我还想在表单上更新2个标签,firstname&姓。此外,应该禁用该按钮,直到在员工文本框中获取正确的ID。

不确定我该怎么做。我可以分享我用过的样本网格。

由于

<script type="text/javascript">
$(function () {
    "use strict";
    var $grid = $("#list");             
    $grid.jqGrid({
        url: '@Url.Action("GetData", "Home")',
        datatype: "json",
        mtype: 'Get',
        colNames: ['Id', 'Name', 'Sex', 'Address'],
        loadonce: true,
        height: '100%',
        autowidth: true,
   colModel: [
            { name: 'empid', index: 'empid', editable: true,  editrules: { required: true}},
            { name: 'fname', index: 'fname', editable: true,  editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
            { name: 'lname', index: 'lname', editable: true,  editrules: { required: true}},                
            { name: 'address', index: 'address', editable: true,  editrules: { required: true}}
 ],
        cmTemplate: { autoResizable: true, editable: true },
        autoResizing: { compact: true, resetWidthOrg: true },                
        iconSet: "fontAwesome",
        rowNum: 10,
        rowList: [5, 10, 20, "10000:All"],
        viewrecords: true,
        autoencode: true,
        sortable: true,              
        pager: true,
        rownumbers: true,
        sortname: "uid",
        sortorder: "desc",
        pagerRightWidth: 150,           
        inlineEditing: {
            keys: true
        },
        formEditing: {
             reloadGridOptions: { fromServer: true },
                reloadAfterSubmit: true,
                width: 310,
                closeOnEscape: true,
                closeAfterEdit: true,
                closeAfterAdd: true,
                closeAfterDelete: true,
                savekey: [true, 13]                    
        }
        caption: "MyData"
    }).jqGrid("navGrid")
    .editGridRow("new", properties);              
});

更新:

如果还有选项可以在文本框上使用onkeyup,mouseover等,以便我可以验证在文本框中输入的内容,然后根据此值更新其他文本框

1 个答案:

答案 0 :(得分:0)

我通过使用keyup事件而不是使用自动完成来完成此操作。 相关代码如下:

     colModel: [
      {
    name: 'empid', index: 'empid', editable: true, , editrules: { required: true },
    editoptions:
    {
        dataEvents: [
            {
                type: 'keyup',
                fn: function (e) {

                    $.ajax({
                        url: //call to my method in my mvc controller,
                        data: "empid=" + $(this).val(),
                        type: "GET",
                        success: function (data) {
                            //validate and populate other fields here
                            }
                            else {

                            }
                        },
                        error: function (passParams) {
                            // code here
                        }
                    });

                }
            }
        ]
    }                   
    ]