2017-01-30 26 views
0

我在我的应用程序中使用了jqx网格。我想为jqxgrid中的特定列应用过滤条件。我完成了过滤器的编码部分,并在即时事件中添加了过滤器功能。问题是准备好的事件没有被解雇。任何帮助表示赞赏。提前致谢。准备好的事件和过滤条件在JQXGrid中不起作用

function loadGrid(data, ref, undo) { 
     try { 
      var source = 
      { 
       datatype: "json", 
       datafields: 
       [ 
        { name: 'ProductionResource', type: 'string' }, 
        { name: 'ItemStatus', type: 'string' }, 
        { name: 'FutureStatus', type: 'string' }, 
        { name: 'Abc1Code', type: 'string' }, 
        { name: 'ItemNumber', type: 'string' }, 
        { name: 'FirmDemands', type: 'number' }, 
        { name: 'NetForecast', type: 'number' }, 
        { name: 'PromotionalLift', type: 'number' }, 
        { name: 'TotalReceipts', type: 'number' }, 
        { name: 'ItemQuantity', type: 'number' }, 
        { name: 'FirmProduction', type: 'number' }, 
        { name: 'PlannedProduction', type: 'number' }, 
        { name: 'RouterMultipleQuantity', type: 'number' }, 
        { name: 'WeekEnding', type: 'number' }, 
        { name: 'WeightedPriority', type: 'number' }, 
        { name: 'ItemSupplyDays', type: 'number' }, 
        { name: 'ShippableInventory', type: 'number' }, 
        { name: 'SafetyStock', type: 'number' }, 
        { name: 'KeyItem', type: 'string' }, 
        { name: 'DerivedForecastFactor', type: 'number' }, 
        { name: 'ConstraintUsage', type: 'number' }, 
        { name: 'TotalConstraintUsage', type: 'number' }, 
        { name: 'ProductionMinimum', type: 'number' }, 
        { name: 'ItemDescription', type: 'string' }, 
        { name: 'StatusChangeDate', type: 'string' }, 
        { name: 'OrdConstraint', type: 'string' }, 
        { name: 'HoldBuyCode', type: 'string' }, 
        { name: 'MakeBuyCode', type: 'string' }, 
        { name: 'ForecastPlannerId', type: 'string' }, 
        { name: 'DailyForecast', type: 'number' }, 
        { name: 'ShipInvSafetyStock', type: 'number' }, 

        //{ name: 'FriendlyDescription', type: 'string' }, 
        //{ name: 'StatusChangeDate', type: 'string' }, 
        //{ name: 'StatusCode', type: 'string' }, 
        //{ name: 'MULQ', type: 'string' }, 
        { name: 'Inordermultiple', type: 'string' }, 
        { name: 'AdjProdQty', type: 'number' }, 
        { name: 'AdjInOutQty', type: 'number' }, 
        { name: 'NewATP', type: 'number' }, 
        { name: 'UNSW', type: 'string' }, 
        { name: 'UnconstrainedProdPlan', type: 'number' }, 
        { name: 'UnconSI', type: 'number' }, 
        { name: 'InconSISS', type: 'number' }, 
        { name: 'SISSQtypossibleremove', type: 'number' }, 
        { name: 'PossibleAdjQty', type: 'number' }, 
        { name: 'ReasonCode', type: 'string' }, 
        { name: 'ShippableInv', type: 'number' } 
       ], 
       localdata: data 
      }; 
var addfilter = function() { 

    var filtergroup = new $.jqx.filter(); 

    var filter_or_operator = 1; 
    var filtervalue = 'Beate'; 
    var filtercondition = 'contains'; 
    var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); 

    filtervalue = 'Andrew'; 
    filtercondition = 'contains'; 
    var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); 

    filtergroup.addfilter(filter_or_operator, filter1); 
    filtergroup.addfilter(filter_or_operator, filter2); 
    // add the filters. 
    $("#mainData").jqxGrid('addfilter', 'Inordermultiple', filtergroup); 
    // apply the filters. 
    $("#mainData").jqxGrid('applyfilters'); 
} 

      var dataAdapter = new $.jqx.dataAdapter(source); 
      $("#mainData").jqxGrid(
      { 
       width: '99.5%', 
       pageable: false, 
       height: '100%', 
       rowsheight: 30, 
       altrows: true, 
       source: dataAdapter, 
       sortable: false, 


       filterable: true, 
       filtermode: 'excel', 
       columnsresize: true, 
       columnsreorder: true, 
       editable: true, 
       //selectionmode: 'multiplecellsadvanced', 

       autoshowfiltericon: true, 

       ready: function() { 
         addfilter(); 
       }, 
       //autoshowfiltericon: false, 
       columns: [ 
       { text: 'Production Resource', datafield: 'ProductionResource', width: '8.5%', editable: false }, 
       { text: 'Item Status', datafield: 'ItemStatus', width: '8.5%', editable: false }, 
       { text: 'Future Status', datafield: 'FutureStatus', width: '6%', editable: false }, 
       { text: 'ABC 1 (Tiers)', datafield: 'Abc1Code', width: '5%', editable: false }, 
       { text: 'Item #', datafield: 'ItemNumber', width: '8.5%', editable: false }, 
       { text: 'Firm Demands', datafield: 'FirmDemands', width: '6%', editable: false }, 
       { text: 'Net Forecast', datafield: 'NetForecast', width: '6%', editable: false }, 
       { text: 'Promotional Lift Qty', datafield: 'PromotionalLift', width: '8%', editable: false }, 
       { text: 'Total Receipts', datafield: 'TotalReceipts', width: '6.5%', editable: false }, 
       { text: 'MSIORD Refresh', datafield: 'ItemQuantity', width: '8%', editable: false }, 
       { text: 'Firm Prod.', datafield: 'FirmProduction', width: '7%', editable: false }, 
       { text: 'Planned Prod.', datafield: 'PlannedProduction', width: '7.8%', editable: false }, 
       { text: 'Router Multiple Qty', datafield: 'RouterMultipleQuantity', width: '8%', editable: false }, 
       { text: 'ATP (Week Ending)', datafield: 'WeekEnding', width: '6%', cellsformat: 'dd-MMMM-yyyy', editable: false }, 
       { text: 'Weighted Priority', datafield: 'WeightedPriority', width: '7%', editable: false }, 
       { text: 'Days of Supply (Week ending Value)', datafield: 'ItemSupplyDays', width: '7%', editable: false }, 
       { text: 'Shippable Inv Qty', datafield: 'ShippableInventory', width: '8%', editable: false }, 
       { text: 'Safety Stock Qty', datafield: 'SafetyStock', width: '7%', editable: false }, 
       { text: 'Key Item', datafield: 'KeyItem', width: '4.5%', editable: false }, 
       { text: 'Derived Fcst.Factor', datafield: 'DerivedForecastFactor', width: '9%', editable: false }, 
       { text: 'Constraint Usage', datafield: 'ConstraintUsage', width: '7.5%', editable: false }, 
       { text: 'Total Constraint Usage', datafield: 'TotalConstraintUsage', width: '7.5%', editable: false }, 
       { text: 'Minimum Production Order Qty/Production Min', datafield: 'ProductionMinimum', width: '8%', editable: false }, 
       { text: 'Item Description', datafield: 'ItemDescription', width: '5%', editable: false }, 
       { text: 'Status Chg. Date', datafield: 'StatusChangeDate', width: '5%', editable: false }, 
       { text: 'Constraint', datafield: 'OrdConstraint', type: 'string', width: '5%', hidden: true, editable: false }, 
       { text: 'Hold/ Buy', datafield: 'HoldBuyCode', width: '6.5%', editable: false }, 
       { text: 'Make/Buy Code', datafield: 'MakeBuyCode', width: '7%', editable: false }, 
       { text: 'Fcst. Planner', datafield: 'ForecastPlannerId', width: '8%', editable: false }, 
       { text: 'Daily Forecast', datafield: 'DailyForecast', width: '8%', editable: false }, 
       { text: 'Ship Inv – Safety Stock', datafield: 'ShipInvSafetyStock', width: '8%', editable: false }, 

        //{ text: 'Friendly Description', datafield: 'FriendlyDescription', width: '7%' }, 
       //{ text: 'Status ChangeDate', datafield: 'StatusChangeDate', width: '8%' }, 
       //{ text: 'Status Code', datafield: 'StatusCode', width: '4%' }, 
       //{ text: 'MULQ', datafield: 'MULQ', width: '4%' }, 

       //{ text: 'Daily Fcst', datafield: 'DailyFcst', width: '5%' }, 
      { text: 'In order multiple', datafield: 'Inordermultiple', width: '5%', editable: false }, 
      { text: 'Adj Prod Qty', datafield: 'AdjProdQty', width: '5%', editable: true }, 
      { text: 'Adj In/Out Qty', datafield: 'AdjInOutQty', width: '5%', editable: false }, 
      { text: 'New ATP', datafield: 'NewATP', width: '5%', editable: false }, 
      { text: 'UN/SW', datafield: 'UNSW', width: '5%', editable: true }, 
      { text: 'Unconstrained Prod Plan', datafield: 'UnconstrainedProdPlan', width: '5%', editable: false }, 
      { text: 'Uncon SI', datafield: 'UnconSI', width: '5%', editable: false }, 
      { text: 'Uncon SI-SS', datafield: 'InconSISS', width: '5%', editable: false }, 
      { text: 'SI-SS Qty possible remove', datafield: 'SISSQtypossibleremove', width: '5%', editable: false }, 
      { text: 'Possible Adj Qty', datafield: 'PossibleAdjQty', width: '5%', editable: false }, 
      { text: 'Reason Code', datafield: 'ReasonCode', width: '5%', editable: false }, 
      { text: 'New Shippable Inventory', datafield: 'ShippableInv', width: '5%', editable: false }, 
       ], 

      }); 




      $("#popupWindow").jqxWindow({ 
       width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 
      }); 

      $("#popupWindow").on('open', function() { 
       //$("#reasoncode").jqxInput('selectAll'); 
      }); 

      $("#Cancel").jqxButton({ theme: 'energyblue' }); 
      $("#Save").jqxButton({ theme: 'energyblue' }); 

      // update the edited row's cell value when the user clicks the 'Save' button. 
      $("#Save").click(function() { 
       if (editrow >= 0) { 
        var row = { ReasonCode: $("#reasoncode").val() }; 
        var rowID = $('#mainData').jqxGrid('getrowid', editrow); 
        $("#mainData").jqxGrid('setcellvalue', editrow, 'ReasonCode', $("#reasoncode").val()); 
        $("#popupWindow").jqxWindow('hide'); 
       } 
      }); 

      $("#mainData").on("columnclick", function (event) { 
       var column = event.args.datafield; 
       resizeColumn(column); 
      }); 

      $("#mainData").on("cellclick", function (event) { 
       if (event.args.datafield == "ReasonCode") { 
        //open the popup window when the user clicks a button. 
        editrow = event.args.rowindex; 
        var offset = $("#mainData").offset(); 
        //$("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } }); 
        $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 850, y: parseInt(offset.top) + 60 } }); 

        // get the clicked row's data and initialize the input fields. 
        var dataRecord = $("#mainData").jqxGrid('getrowdata', editrow); 
        $("#reasoncode").val(dataRecord.ReasonCode); 

        // show the popup window. 
        $("#popupWindow").jqxWindow('open'); 
       } 
      }); 

      EnableDisableRefUndos(data.length, ref, undo); 
     } catch (e) { 
      alert(e.message); 
     } 
     disableImage(); 
    } 

回答

0

准备被称为只有一次即只要我在你的代码中看到,你以为,因为它是放置在一个函数中它会被称为多次。我的建议是有1个函数创建网格,另一个更新数据源相关的东西,如:$(“#grid”)。jqxGrid({source:newAdapter});何时应该更新数据。将事件绑定到一次而不是多次绑定也很重要。