​x
 
1
​
2
    <div id="grid_filter" style="margin:5px auto;"></div>    
3
​

111
 
1
​
2
    $(function () {
3
        //function to change format from dd/mm/yy to mm/dd/yy and vice versa
4
        function changeFormat(value) {
5
            d1 = value ? value.split('/') : null;
6
            return value ? d1[1] + '/' + d1[0] + '/' + d1[2] : "";
7
        }
8
        function pqDatePicker(ui) {
9
            var $this = $(this);
10
            $this
11
                //.css({ zIndex: 3, position: "relative" })
12
                .datepicker({
13
                    yearRange: "-25:+0", //25 years prior to present.
14
                    changeYear: true,
15
                    changeMonth: true,
16
                    dateFormat: "dd/mm/yy"
17
                    //showButtonPanel: true
18
                });
19
            //default From date
20
            var $from = $this.filter(".pq-from").datepicker("option", "defaultDate", new Date("01/01/1996"));
21
            //default To date
22
            var $to = $this.filter(".pq-to").datepicker("option", "defaultDate", new Date("12/31/1998"));
23
​
24
            var value = changeFormat(ui.column.filter.value),
25
                value2 = changeFormat(ui.column.filter.value2);
26
​
27
            $from.val(value);
28
            $to.val(value2);
29
        }
30
​
31
        //define colModel
32
        var colM = [
33
            { title: "ShipCountry", dataIndx: "ShipCountry",
34
                filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
35
            },
36
            { title: "Customer Name", dataIndx: "ContactName",
37
                filter: { type: "textbox", condition: 'begin', listeners: ['keyup'] }
38
            },
39
            { title: "Order ID", minWidth: 130, dataIndx: "OrderID", dataType: "integer",
40
                filter: { type: 'textbox', condition: "between", listeners: ['keyup'] }
41
            },
42
            { title: "Order Date", minWidth: "200", dataIndx: "OrderDate", dataType: "date",
43
                render: function (ui) {
44
                    return changeFormat(ui.cellData);
45
                },
46
                filter: {
47
                    type: 'textbox',
48
                    condition: "between",
49
                    init: pqDatePicker,
50
                    listeners: [{ 'change': function (evt, ui) {
51
​
52
                        ui.value = changeFormat(ui.value); //dd/mm to mm/dd
53
                        ui.value2 = changeFormat(ui.value2); //dd/mm to mm/dd
54
​
55
                        $(this).closest(".pq-grid").pqGrid('filter', {
56
                            oper: "add",
57
                            data: [ui]
58
                        })
59
                    }
60
                    }]
61
                }
62
            },
63
            { title: "Shipping Region", dataIndx: "ShipRegion" },
64
            { title: "Paid", dataIndx: "paid", dataType: "bool", align: "center",
65
                filter: { type: "checkbox", subtype: 'triple', condition: "equal", listeners: ['click'] }
66
            },
67
            { title: "Shipping Via", dataIndx: "ShipVia" },
68
            { title: "Required Date", dataIndx: "RequiredDate", dataType: "date" },
69
            { title: "Shipped Date", dataIndx: "ShippedDate", dataType: "date" },
70
            { title: "Freight", align: "right", dataIndx: "Freight", dataType: "float" },
71
            { title: "Shipping Name", dataIndx: "ShipName" },
72
            { title: "Shipping Address", dataIndx: "ShipAddress" },
73
            { title: "Shipping City", dataIndx: "ShipCity" },
74
            { title: "Shipping Postal Code", dataIndx: "ShipPostalCode" }
75
        ];
76
​
77
        var obj = {
78
            height: 500,            
79
            colModel: colM,            
80
            //pageModel: { type: "local", rPP: 50, rPPOptions: [10, 50, 100, 500, 1000] },
81
            virtualX: true, virtualY: true,
82
            wrap: false, hwrap: false,            
83
            filterModel: { on: true, mode: "AND", header: true },
84
            title: "Shipping Orders",
85
            resizable: true,            
86
            columnTemplate: { width: 150 },            
87
            freezeCols: 2
88
        };
89
​
90
        var $grid = $("#grid_filter").pqGrid(obj);
91
​
92
        //load all data at once
93
        $grid.pqGrid("showLoading");
94
        $.ajax({ url: "/Content/orders.json",
95
            //url: "/pro/orders/get",//for ASP.NET
96
            //url: "/orders.php", //for PHP
97
            cache: false,
98
            async: true,
99
            dataType: "JSON",
100
            success: function (response) {
101
                var grid = $grid.pqGrid("getInstance").grid;
102
                grid.option("dataModel.data", response.data);
103
​
104
                grid.refreshDataAndView();
105
                grid.flex();
106
                grid.hideLoading();
107
            }
108
        });
109
​
110
    });
111
​