jqGrid ondblClickRow 이벤트에서 내비게이션 막대 저장 아이콘

Question

ondblClickRow 이벤트에서 jqGrid 행 편집을 설정했습니다. 행을 두 번 클릭하면 내비게이션 막대에 아이콘을 저장하고 싶습니다. 어떻게해야합니까?

ondblClickRow: function (rowid) { 

     jQuery(this).jqGrid('editRow', rowid, true, null, null); 
    }, 

감사

jQuery를 (문서) .ready (함수 ($) {

grid = $("#SupplementsGrid"); 
getColumnIndexByName = function (grid, columnName) { 
    var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length; 
    for (; i < l; i += 1) { 
     if (cm[i].name === columnName) { 
      return i; // return the index 
     } 
    } 
    return -1; 
}; 

var DataEditUrl = baseSiteURL + 'HotelSupplements/Edit'; 
var DataAddUrl = baseSiteURL + 'HotelSupplements/Create'; 
var lastSel; 
grid.jqGrid({ 
    url: gridDataUrl, 
    editurl: DataEditUrl, 
    mtype: 'POST', 
    datatype: 'local', 
    colNames: ['StartDate', 'EndDate', 'Man', 'RoomType', 'SuppType', 'Supplement', 'BuyRate', 'Val', 'ChargeBy', 'ChargeOn', 'Status', 'DaysOfTheWeek', 'HotelSupplementID'], 
    colModel: [ 
     { 
      name: 'StartDate', index: 'StartDate', 
      resizable: true, formatter: 'date', editoptions: { dataInit: function (elem) { $(elem).datepicker({ minDate: 0 }); } }, editable: true, formatoptions: { newformat: 'm/d/Y' }, width: 125, align: 'left', 
      editrules: { custom: true, custom_func: function (value, colname) { return validateTwoDates('StartDate', 'EndDate', grid.jqGrid('getGridParam', 'selrow')) } } 
     }, 
       { name: 'EndDate', index: 'EndDate', formatter: 'date', editoptions: { dataInit: function (elem) { $(elem).datepicker({ minDate: 0 }); } }, editable: true, formatoptions: { newformat: 'm/d/Y' }, width: 100, align: 'left' }, 
       { name: 'Mandatory', index: 'Mandatory', editable: true, width: 45, align: 'center', edittype: "checkbox", editoptions: { value: "true:false" } }, 
       { 
        name: 'RoomTypes', index: 'RoomTypes', width: 300, editable: true, edittype: 'select', 
        editoptions: { 
         value: roomTypesFormatterEdit, 
         custom_element: function (value, options) { 
          return $.jgrid.createEl.call(this, "select", 
           $.extend(true, {}, options, { custom_element: null, custom_value: null }), 
           value); 
         }, 
         custom_value: function ($elem, operation, value) { 
          if (operation === "get") { 
           return $elem.val(); 
          } 
         }, 
         multiple: true 
        }, 
        align: 'left', formatter: roomTypesFormatter 
       }, 
       { 
        name: 'SupplementTypeID', index: 'SupplementTypeID', width: 115, align: 'left', formatter: supplementTypesFormatter, editable: true, edittype: 'select', 

        editoptions: { 
         value: supplementTypesFormatterEdit, 
         dataEvents: [ 
        { 
         type: 'change', // keydown 
         fn: function (e) { 
          suppTId = $("#" + this.id).val(); 
          myValue = ''; 
          filterSupplementsByTypeID(suppTId); 
          //grid.jqGrid('setColProp', 'SupplementID', { editoptions: { value: supplementsFormatterEdit} });     
          var row = $(e.target).closest('tr.jqgrow'); 
          var rowId = row.attr('id'); 
          for (k = 0; k < filteredSupplements.length; k++) { 
           myValue += '<option value=' + filteredSupplements[k].SupplementID + '>' + filteredSupplements[k].Name + '</option>'; 
          } 
          $("select#" + rowId + "_SupplementID", row[0]).html(myValue); 
         } 
        } 
         ] 
        } 
       }, 
       { 
        name: 'SupplementID', index: 'SupplementID', width: 120, align: 'left', formatter: supplementsFormatter, editable: true, edittype: 'select', 

        editoptions: { 
         value: supplementsFormatterEdit 
        } 
       }, 
       { name: 'BuyRate', index: 'BuyRate', editable: true, width: 90, align: 'left', sorttype: 'int', editrules: { custom: true, custom_func: validNum } }, 
       { 
        name: 'ChargeValueTypeID', index: 'ChargeValueTypeID', width: 70, align: 'left', formatter: ChargeValueTypesFormatter, editable: true, edittype: 'select', 

        editoptions: { 
         value: chargeValueTypesFormatterEdit 
        } 
       }, 
       { 
        name: 'ChargeByTypeID', index: 'ChargeByTypeID', width: 100, align: 'left', formatter: ChargeByTypesFormatter, editable: true, edittype: 'select', 

        editoptions: { 
         value: chargeByTypesFormatterEdit 
        } 
       }, 
       { 
        name: 'ChargeOnTypeID', index: 'ChargeOnTypeID', width: 100, align: 'left', formatter: ChargeOnTypesFormatter, editable: true, edittype: 'select', 

        editoptions: { 
         value: chargeOnTypesFormatterEdit 
        } 
       }, 
       { name: 'Active', index: 'Active', width: 60, align: 'left', editable: true, edittype: "checkbox", editoptions: { value: "true:false" } }, 
       { 
        name: 'DaysOfTheWeek', index: 'DaysOfTheWeek', width: 250, align: 'left', editable: true, edittype: 'select', formatter: function (cellvalue, options, rowObject) { 
         output = ''; 
         if (rowObject.MonValid) { 
          output += 'Monday,'; 
         } if (rowObject.TueValid) { 
          output += 'Tuesday,'; 
         } if (rowObject.WedValid) { 
          output += 'Wednesday,'; 
         } if (rowObject.ThuValid) { 
          output += 'Thursday,'; 
         } if (rowObject.FriValid) { 
          output += 'Friday,'; 
         } if (rowObject.SatValid) { 
          output += 'Saturday,'; 
         } if (rowObject.SunValid) { 
          output += 'Sunday,'; 
         } 
         output = output.substring(0, output.length - 1); 
         if (output != '') { 
          return output; 
         } else { 
          return cellvalue; 
         } 

        }, editoptions: { 
         value: 'Monday:Monday;Tuesday:Tuesday;Wednesday:Wednesday;Thursday:Thursday;Friday:Friday;Saturday:Saturday;Sunday:Sunday', 
         custom_element: function (value, options) { 
          return $.jgrid.createEl.call(this, "select", 
           $.extend(true, {}, options, { custom_element: null, custom_value: null }), 
           value); 
         }, 
         custom_value: function ($elem, operation, value) { 
          if (operation === "get") { 
           return $elem.val(); 
          } 
         }, 
         multiple: true 
        } 
       }, 
    { 
     name: 'HotelSupplementID', 
     index: 'HotelSupplementID', 
     width: 25, editable: true, 
     editrules: { 
      //required: true, 
      edithidden: true 
     }, hidden: true, 
     editoptions: { 
      dataInit: function (element) { 
       //jq(element).attr("readonly", "readonly"); 
      } 
     } 
    } 
    ], 
    jsonReader: { 
     root: 'Rows', 
     page: 'Page', 
     total: 'Total', 
     records: 'Records', 
     repeatitems: false, 
     id: "12", 
    }, 
    subGrid: true, 
    subGridRowExpanded: function (subgrid_id, row_id) { 

     var subgrid_table_id; 
     subgrid_table_id = subgrid_id + "_t"; 

     jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>"); 
     jQuery("#" + subgrid_table_id).jqGrid({ 
      url: supplementChildRateurl + '?id=' + row_id, 
      datatype: "json", 
      colNames: ['MinAge', 'MaxAge', 'BuyRate', ], 
      colModel: [ 
       { name: "MinAge", index: "MinAge", width: 130 }, 
       { name: "MaxAge", index: "MaxAge", width: 130 }, 
       { name: "BuyRate", index: "BuyRate", width: 130 } 
      ], 
      height: '100%', 
      rowNum: 20, 
     }); 
    }, 
    ondblClickRow: function (rowid) { 
     jQuery(this).jqGrid('editRow', rowid, true, null, null); 
    }, 
    onSelectRow: function (id) { 
     if (id && id !== lastSel) { 
      jQuery(this).restoreRow(lastSel); 
      lastSel = id; 
     } 
    }, 
    resizeStop: function (newwidth, index) { 
     jQuery(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first') 
     .jqGrid('setGridWidth', newwidth); 
    }, 
    paging: true, 
    loadonce: true, 
    loadComplete: function (data) { 
     var iCol = getColumnIndexByName(grid, 'act'); 
     jQuery("#SupplementsGrid").children("tbody") 
     .children("tr.jqgrow") 
     .children("td:nth-child(" + (iCol + 1) + ")") 
     .each(function() { 
      $("<div>", 
      { 
       title: "Custom", 
       mouseover: function() { 
        $(this).addClass('ui-state-hover'); 
       }, 
       mouseout: function() { 
        $(this).removeClass('ui-state-hover'); 
       }, 
       click: function (e) { 

       } 
      } 
     ).css({ "margin-left": "5px", float: "left" }) 
     .addClass("ui-pg-div ui-inline-custom") 
     .append('<span class="ui-icon ui-icon-document"></span>') 
     .appendTo($(this).children("div")); 
     }); 

     jQuery("#SupplementsGrid").trigger("reloadGrid"); 
     jQuery("#SuccessMsg").html(""); 



     //$("#SupplementsGrid").jqGrid('setGridParam',{datatype:'local'}); 
     var rowIds = $("#SupplementsGrid").jqGrid('getDataIDs'); 
     $.each(rowIds, function (i, row) { 

      var rowData = $("#SupplementsGrid").getRowData(row); 
      if (rowData.InputType == 'select') { 


      } 
     }); 
    }, 
    gridview: true, 
    rowNum: 20, 
    rowList: [5, 10, 20, 50, 100], 
    pager: jQuery('#pager'), 
    emptyrecords: "Nothing to display", 
    sortable: true, 
    sortname: 'StartDate', 
    sortorder: "desc", 
    viewrecords: true, 
    height: 'auto', 
    width: 1068, 
    caption: "Supplements", 
}); 
$('#SupplementsGrid').jqGrid('navGrid', '#pager', 
     { 
      edit: false, 
      add: false, 
      del: false, 
      search: false 
     }, 
     //edit options 
{ url: DataEditUrl }, 
//add options 
{ url: DataAddUrl }, 
//delete options 
{ url: '/home1/DeleteUserData' } 
    ); 
    parameters = { 
     edit: true, 
     editicon: "ui-icon-pencil", 
     add: true, 
     addicon: "ui-icon-plus", 
     save: true, 
     saveicon: "ui-icon-disk", 
     cancel: true, 
     cancelicon: "ui-icon-cancel", 
     editParams: { 
      keys: false, 
      oneditfunc: null, 
      successfunc: function (val) { 
       if (val.responseText != "") { 
        // alert(val.responseText); 
        $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); 
       } 
      }, 
      url: null, 
      extraparam: { 
       EmpId: function() { 
        var sel_id = $('#SupplementsGrid').jqGrid('getGridParam', 'selrow'); 
        var value = $('#SupplementsGrid').jqGrid('getCell', sel_id, '_id'); 
        return value; 
       } 
      }, 
      aftersavefunc: null, 
      errorfunc: null, 
      afterrestorefunc: null, 
      restoreAfterError: true, 
      mtype: "POST" 
     }, 
     addParams: { 
      useDefValues: true, 
      addRowParams: { 
       keys: true, 
       extraparam: {}, 
       // oneditfunc: function() { alert(); }, 
       successfunc: function (val) { 
        if (val.responseText != "") { 
         //alert(val.responseText); 
         $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); 
        } 
       } 
      } 
     } 
    } 
    jQuery("#SupplementsGrid").jqGrid('inlineNav', '#pager', parameters); 

}를) 도와주세요;

Answer 1

구현 세부 정보를 게시하지 않았지만 inlineNav 메서드를 사용한다고 가정 할 수 있습니다. inlineNav은 모든 네비게이터 아이콘의 속성이 id 인 간단한 규칙을 사용합니다. 모든 인라인 편집 버튼의 ID는 그리드의 ID와 접미사 "_iladd", "_iledit", "_ilsave", "_ilcancel"을 기반으로 설정됩니다. 예를 들어 그리드가 id="list"이면 Save 버튼의 id는 "list_ilsave"이됩니다. 필요한 경우 ID로 주소를 지정하여 모든 버튼을 비활성화 할 수 있습니다 (예 : $("#list_ilsave").removeClass('ui-state-disabled'); - 저장 버튼을 사용하고 $("#list_ilsave").addClass('ui-state-disabled'); - 비활성화). aftersavefunc 및 afterrestorefunc 옵션을 editRow으로 사용하여 변경 내용을 저장하거나 삭제 한 후 탐색기 단추의 상태를 변경할 수 있습니다. 같은 방법으로 jQuery.click을 사용하여 아무 버튼이나 클릭을 시뮬레이션 할 수 있습니다. 예를 들어 $("#list_ilsave").click();은 저장 버튼을 클릭하는 것과 같습니다.