为什么无法使用easyui datagrid在表中添加新行

Question

在我的项目中，我使用easyui，并在表格中添加了工具栏。

页首是：

<script type="text/javascript" src="jsui/easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="jsui/easyui-1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jsui/easyui-1.5.3/plugins/jquery.datagrid.js"></script>
<script type="text/javascript" src="jsui/easyui-1.5.3/plugins/jquery.edatagrid.js"></script>
<script type="text/javascript" src="jsui/easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="calendar/lhgcore.js"></script>
<script type="text/javascript" src="calendar/lhgcalendar.js"></script>

一些页面代码如下：

<div class="table" style="height:100%;width:100%;padding-bottom:50px">
<table id="storInfoTB" border=1px cellspacing=0 style="width:100%" class="easyui-datagrid" data-options=""></table>
</div>

<script> 
$("#storInfoTB").datagrid({
 ..........
 toolbar: [{
   id: "con",   
   text: "<input type=\"text\" id=\"content\" placeholder=\"...\"/>",
      },
      {
        id: "search",   
        text: "search somthing",
        iconCls: "icon-search"                  
      },
      {
        id: "add",  
        text: "add new Row",
        iconCls: "icon-add",
        handler: function(){
          alert("test");
          $("#storInfoTB").edatagrid("addRow",0);
        }
      },
      {
        id: "modify",   
        text: "edit selected Row",
        iconCls: "icon-edit"                    
      },
      {
        id: "delete",   
        text: "delete selected Row",
        iconCls: "icon-cut"                 
      },
      {
        id: "back", 
        text: "return",
        iconCls: "icon-undo"                    
       }],
      ......
    });

现在我想通过单击添加按钮在表格中添加一行。我已经测试了它可以显示测试信息，但是“edatagrid”是失败的。

点击添加按钮后应该有一个新的空白行，但不OK。

我需要别人的帮助，谢谢。

Answer 1

我已经解决了这个问题。您必须在使用 edatagrid 之前注册此功能

$(function(){
  $("#storInfoTB").edatagrid({});
});