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 например).