如何在JQGrid行上调用模态窗口单击

Question

我有jqgrid和模态。通过使用模态窗口，我们可以在网格中添加值同时，在网格的行上进行编辑时，必须显示模式窗口并填充带有网格的行值。我尝试了@htmlaction单击JQGrid，它可以转到控制器，但是如何在编辑时调用模态窗口以填充网格行数据。

    jQuery("#listvalues_ajaxGrid").jqGrid({
        url: '@Url.Action("ListvaluesGrid")',
        datatype: "json",
        mtype: 'Get',
        colNames: [
            'List Key', 'List Value Name', 'List Value Code', 'Inactive'],
        colModel: [
             { key: false, name: 'list_key', hidden: true },
             {
                 key: false, name: 'list_value_name',
                 formatter: function (cellvalue, options, rowObject) {
                     show();
                     var x = '@Html.ActionLink("Col", "Edit", "Lists", new { id = "listvalid" }, new { @style = "color:black;font-weight:bold;" })';
                     return x.replace("listvalid", rowObject.list_key).replace("Col", rowObject.list_value_name);
                 }, sortable: true, align: 'left', width: 200, editable: true
             },
             @*@Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { @class = "modal" })*@
            //{ key: true, name: 'list_value_name', hidden: false, editable:true },
            { key: false, name: 'list_value_code', hidden: false, editable: false },
            { key: false, name: 'inactive', hidden: false, width: 50, sortable: false, formatter: "checkbox", align: "center", editable: false },
        ],
        sortname: 'list_key',
        sortorder: "asc",
        viewrecords: true,
        rowNum: 5,
        pager: '#listvalues_ajaxPager',
        onSelectRow: function (id) {
            if (id && id !== lastSel) {
                listvalues_ajaxGrid.jqGrid('restoreRow', lastSel);
                var cm = grid.jqGrid('getColProp', 'Name');
                cm.editable = false;
                grid.jqGrid('editRow', id, true, null, null, 'clientArray');
                cm.editable = true;
                lastSel = id;
            }
        },
        height: '200px', mtype: 'GET',
        emptyrecords: 'No records found',
        autowidth: true,
        mutiselect: true,
        altRows: true,
        'cellEdit': true,
        'cellsubmit': 'clientArray',
        editurl: '@Url.Action("ListvaluesGrid")',
        loadComplete: function () {
            var table = this;
            setTimeout(function () {
                updatePagerIcons(table);
            }, 0);
        },
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            userdata: "userdata"
        },
        //editurl:
    });

my bootstrap modal window

  <div class="modal fade" id="modalBootstrap" role="dialog">
                                @Html.Hidden("hid_listvalues")
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">List Values</h4>
                                        </div>
      <div class="modal-body">
                 <div class="form-group">
                   @Html.LabelFor(model => model.maslistvalues.list_value_code, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                 @Html.EditorFor(model => model.maslistvalues.list_value_code, new { htmlAttributes = new { @class = "form-control" } })
               @Html.ValidationMessageFor(model => model.maslistvalues.list_value_code, "", new { @class = "text-danger" })
                 </div>
                </div>
         <div class="form-group">
          @Html.LabelFor(model => model.maslistvalues.list_value_name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
           @Html.EditorFor(model => model.maslistvalues.list_value_name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.maslistvalues.list_value_name, "", new { @class = "text-danger" })
              </div>
         </div>
       <div class="form-group">
         @Html.LabelFor(model => model.maslistvalues.inactive, htmlAttributes: new { @class = "control-label col-md-2" })
       <div class="col-md-10">
            <div class="checkbox">
           @Html.EditorFor(model => model.maslistvalues.inactive)
             @Html.ValidationMessageFor(model => model.maslistvalues.inactive, "", new { @class = "text-danger" })
            </div>
            </div>
       </div>
      </div>
                          <div class="modal-footer">
                             <div class="wizard-actions">
                                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                 <input type="submit" value="Save" class="btn btn-primary" onclick="saveclick_listvalues();" />
                             </div>
                           </div>
                       </div>
               </div>
                            </div>

Answer 1

在jQuery formatter函数中，我们可以调用模态弹出

 formatter: function (cellvalue, options, rowObject) {
                 var x ='@Html.ActionLink("Col", "Index", "Lists", new { id1 = "listid" }, new { @style = "color:black;font-weight:bold;", onclick="check();" })';
                 //var x+='<a href="#" data-toggle="modal" data-target="#modalBootstrap" onclick="return check();"><i class="fa fa-pencil icon"></i></a>';  
                 var a = sessionStorage["Selected"];
                 if (a == 0)
                 {
                     $('#modalBootstrap').modal('show');  //---popupshow
                     sessionStorage["Selected"] = null;
                 }
                 return x.replace("listid", rowObject.list_value_key).replace("Col", rowObject.list_value_name);
             }, sortable: false, align: 'left',  editable: false