​x
 
1
​
2
    <div id="grid_search" style="margin: auto;">
3
</div>
4
​

139
 
1
​
2
    $(function () {
3
        function filterhandler(evt, ui) {
4
​
5
            var $toolbar = $grid.find('.pq-toolbar-search'),
6
                $value = $toolbar.find(".filterValue"),
7
                value = $value.val(),
8
                condition = $toolbar.find(".filterCondition").val(),
9
                dataIndx = $toolbar.find(".filterColumn").val(),
10
                filterObject;
11
​
12
            if (dataIndx == "") {//search through all fields when no field selected.
13
                filterObject = [];
14
                var CM = $grid.pqGrid("getColModel");
15
                for (var i = 0, len = CM.length; i < len; i++) {
16
                    var dataIndx = CM[i].dataIndx;
17
                    filterObject.push({ dataIndx: dataIndx, condition: condition, value: value });
18
                }
19
            }
20
            else {//search through selected field.
21
                filterObject = [{ dataIndx: dataIndx, condition: condition, value: value}];
22
            }
23
            $grid.pqGrid("filter", {
24
                oper: 'replace',
25
                data: filterObject
26
            });
27
        }
28
        //filterRender to highlight matching cell text.
29
        function filterRender(ui) {
30
            var val = ui.cellData,
31
                filter = ui.column.filter;
32
            if (filter && filter.on && filter.value) {
33
                var condition = filter.condition,
34
                    valUpper = val.toUpperCase(),
35
                    txt = filter.value,
36
                    txt = (txt == null) ? "" : txt.toString(),
37
                    txtUpper = txt.toUpperCase(),
38
                    indx = -1;
39
                if (condition == "end") {
40
                    indx = valUpper.lastIndexOf(txtUpper);
41
                    //if not at the end
42
                    if (indx + txtUpper.length != valUpper.length) {
43
                        indx = -1;
44
                    }
45
                }
46
                else if (condition == "contain") {
47
                    indx = valUpper.indexOf(txtUpper);
48
                }
49
                else if (condition == "begin") {
50
                    indx = valUpper.indexOf(txtUpper);
51
                    //if not at the beginning.
52
                    if (indx > 0) {
53
                        indx = -1;
54
                    }
55
                }
56
                if (indx >= 0) {
57
                    var txt1 = val.substring(0, indx);
58
                    var txt2 = val.substring(indx, indx + txt.length);
59
                    var txt3 = val.substring(indx + txt.length);
60
                    return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
61
                }
62
                else {
63
                    return val;
64
                }
65
            }
66
            else {
67
                return val;
68
            }
69
        }
70
        var colModel = [
71
            { title: "Customer ID", dataIndx: "customerid", width: 100, render: filterRender },
72
            { title: "Company Name", width: 180, dataIndx: "companyname", render: filterRender },
73
            { title: "Contact Name", width: 140, dataIndx: "contactname", render: filterRender },
74
            { title: "Contact Title", width: 140, dataIndx: "contacttitle", render: filterRender },
75
            { title: "Address", width: "170", dataIndx: "address", render: filterRender }
76
        ];
77
        var dataModel = {
78
            location: 'remote',
79
            url: "/pro/customers/get"
80
        }
81
        var newObj = {
82
            scrollModel: { autoFit: true },
83
            height: 'flex',
84
            pageModel: { type: 'local' },
85
            dataModel: dataModel,
86
            colModel: colModel,            
87
            filterModel: { mode: 'OR' },
88
            editable: false,
89
            showTitle: false,
90
            toolbar: {
91
                cls: "pq-toolbar-search",
92
                items: [                    
93
                    { 
94
                        type: 'textbox', 
95
                        label: 'Filter: ',
96
                        attr: 'placeholder="Enter your keyword"', 
97
                        cls: "filterValue",
98
                        listener: { keyup: filterhandler }
99
                    },
100
                    { 
101
                        type: 'select', cls: "filterColumn",
102
                        listener: filterhandler,
103
                        options: function (ui) {
104
                            var CM = ui.colModel;
105
                            var opts = [{ '': '[ All Fields ]'}];
106
                            for (var i = 0; i < CM.length; i++) {
107
                                var column = CM[i];
108
                                var obj = {};
109
                                obj[column.dataIndx] = column.title;
110
                                opts.push(obj);
111
                            }
112
                            return opts;
113
                        }
114
                    },
115
                    { 
116
                        type: 'select',                         
117
                        cls: "filterCondition",
118
                        listener: filterhandler,
119
                        options: [
120
                            { "begin": "Begins With" },
121
                            { "contain": "Contains" },
122
                            { "end": "Ends With" },
123
                            { "notcontain": "Does not contain" },
124
                            { "equal": "Equal To" },
125
                            { "notequal": "Not Equal To" },
126
                            { "empty": "Empty" },
127
                            { "notempty": "Not Empty" },
128
                            { "less": "Less Than" },
129
                            { "great": "Great Than" },
130
                            { "regexp": "Regex" }
131
                        ]
132
                    }
133
                ]
134
            }
135
        };
136
        var $grid = $("#grid_search").pqGrid(newObj);
137
​
138
    });
139
​