0
FilterImage ich verwendet habe in meiner Anwendung jqxgrid. Ich muss den Filter für eine bestimmte Spalte in jqxgrid anpassen. Wenn ich auf das Filtersymbol im Raster klicke, sollte ein Textfeld mit zwei Schaltflächen Filter und Clear angezeigt werden. Wenn ich Text in dieses Textfeld eingib und auf Fitler-Schaltfläche klicke, sollte der zugehörige Text gefiltert und im Raster angezeigt werden. Wenn ich auf die Schaltfläche "Löschen" klicke, sollte das Raster in den vorherigen Zustand zurückkehren.anpassen JQXGrid Filter
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();
}