таблица не показывает, как ожидалось

Question

Я хочу, чтобы создать таблицу, как inline navigator jqgrid demo.

Образ должен добавить новую функцию строки. См. Изображение со страницы.

Однако то, что я получил это:

Там нет функции редактирования. Мой сценарий:

<script src="~/assets/js/jqGrid/i18n/grid.locale-en.js"></script> 
<script src="~/assets/js/jqGrid/jquery.jqGrid.src.js"></script> 

<script type="text/javascript"> 
    var jqgrid_data = [ 
     { 
      company: "Test 1", 
      contact: "", 
      phone: "", 
      username: "Note 1", 
      userkey: "", 
      active: "1", 
      facility: "15.00", 
      client: "210.00" 
     }, { 
      company: "Test 2", 
      contact: "", 
      phone: "", 
      username: "Note 2", 
      userkey: "", 
      active: "1", 
      facility: "22.00", 
      client: "320.00" 
     }, { 
      company: "Test 3", 
      contact: "", 
      phone: "", 
      username: "Note 3", 
      userkey: "", 
      active:"1", 
      facility: "4.00", 
      client: "430.00" 
     }, { 
      company: "Test 4", 
      contact: "", 
      phone: "", 
      username: "Note 4", 
      userkey: "", 
      active: "1", 
      facility: "51.00", 
      client: "210.00" 
     }, { 
      company: "Test 5", 
      contact: "", 
      phone: "", 
      username: "Note 5", 
      userkey: "", 
      active: "1", 
      facility: "21.00", 
      client: "320.00" 
     }, { 
      company: "Test 6", 
      contact: "", 
      phone: "", 
      username: "Note 6", 
      userkey: "", 
      active: "1", 
      facility: "7.00", 
      client: "430.00" 
     }, { 
      company: "Test 7", 
      contact: "", 
      phone: "", 
      username: "Note 7", 
      userkey: "", 
      active: "1", 
      facility: "10.00", 
      client: "210.00" 
     }, { 
      company: "Test 8", 
      contact: "", 
      phone: "", 
      username: "Note 8", 
      userkey: "", 
      active: "1", 
      facility: "10.00", 
      client: "320.00" 
     }, { 
      company: "Test 9", 
      contact: "", 
      phone: "", 
      username: "Note 9", 
      userkey: "", 
      active:"1", 
      facility: "10.00", 
      client: "430.00" 
     }, { 
      company: "Test 10", 
      contact: "", 
      phone: "", 
      username: "Note 10", 
      userkey: "", 
      active: "1", 
      facility: "20.00", 
      client: "210.00" 
     }, { 
      company: "Test 11", 
      contact: "", 
      phone: "", 
      username: "Note 11", 
      userkey: "", 
      active: "1", 
      facility: "9.00", 
      client: "320.00" 
     }, { 
      company: "Test 12", 
      contact: "", 
      phone: "", 
      username: "Note 12", 
      userkey: "", 
      active: "1", 
      facility: "8.00", 
      client: "430.00" 
     }, { 
      company: "Test 13", 
      contact: "", 
      phone: "", 
      username: "Note 13", 
      userkey: "", 
      active: "1", 
      facility: "10.00", 
      client: "210.00" 
     }, { 
      company: "Test 14", 
      contact: "", 
      phone: "", 
      username: "Note 14", 
      userkey: "", 
      active: "1", 
      facility: "2.00", 
      client: "320.00" 
     }, { 
      company: "Test 15", 
      contact: "", 
      phone: "", 
      username: "Note 15", 
      userkey: "", 
      active: "1", 
      facility: "3.00", 
      client: "430.00" 
     }, { 
      company: "Test 16", 
      contact: "", 
      phone: "", 
      username: "Note 16", 
      userkey: "", 
      active: "1", 
      facility: "1.00", 
      client: "210.00" 
     }, { 
      company: "Test 17", 
      contact: "", 
      phone: "", 
      username: "Note 17", 
      userkey: "", 
      active: "1", 
      facility: "2.00", 
      client: "320.00" 
     }, { 
      company: "Test 18", 
      contact: "", 
      phone: "", 
      username: "Note 18", 
      userkey: "", 
      active: "1", 
      facility: "3.00", 
      client: "430.00" 
     } 
    ]; 
</script> 
<script> 
    $(document).ready(
     function() { 
      jQuery("#jqgrid").jqGrid({ 
       url: API_URL, 
       mtype: 'GET', 
       data: jqgrid_data, 
       datatype: "local", 
       height: '350', 
       colNames: ['Actions', 'Company', 'ContactName','ContactPhone','UserName','UserKey','Active', 'Facility', 'Client'], 
       colModel: [ 
        { name: 'act', index: 'act', width: 100, sortable: false }, 
        { name: 'company', index: 'company', width: 100, editable: true }, 
        { name: 'contact', index: 'contact', width: 110, editable: true }, 
        { name: 'phone', index: 'phone', width: 120, editable: true }, 
        { name: 'username', index: 'username', align: "right", width: 90, editable: true }, 
        { name: 'userkey', index: 'userkey', align: "right", width: 90, editable: true }, 
        { name: 'active', index: 'active', align: "right", width: 100, editable: true,edittype: "checkbox", editoptions: { value: "True:False" } }, 
        { name: 'facility', index: 'facility', align: "right", width: 100, editable: true }, 
        { name: 'client', index: 'client', align: "right", width: 100, editable: true } 
       ], 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       pager: '#pager_jqgrid', 
       sortname: 'company', 
       toolbarfilter: true, 
       viewrecords: true, 
       sortorder: "asc", 


       editUrl: API_URL, 
       caption: "Vendor Managerment", 

      }); 
     }); 
    jQuery("#pager_jqgrid").jqGrid('navGrid', "#ppager_jqgrid", { edit: false, add: true, del: false }); 
    jQuery("#pager_jqgrid").jqGrid('inlineNav', "#pager_jqgrid"); 
    $(window).triggerHandler('resize.jqGrid'); 

И HTML часть проста,

<table id="jqgrid"></table> 
<div id="pager_jqgrid"></div> 

И когда я осмотрел его, он показывает.

Так что случилось?

Answer 1

Причина вашей проблемы: вы делаете звонки

jQuery("#pager_jqgrid").jqGrid('navGrid', "#ppager_jqgrid", { edit: false, add: true, del: false }); 
jQuery("#pager_jqgrid").jqGrid('inlineNav', "#pager_jqgrid"); 

вне из $(document).ready(function() {/*must be here*/});. Методы navGrid и inlineNav потерпели неудачу, это будет называться до сетка создана.

Еще одна важная проблема существует в ваших данных. Входные данные должны иметь уникальныйid в каждой строке. Только после добавления id вы будете редактировать данные.

Фиксированный код может выглядеть на демо https://jsfiddle.net/OlegKi/j3x8152m/1/. Я использовал free jqGrid вилку jqGrid, вилку, которую я разрабатываю с одного года. Он имеет некоторые улучшения, описанные в the wiki, и readmes для каждой опубликованной версии. Вы также можете прочитать дополнительно the introduction в использовании jqGrid. Документация будет продолжена в следующий раз.