jqGrid：添加新的行按钮答案

【问题标题】：jqGrid : Add new Row ButtonjqGrid：添加新的行按钮
【发布时间】：2014-10-12 17:44:43
【问题描述】：

我想创建一个 html 按钮元素。当有人单击该按钮时，将打开一个用于添加新记录的新窗口。这意味着，该按钮将完成页脚工具栏添加图标的任务。

【问题讨论】：

你想通过点击按钮弹出一个窗口吗？？
是的。当我点击添加新行工具栏图标时出现的弹出窗口。

【解决方案1】：

如果您为 jqGrid 启用了 pager，默认情况下会提供在分页器中添加新行的选项，只需添加属性即可，

pager: '#pcrud',

并在 jqGrid 定义之后添加以下行，

jQuery("#grid").jqGrid('navGrid','#pcrud',{});

现在，转到您的问题，因为您要求创建单独的按钮以打开添加项目弹出窗口，创建一个按钮

<button class="add-new-row">Add New Row</button>

并且，在按钮点击事件上添加jqGrid弹出触发代码

 $(".add-new-row").on("click",function(){
        $("#grid").editGridRow( "new" );
   });

您可以按照以下文档更好地理解Form Editing、jqGrid Pager和Inline Editing。

如果您想在 jqGrid 中添加内联行，请改用它，

$(".add-new-row").on("click",function(){
    $("#grid").jqGrid('addRow',"new");
});

这是给你的working jsFiddle demo。

P.S Go 对文档进行了一次思考，因此您可以将其塑造成您想要的样子。

【讨论】：

【解决方案2】：

html:
<p class="back-screen"></p>
<p class="front-screen"><a href="">&times;</a></p>
<button id="show" type='button'>Modal</button>

css:
.back-screen{position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.3);z-index: -1; display:none;}
.front-screen{position: absolute; top:25%; left:25%; background: #fff; width: 50%;height:50%; z-index:100;display:none;}
.active{display:inline}

jquery:
$(document).ready(function(){
    $('#show').click(function(){
          $('.back-screen,.front-screen').fadeIn(500).addClass('active');
    })
})

demo: <http://jsfiddle.net/wahidsherief/8u2y9ddw/1/>

【讨论】：

查看问题的主题行 - "jqGrid : Add new Row Button" 。我需要与 jqGrid 相同的功能添加新行按钮。