无法获得 MVC、jqGrid 模态编辑和 digitalbush 屏蔽输入工作

Question

我需要的每样东西都能正常工作，所以我对 jqGrid 很满意，但在屏蔽输入方面仍然存在问题。更可能的问题是我缺乏理解。

我正在尝试在模态编辑表单上格式化客户电话号码的输入。我定义了掩码，但是当我添加行时 editoptions: {datainit: function (elem) { $(elem).mask("(999) 999-9999"); } 它不会打开模态表单来添加或编辑。当我删除该行时，它将打开表单，但电子邮件格式化程序不起作用。

我阅读了 Trirand 的文档，但也许我仍然对编辑功能感到困惑。如果有人有一个使用屏蔽输入的示例网格，可以帮助我理解我做错了什么。

我还更改了加载脚本的顺序，但没有任何运气。可能是脚本的版本冲突吗？无论如何，我已经包含了代码，任何帮助将不胜感激。

<div  class="page-content">
    <table id="JQGrid1" class="ui-jqgrid" ></table>
    <div id="JQGrid1_pager"></div>
</div>

<link href="~/JqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="~/JqGrid/css/jquery-ui.theme.min.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.min.js"></script>

<script src="~/Scripts/jquery.maskedinput.js" type="text/javascript"></script>

<!-- language pack - MUST be included before the jqGrid javascript -->
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>

<!-- the jqGrid javascript runtime -->
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>


<script type="text/javascript">

    $(document).ready(function () {        
        $("#CustomerPhone1").mask("(999) 999-9999");
        $("#phone").mask("(999) 999-9999");        
    });

    $("#JQGrid1").jqGrid({
        url: "/Customers/OnCustomerDataRequested",
        editurl: "/Customers/EditCustomerData",
        mtype: "GET",
        datatype: "json", 
        page: 1,
        jsonReader: { id: "Id" },
        prmNames: { id: "Id" },
        colNames: ["Id", "Last Name", "First Name",
        "Address", "Address", "City", "State", "Zip Code", "Email",  "Phone", "Phone",
    "Ship Address", "Ship Address", "Ship City", "Ship State", "Ship Zip", "Ship Phone", "Ship Name"],
    colModel: [
        { key: true, width: 50, name: "Id", hidden: true },
        { name: "CustomerLastName", editable: true, width: 70, editrules: { required: true }, formoptions: { rowpos: 2, colpos: 1 } },
        { name: "CustomerFirstName", editable: true, width: 70, editrules: { required: true }, formoptions: { rowpos: 2, colpos: 2 } },
        { name: "CustomerAdd1", editable: true, width: 110, formoptions: { rowpos: 3, colpos: 1 } },
        { name: "CustomerAdd2", editable: true, width: 110, hidden: true, editrules: { edithidden: true }, formoptions: { rowpos: 3, colpos: 2 } },
        { name: "CustomerCity", editable: true, width: 50, formoptions: { rowpos: 4, colpos: 1 } },
        { name: "CustomerState", editable: true, width: 60, formoptions: { rowpos: 4, colpos: 2 } },
        { name: "CustomerZip", editable: true, width: 60, formoptions: { rowpos: 5, colpos: 1 } },
        { name: "CustomerEmail", editable: true, width: 80, editrules: { required: true, formatter: 'email' }, formoptions: { rowpos: 5, colpos: 2 }, formatter: "email" },

        { name: "CustomerPhone1", editable: true, width: 80, index: "CustomerPhone1", edittype: 'text', editrules: { required: true },
            editoptions: {datainit: function (elem) { $(elem).mask("(999) 999-9999"); }
              }, formoptions: { rowpos: 6, colpos: 1 } },

        { name: "CustomerPhone2", editable: true, width: 80, formoptions: { rowpos: 6, colpos: 2 } },
        { name: "CustomerShipAdd1", editable: true, width: 110, hidden: true, editrules: { edithidden: true }, formoptions: { rowpos: 8, colpos: 1 } },
        { name: "CustomerShipAdd2", editable: true, width: 110, hidden: true, editrules: { edithidden: true }, formoptions: { rowpos: 8, colpos: 2 } },
        { name: "CustomerShipCity", editable: true, width: 50, hidden: true, editrules: { edithidden: true }, formoptions: { rowpos: 9, colpos: 1 } },
        { name: "CustomerShipState", editable: true, width: 60, hidden: true, editrules: { edithidden: true }, formoptions: { rowpos: 9, colpos: 2 } },
        { name: "CustomerShipZip", editable: true, width: 60, hidden: true, editrules: { edithidden: true }, formoptions: { rowpos: 10, colpos: 1 } },
        { name: "CustomerShipPhone1", editable: true, width: 80, hidden: true, editrules: { edithidden: true }, formoptions: { rowpos: 10, colpos: 2 } },
        { name: "CustomerShipName", editable: true, width: 80, hidden: true, editrules: { edithidden: true }, formoptions: { rowpos: 11, colpos: 1 } },
    ],
    height: "auto",
    caption: "Customers",        
    rowNum: 25,
    autowidth: true,
    pager: "#JQGrid1_pager",
}).jqGrid('navGrid', "#JQGrid1_pager", { edit: true, add: true, del: true, view: false, refresh: true },
     { // edit options
         width: 900, height: 595,
         addCaption: 'Edit Customer',
         beforeShowForm: function (form) {                  
             $("#pData, #nData", form).hide();
         },
         closeAfterEdit: true,
     },
    { // add options
        width: 900, height: 595,
        addCaption: 'New Customer',
        beforeShowForm: function (form) {
          //  $("#phone").mask("(999) 999-9999");
            $("#pData, #nData", form).hide();
        },            
        closeAfterAdd: false,
        afterSubmit: function (data, postdata, oper) {
            var response = data.responseJSON;
            if (response.hasOwnProperty("error")) {
                if (response.error.length) {
                    return [false, response.error];
                }
            }
            return [true, "", ""];
        },
        errorTextFormat: function (data) {
            return data.responseText
        }
    },

{ // del options
}
)

Answer 1

试试这个：

editoptions: {dataInit: function (elem) { $(elem).mask("(999) 999-9999"); }}

您应该使用editoptions:{dataInit... 而不是editoptions:{datainit...

示例：http://codepen.io/paulodiogo/pen/xGjdJq

参考：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules