JQGrid 空网格，没有导航或编辑图标

Question

出于某种原因，我的网格是空白的，没有行（甚至没有空行），没有导航图标，也没有编辑图标。我使用了一些附加功能，例如自动完成字段（在网格内）和字体大小调整脚本，所以我的脚本有点长。该页面从我的功能页面接收到格式正确的响应，它似乎与我的 jsonReader 设置匹配，但它没有用它填充网格。这是我来自页面的 JSON 格式的回复：

{"page":"1",
"total":1,
"records":"4",
"rows":[{"DetailID":"1","Quantity":"2","TaskName":"Differencial With Housing","UnitPrice":"335.00","ExtendedPrice":"670.00"}, {"DetailID":"2","Quantity":"1","TaskName":"Left axel seal","UnitPrice":"15.00","ExtendedPrice":"15.00"},{"DetailID":"3","Quantity":"1","TaskName":"Upper and Lower Bearings","UnitPrice":"55.00","ExtendedPrice":"55.00"}, {"DetailID":"5","Quantity":"1","TaskName":"Fluids","UnitPrice":"45.00","ExtendedPrice":"45.00"}]}

这是我的网格脚本：

<script>    
    function autocomplete_element(value, options) {
      var $ac = $('<input type="text"/>');
      $ac.val(value);
      $ac.autocomplete({source: "autocomplete.php?method=fnAutocomplete"});
      return $ac;
    } 
    function autocomplete_value(elem, op, value) {
      if (op == "set") {
        $(elem).val(value);
      }
      return $(elem).val();
    }
        $(document).ready(function()
            {
                $('#filter').jqm();
                var selectedRow = 0;                
                $("#list").jqGrid(
                {
                    url:'managegrid.php',
                    datatype: 'json',
                    colNames:['DetailID', 'ProjectID','Qty.','Description','Unit Price','Total Cost'],
                    colModel :[
                        {name:'DetailID', index:'DetailID', hidden:true, editable:false},
                        {name:'ProjectID', index:'ProjectID', width:25, hidden:true, editable:true},
                        {name:'Quantity', index:'Quantity', editable:true, width:50, align:'right', edittype:'text', editoptions: {defaultValue:'1'}},
                        {name:'TaskName', index:'TaskName', editable:true, width:450, align:'left', edittype: 'custom', editoptions: {'custom_element' : autocomplete_element, 'custom_value' : autocomplete_value}},                           
                        {name:'UnitPrice', index:'UnitPrice', editable:true, width:100, align:'right'},
                        {name:'ExtendedPrice', index:'ExtendedPrice', editable:false, width:100, align:'right'}
                    ],
                    onSelectRow: function(id){
                      if(DetailID && DetailID!==mkinline){
                        jQuery('#list').saveRow(mkinline);
                        jQuery('#list').editRow(DetailID,true);
                        mkinline=DetailID;
                      }
                    },
                    pager: $('#pager'),
                    rowNum:20,
                    rowList:[],
                    pgbuttons: false,
                    pgtext: null,
                    sortorder: "asc",
                    sortname: "DetailID",
                    viewrecords: true,
                    imgpath: '/js/jquery/css/start/images',
                    caption: 'Project Details',
                    height:'auto',
                    width:823,
                    mtype:'GET',
                    recordtext:'',
                    pgtext:'',
                    editurl:"editgrid.php",
                    toolbar:[true,"bottom"],
                    loadComplete:function(){
                            var recorddata = $("#list").getUserData();
                            $("#t_list").html(recorddata.MSG);
                        },
                    jsonReader: {
                        page: "PAGE",
                        total: "TOTAL",
                        records:"RECORDS",
                        root: "ROWS",
                        userdata:"USERDATA"
                        }
                    }
                );
                $("#t_list").css("color","blue");
                jQuery("#list").jqGrid("inlineNav",'#pager',{edit:true,editicon: "ui-icon-pencil",add:true,addicon: "ui-icon-plus",search:false}, {}, {},
                {url:"delgridrow.php",closeAfterDelete:true,reloadAftersubmit:false,afterSubmit:commonSubmit,caption:"Delete",msg:"Delete selected",width:"400"})
                .navButtonAdd('#pager',{caption:"",title:"Reload Form",buttonimg:'/js/jquery/css/start/images/refresh.gif',onClickButton:function(id)
                    {
                        resetForm();            
                        $("#list").setGridParam(
                            {
                                url:"managegrid.php",
                                page:1
                            }
                        ).trigger("reloadGrid");
                    }
                });         
            }       
        );
    function gridSearch()
    {
        var pid = $("#DetailID").val();
        var qty = $("#Quantity").val();
        var tn = $("#TaskName").val();
        var up = $("#UnitPrice").val();
        $("#list").setGridParam(
            {
                url:"managegrid.php?ProjectID="+pid+"&Quantity="+qty+"&TaskName="+tn+"&UnitPrice="+up,
                page:1
            }
            ).trigger("reloadGrid");
        $("#filter").jqmHide();
        return false
    }
    function commonSubmit(data,params)
    {
        var a = eval( "(" + data.responseText + ")" );
        $("#t_list").html(a.USERDATA.MSG);
        resetForm();
        return true;
    }   function resetForm()
    {
      window.location.reload(false);
    }
</script>

我整个周末都在努力解决这个问题，这让我发疯了，所以我们将不胜感激。

Answer 1

您应该添加代码行

jQuery("#list").jqGrid("navGrid", '#pager',
    {add: false, edit: false, del: false, search: false, refresh: false});

直接在调用 inlineNav 之前。

已更新：您的代码还有许多其他问题。例如，您应该从代码中删除 jsonReader 选项，因为它包含错误的属性值（例如 root: "ROWS" 而不是 root: "rows"，这是默认的并且可以删除）。可以考虑使用jsonReader: { id: 'DetailID' }，将DetailID的值作为rowid，编辑时使用DetailID代替id。我建议您在使用前定义所有变量（例如，参见 mkinline 和 DetailID）。

JQGrid 空网格，没有导航或编辑图标

JQGrid empty grid and no navigation or edit icons

javascript

jqgrid

jqgrid-php