自定义JQXGrid过滤器

时间:2017-01-31 12:07:16

标签: jquery html asp.net-mvc jqxgrid

FilterImage我在我的应用程序中使用了jqxgrid。我需要为jqxgrid中的特定列自定义过滤器。当我单击网格中的过滤器图标时,它应显示一个文本框以及两个按钮Filter和Clear。当我在该文本框中输入文本并单击fitler按钮时,它应该过滤相关文本并在网格中显示它。当我单击清除按钮时,它应该将网格恢复到以前的状态。

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 editrow = -1;
        // initialize the input fields.
        $("#reasoncode").jqxInput({ theme: 'energyblue' }); $("#reasoncode").width(150);
        $("#reasoncode").height(23);

        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',


           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: '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();
}

1 个答案:

答案 0 :(得分:0)

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filtering-menu-custom-widgets.htm?light

通过使用createfilterpanel,可以实现。请参阅以上网址