Navgrid 在 JQGrid 上不显示 add/delete

Question

请找到我附上的代码：

Jqgrid 创建：

<script type="text/javascript">

         $(function () {
             $("#datagrid").jqGrid({
                 url: 'jqgridwithwebmethod.aspx/ConvertDataTabletoString',
                 datatype: 'json',
                 mtype: 'POST',

                 serializeGridData: function (postData) {

                     // return JSON.stringify(postData);
                     return JSON.stringify(postData);
                 },

                 ajaxGridOptions: { contentType: "application/json" },
                 loadonce: true,
                 colNames: ['Name', 'Age', 'Mobile', 'City', 'Sex', 'FirstName', 'LatName', 'Address', 'Landline'],
                 colModel: [
         { name: 'Name', index: 'Name', width: 200, frozen: true, editable: true },
         { name: 'Age', index: 'Age', sorttype: 'int', width: 200, editable: true },
         { name: 'Mobile', index: 'Mobile', sorttype: 'int', width: 200, editable: true },
         { name: 'City', index: 'City', width: 200, editable: true },
         { name: 'Sex', index: 'Sex', width: 200, editable: true },
         { name: 'FirstName', index: 'FirstName', width: 200, editable: true },
         { name: 'LastName', index: 'LastName', width: 200, editable: true },
         { name: 'Address', index: 'Address', width: 200, editable: true },
         { name: 'Landline', index: 'Landline', width: 300, editable: true }

                 ],
                 pager: '#nav',
                 rowNum: 10,
                 sortname: 'Name',
                 autowidth: true,
                 sortorder: "desc",
                 shrinkToFit: false,
                 //forceFit:false,
                 loadonce: true,
                 rowList: [10, 20, 30],
                 viewrecords: true,
                 gridview: true,
                 jsonReader: {
                     page: function (obj) { return 1; },
                     total: function (obj) { return 1; },
                     records: function (obj) { return obj.d.length; },
                     root: function (obj) { return obj.d; },
                     repeatitems: false
                     //id: "0"
                 },
                 caption: 'My first grid'
             });                 
             $("#datagrid").jqGrid('setFrozenColumns');
         });
         **$('#datagrid').jqGrid('navGrid', '#nav',**
                  {
                      edit: true,
                      add: true,
                      del: true,
                      search: true,
                      searchtext: "Search",
                      addtext: "Add",
                      edittext: "Edit",
                      deltext: "Delete"
                  });
                  </script>

ConvertDataTabletoString 函数定义为：

 [WebMethod]
    public static List<Dictionary<string, object>> ConvertDataTabletoString()
    {
        DataTable dt = new DataTable();
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("select *  from studen with(nolock)", con))
            {
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                Dictionary<string, object> row;
                foreach (DataRow dr in dt.Rows)
                {
                    row = new Dictionary<string, object>();
                    foreach (DataColumn col in dt.Columns)
                    {
                        row.Add(col.ColumnName, dr[col]);
                    }
                    rows.Add(row);
                }

                return rows;

            }
        }
    }

Jqgrid 使用从 SQL 服务器接收的数据。 edit/add/delete 图标在 Jqgrid 上没有显示..

请帮忙..

Answer 1

您将 navGrid 方法的调用放在了错误的地方。您有块 $(function () {...});，这意味着文档就绪事件处理程序。您将 navGrid 方法的调用置于块之外。这是错的。您应该在上面的一行（直接在 setFrozenColumns 的调用之后）对其进行模式化以解决问题。

Navgrid 在 JQGrid 上不显示 add/delete

Navgrid not displaying add/delete on JQGrid

javascript

jquery

jqgrid