Функция редактирования не работает в моем jqgrid

Question

Я использую jqgrid, я хочу редактировать (добавлять, редактировать и удалять) данные. Однако, когда любой из них не работает. Я нажимаю кнопку «Добавить», «Редактировать» или «Удалить», «Нет ответа».

<script> 
    $(document).ready(function() { 
     jQuery("#jqgrid").jqGrid({ 
      url: API_URL, 
      datatype: 'json', 
      mtype: 'GET', 
      height: 'auto', 
      colNames: ['', 'Company', 'ContactName', 'ContactPhone', 'UserName', 'UserKey', 'Active', 'FacilityId', 'ClientId', 'PhotoURL', 'PushToGP'], 
      colModel: [ 
       { name: 'act', template: "actions", width: 80 }, 
       { name: 'company', width: 120 }, 
       { name: 'contact', width: 110 }, 
       { name: 'phone', width: 120 }, 
       { name: 'username', align: "right", width: 90 }, 
       { name: 'userkey', align: "right", width: 120 }, 
       { name: 'active', width: 50, template: "booleanCheckboxFa" }, 
       { name: 'facility', align: "right", width: 100 }, 
       { name: 'client', align: "right", width: 100 }, 
       { name: 'photo', align: "right", width: 80 }, 
       { name: 'pushtogp', align: "right", width: 80 } 
      ], 
      cmTemplate: { autoResizable: true, editable: true }, 
      iconSet: "fontAwesome", 
      rowNum: 10, 
      rowList: [10, 20, "10000:All"], 
      pager: pagerSelector, 
      sortname: 'company', 
      viewrecords: true, 
      caption: "Vendor Managerment" 
     }); 

    $("#jqgrid").jqGrid('navGrid', pagerSelector, 
      { 
       //navbar options 
       edit: true, 
       editicon: 'ace-icon fa fa-pencil blue', 
       add: true, 
       addicon: 'ace-icon fa fa-plus-circle purple', 
       del: true, 
       delicon: 'ace-icon fa fa-trash-o red', 
       search: true, 
       searchicon: 'ace-icon fa fa-search orange', 
       refresh: true, 
       refreshicon: 'ace-icon fa fa-refresh green', 
       view: true, 
       viewicon: 'ace-icon fa fa-search-plus grey' 
      }, 
      { 
       //edit record form 
       //closeAfterEdit: true, 
       //width: 700, 
       recreateForm: true, 
       mtype: 'PUT', 
       onclickSubmit: function (params, postdata) { 
        params.url = API_URL; 
       }, 
       beforeShowForm: function (e) { 
        var form = $(e[0]); 
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />'); 
        styleEditForm(form); 
       } 
      }, 
      { 
       //new record form 
       //width: 700, 
       closeAfterAdd: true, 
       recreateForm: true, 
       viewPagerButtons: false, 
       mtype: 'POST', 
       onclickSubmit: function (params, postdata) { 
        params.url = API_URL; 
       }, 
       beforeShowForm: function (e) { 
        var form = $(e[0]); 
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar') 
         .wrapInner('<div class="widget-header" />'); 
        styleEditForm(form); 
       } 
      }, 
      { 
       //delete record form 
       recreateForm: true, 
       mtype: 'DELETE', 
       onclickSubmit: function (params, postdata) { 
        params.url = API_URL; 
       }, 
       beforeShowForm: function (e) { 
        var form = $(e[0]); 
        if (form.data('styled')) return false; 

        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />'); 
        styleDeleteForm(form); 

        form.data('styled', true); 
       } 
      }, 
      { 
       //search form 
       recreateForm: true, 
       afterShowSearch: function (e) { 
        var form = $(e[0]); 
        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />'); 
        styleSearchForm(form); 
       }, 
       afterRedraw: function() { 
        styleSearchFilters($(this)); 
       }, 
       multipleSearch: true, 
       /** 
            multipleGroup:true, 
            showQuery: true 
            */ 
      }, 
      { 
       //view record form 
       recreateForm: true, 
       beforeShowForm: function (e) { 
        var form = $(e[0]); 
        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />'); 
       } 
      } 
     ); 
    jQuery("#jqgrid").jqGrid('inlineNav', pagerSelector); 

    }); 
</script> 

ОБНОВЛЕНО: Он работает, но встроенный плюс кнопка не отображается. См. Изображение. Я нахожусь над этой позицией, на которой отображается «Добавить новую строку», но нет значка.

Answer 1

Проблема заключается в отсутствии определения следующих функций.

styleEditForm(form) 
styleDeleteForm(form) 
styleSearchForm(form) 
styleSearchFilters($(this)) 

Вы должны добавить определение этих функций или удалить их.