如何在 jqgrid 编辑/添加/删除选项上打开部分视图作为弹出窗口

Posted 2023-05-09

【中文标题】如何在 jqgrid 编辑/添加/删除选项上打开部分视图作为弹出窗口

【英文标题】：how to open the partial view as popup on jqgrid edit/add/delete option

【发布时间】：2017-04-14 07:43:45

【问题描述】：

当我单击添加/编辑按钮时，它应该将部分视图表单显示为模式弹出窗口。

 $('#list').jqGrid(  
       caption: "Employee Details",  
       url: '/Employee/GetEmployee/',  
       datatype: "json",  
       contentType: "application/json; charset-utf-8",  
       mtype: 'GET',  
       colNames: ['Address', 'City', 'Id', 'Name'],  
       colModel: [  
              name: 'Address', index: 'Address', width: 150 ,  
              name: 'City', index: 'City', width: 150 ,  
              name: 'Id', index: 'Id', width: 150 ,  
              name: 'Name', index: 'Name', width: 150   
       ],  
       rowNum: 10,  
       loadonce: true  

   );  

   jQuery("#list").jqGrid('#pager',  edit: false, add: false, del: false);  

我怎样才能做到这一点..任何帮助真的很感激！！！

【参考方案1】：

jqGrid 作为 javascript 库工作，它不能使用任何局部视图。如果要显示编辑/添加/删除按钮，则应替换该行

jQuery("#list").jqGrid('#pager',  edit: false, add: false, del: false);

到

jQuery("#list").jqGrid('navGrid', '#pager');

并在colModel 的列中添加editable: true 属性，您希望允许用户对其进行编辑。您也必须在 jqGrid 中使用 pager: '#pager' 选项。您必须在页面的 html 标记中另外包含空 div <div id="pager"></div>。要准确回答您的问题，取决于您使用的 jqGrid 版本和 jqGrid 的分支。我开发的Free jqGrid fork 允许使用 jqGrid 的pager: true 选项并跳过navGrid 方法的'#pager' 参数。请参阅the wiki article 了解更多信息。

此外，您可以删除不需要的index 属性，也可以删除width: 150 属性，因为150 是width 属性的默认值。为了能够编辑数据，您必须在 MVC 操作的 URL 中添加 editurl 参数，该操作应在编辑时调用。