/third_party/jqgrid/plugins/jquery.searchFilter.js

https://bitbucket.org/Prvnpn216/inclusionsurvey · JavaScript · 716 lines · 357 code · 58 blank · 301 comment · 99 complexity · ccdc75752a7da82a07f54208d0b675c3 MD5 · raw file 

    

  1. /* Plugin:      searchFilter v1.2.9

    2. 

  2.  * Author:      Kasey Speakman (kasey@cornerspeed.com)

    3. 

  3.  * License:     Dual Licensed, MIT and GPL v2 (http://www.gnu.org/licenses/gpl-2.0.html)

    4. 

  4.  *

    5. 

  5.  * REQUIREMENTS:

    6. 

  6.  *    jQuery 1.3+           (http://jquery.com/)

    7. 

  7.  *    A Themeroller Theme   (http://jqueryui.com/themeroller/)

    8. 

  8.  *

    9. 

  9.  * SECURITY WARNING

    10. 

  10.  *    You should always implement server-side checking to ensure that

    11. 

  11.  *    the query will fail when forged/invalid data is received.

    12. 

  12.  *    Clever users can send any value they want through JavaScript and HTTP POST/GET.

    13. 

  13.  *

    14. 

  14.  * THEMES

    15. 

  15.  *    Simply include the CSS file for your Themeroller theme.

    16. 

  16.  *

    17. 

  17.  * DESCRIPTION

    18. 

  18.  *     This plugin creates a new searchFilter object in the specified container

    19. 

  19.  *

    20. 

  20.  * INPUT TYPE

    21. 

  21.  *     fields:  an array of field objects. each object has the following properties:

    22. 

  22.  *              text: a string containing the display name of the field (e.g. "Field 1")

    23. 

  23.  *              itemval: a string containing the actual field name (e.g. "field1")

    24. 

  24.  *              optional properties:

    25. 

  25.  *                  ops: an array of operators in the same format as jQuery.fn.searchFilter.defaults.operators

    26. 

  26.  *                       that is: [ { op: 'gt', text: 'greater than'}, { op:'lt', text: 'less than'}, ... ]

    27. 

  27.  *                       if not specified, the passed-in options used, and failting that, jQuery.fn.searchFilter.defaults.operators will be used

    28. 

  28.  *                  *** NOTE ***

    29. 

  29.  *                  Specifying a dataUrl or dataValues property means that a <select ...> (drop-down-list) will be generated

    30. 

  30.  *                  instead of a text input <input type='text'.../> where the user would normally type in their search data

    31. 

  31.  *                  ************

    32. 

  32.  *                  dataUrl: a url that will return the html select for this field, this url will only be called once for this field

    33. 

  33.  *                  dataValues: the possible values for this field in the form [ { text: 'Data Display Text', value: 'data_actual_value' }, { ... } ]

    34. 

  34.  *                  dataInit: a function that you can use to initialize the data field. this function is passed the jQuery-fied data element

    35. 

  35.  *                  dataEvents: list of events to apply to the data element. uses $("#id").bind(type, [data], fn) to bind events to data element

    36. 

  36.  *              *** JSON of this object could look like this: ***

    37. 

  37.  *               var fields = [

    38. 

  38.  *                 {

    39. 

  39.  *                   text: 'Field Display Name',

    40. 

  40.  *                   itemval: 'field_actual_name',

    41. 

  41.  *                   // below this are optional values

    42. 

  42.  *                   ops: [ // this format is the same as jQuery.fn.searchFilter.defaults.operators

    43. 

  43.  *                     { op: 'gt', text: 'greater than' },

    44. 

  44.  *                     { op: 'lt', text: 'less than' }

    45. 

  45.  *                   ],

    46. 

  46.  *                   dataUrl: 'http://server/path/script.php?propName=propValue', // using this creates a select for the data input instead of an input type='text'

    47. 

  47.  *                   dataValues: [ // using this creates a select for the data input instead of an input type='text'

    48. 

  48.  *                     { text: 'Data Value Display Name', value: 'data_actual_value' },

    49. 

  49.  *                     { ... }

    50. 

  50.  *                   ],

    51. 

  51.  *                   dataInit: function(jElem) { jElem.datepicker(options); },

    52. 

  52.  *                   dataEvents: [ // these are the same options that you pass to $("#id").bind(type, [data], fn)

    53. 

  53.  *                     { type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); } },

    54. 

  54.  *                     { type: 'keypress', fn: function(e) { console.log('keypress'); } }

    55. 

  55.  *                   ]

    56. 

  56.  *                 },

    57. 

  57.  *                 { ... }

    58. 

  58.  *               ]

    59. 

  59.  *     options: name:value properties containing various creation options

    60. 

  60.  *              see jQuery.fn.searchFilter.defaults for the overridable options

    61. 

  61.  *

    62. 

  62.  * RETURN TYPE: This plugin returns a SearchFilter object, which has additional SearchFilter methods:

    63. 

  63.  *     Methods

    64. 

  64.  *         add:    Adds a filter. added to the end of the list unless a jQuery event object or valid row number is passed.

    65. 

  65.  *         del:    Removes a filter. removed from the end of the list unless a jQuery event object or valid row number is passed.

    66. 

  66.  *         reset:  resets filters back to original state (only one blank filter), and calls onReset

    67. 

  67.  *         search: puts the search rules into an object and calls onSearch with it

    68. 

  68.  *         close:  calls the onClose event handler

    69. 

  69.  *

    70. 

  70.  * USAGE

    71. 

  71.  *     HTML

    72. 

  72.  *         <head>

    73. 

  73.  *             ...

    74. 

  74.  *             <script src="path/to/jquery.min.js" type="text/javascript"></script>

    75. 

  75.  *             <link href="path/to/themeroller.css" rel="Stylesheet" type="text/css" />

    76. 

  76.  *             <script src="path/to/jquery.searchFilter.js" type="text/javascript"></script>

    77. 

  77.  *             <link href="path/to/jquery.searchFilter.css" rel="Stylesheet" type="text/css" />

    78. 

  78.  *             ...

    79. 

  79.  *         </head>

    80. 

  80.  *         <body>

    81. 

  81.  *             ...

    82. 

  82.  *             <div id='mySearch'></div>

    83. 

  83.  *             ...

    84. 

  84.  *         </body>

    85. 

  85.  *     JQUERY

    86. 

  86.  *         Methods

    87. 

  87.  *             initializing: $("#mySearch").searchFilter([{text: "Field 1", value: "field1"},{text: "Field 2", value: "field2"}], {onSearch: myFilterRuleReceiverFn, onReset: myFilterResetFn });

    88. 

  88.  *         Manual Methods (there's no need to call these methods unless you are trying to manipulate searchFilter with script)

    89. 

  89.  *             add:          $("#mySearch").searchFilter().add();     // appends a blank filter

    90. 

  90.  *                           $("#mySearch").searchFilter().add(0);    // copies the first filter as second

    91. 

  91.  *             del:          $("#mySearch").searchFilter().del();     // removes the bottom filter

    92. 

  92.  *                           $("#mySearch").searchFilter().del(1);    // removes the second filter

    93. 

  93.  *             search:       $("#mySearch").searchFilter().search();  // invokes onSearch, passing it a ruleGroup object

    94. 

  94.  *             reset:        $("#mySearch").searchFilter().reset();   // resets rules and invokes onReset

    95. 

  95.  *             close:        $("#mySearch").searchFilter().close();   // without an onClose handler, equivalent to $("#mySearch").hide();

    96. 

  96.  * 

    97. 

  97.  * NOTE: You can get the jQuery object back from the SearchFilter object by chaining .$

    98. 

  98.  *     Example

    99. 

  99.  *         $("#mySearch").searchFilter().add().add().reset().$.hide();

    100. 

  100.  *     Verbose Example

    101. 

  101.  *         $("#mySearch")      // gets jQuery object for the HTML element with id="mySearch"

    102. 

  102.  *             .searchFilter() // gets the SearchFilter object for an existing search filter

    103. 

  103.  *             .add()          // adds a new filter to the end of the list

    104. 

  104.  *             .add()          // adds another new filter to the end of the list

    105. 

  105.  *             .reset()        // resets filters back to original state, triggers onReset

    106. 

  106.  *             .$              // returns jQuery object for $("#mySearch")

    107. 

  107.  *             .hide();        // equivalent to $("#mySearch").hide();

    108. 

  108.  */

    109. 

  109. 

    110. 

  110. jQuery.fn.searchFilter = function(fields, options) {

    111. 

  111. 

    112. 

  112.     function SearchFilter(jQ, fields, options) {

    113. 

  113. 

    114. 

  114. 

    115. 

  115.         //---------------------------------------------------------------

    116. 

  116.         // PUBLIC VARS

    117. 

  117.         //---------------------------------------------------------------

    118. 

  118. 

    119. 

  119.         this.$ = jQ; // makes the jQuery object available as .$ from the return value

    120. 

  120. 

    121. 

  121. 

    122. 

  122.         //---------------------------------------------------------------

    123. 

  123.         // PUBLIC FUNCTIONS

    124. 

  124.         //---------------------------------------------------------------

    125. 

  125. 

    126. 

  126.         this.add = function(i) {

    127. 

  127.             if (i == null) jQ.find(".ui-add-last").click();

    128. 

  128.             else jQ.find(".sf:eq(" + i + ") .ui-add").click();

    129. 

  129.             return this;

    130. 

  130.         };

    131. 

  131. 

    132. 

  132.         this.del = function(i) {

    133. 

  133.             if (i == null) jQ.find(".sf:last .ui-del").click();

    134. 

  134.             else jQ.find(".sf:eq(" + i + ") .ui-del").click();

    135. 

  135.             return this;

    136. 

  136.         };

    137. 

  137. 

    138. 

  138.         this.search = function(e) {

    139. 

  139.             jQ.find(".ui-search").click();

    140. 

  140.             return this;

    141. 

  141.         };

    142. 

  142. 

    143. 

  143.         this.reset = function(o) {

    144. 

  144.             if(o===undefined) o = false;

    145. 

  145.             jQ.find(".ui-reset").trigger('click',[o]);

    146. 

  146.             return this;

    147. 

  147.         };

    148. 

  148. 

    149. 

  149.         this.close = function() {

    150. 

  150.             jQ.find(".ui-closer").click();

    151. 

  151.             return this;

    152. 

  152.         };

    153. 

  153. 

    154. 

  154. 

    155. 

  155. 

    156. 

  156.         //---------------------------------------------------------------

    157. 

  157.         // "CONSTRUCTOR" (in air quotes)

    158. 

  158.         //---------------------------------------------------------------

    159. 

  159. 

    160. 

  160.         if (fields != null) { // type coercion matches undefined as well as null

    161. 

  161. 

    162. 

  162. 

    163. 

  163.             //---------------------------------------------------------------

    164. 

  164.             // UTILITY FUNCTIONS

    165. 

  165.             //---------------------------------------------------------------

    166. 

  166. 

    167. 

  167.             function hover() {

    168. 

  168.                 jQuery(this).toggleClass("ui-state-hover");

    169. 

  169.                 return false;

    170. 

  170.             }

    171. 

  171. 

    172. 

  172.             function active(e) {

    173. 

  173.                 jQuery(this).toggleClass("ui-state-active", (e.type == "mousedown"));

    174. 

  174.                 return false;

    175. 

  175.             }

    176. 

  176. 

    177. 

  177.             function buildOpt(value, text) {

    178. 

  178.                 return "<option value='" + value + "'>" + text + "</option>";

    179. 

  179.             }

    180. 

  180. 

    181. 

  181.             function buildSel(className, options, isHidden) {

    182. 

  182.                 return "<select class='" + className + "'" + (isHidden ? " style='display:none;'" : "") + ">" + options + "</select>";

    183. 

  183.             }

    184. 

  184. 

    185. 

  185.             function initData(selector, fn) {

    186. 

  186.                 var jElem = jQ.find("tr.sf td.data " + selector);

    187. 

  187.                 if (jElem[0] != null)

    188. 

  188.                     fn(jElem);

    189. 

  189.             }

    190. 

  190. 

    191. 

  191.             function bindDataEvents(selector, events) {

    192. 

  192.                 var jElem = jQ.find("tr.sf td.data " + selector);

    193. 

  193.                 if (jElem[0] != null) {

    194. 

  194.                     jQuery.each(events, function() {

    195. 

  195.                         if (this.data != null)

    196. 

  196.                             jElem.bind(this.type, this.data, this.fn);

    197. 

  197.                         else

    198. 

  198.                             jElem.bind(this.type, this.fn);

    199. 

  199.                     });

    200. 

  200.                 }

    201. 

  201.             }

    202. 

  202. 

    203. 

  203. 

    204. 

  204.             //---------------------------------------------------------------

    205. 

  205.             // SUPER IMPORTANT PRIVATE VARS

    206. 

  206.             //---------------------------------------------------------------

    207. 

  207. 

    208. 

  208.             // copies jQuery.fn.searchFilter.defaults.options properties onto an empty object, then options onto that

    209. 

  209.             var opts = jQuery.extend({}, jQuery.fn.searchFilter.defaults, options);

    210. 

  210. 

    211. 

  211.             // this is keeps track of the last asynchronous setup

    212. 

  212.             var highest_late_setup = -1;

    213. 

  213. 

    214. 

  214. 

    215. 

  215.             //---------------------------------------------------------------

    216. 

  216.             // CREATION PROCESS STARTS

    217. 

  217.             //---------------------------------------------------------------

    218. 

  218. 

    219. 

  219.             // generate the global ops

    220. 

  220.             var gOps_html = "";

    221. 

  221.             jQuery.each(opts.groupOps, function() { gOps_html += buildOpt(this.op, this.text); });

    222. 

  222.             gOps_html = "<select name='groupOp'>" + gOps_html + "</select>";

    223. 

  223. 

    224. 

  224.             /* original content - doesn't minify very well

    225. 

  225.             jQ

    226. 

  226.             .html("") // clear any old content

    227. 

  227.             .addClass("ui-searchFilter") // add classes

    228. 

  228.             .append( // add content

    229. 

  229.             "\

    230. 

  230.             <div class='ui-widget-overlay' style='z-index: -1'>&nbsp;</div>\

    231. 

  231.             <table class='ui-widget-content ui-corner-all'>\

    232. 

  232.             <thead>\

    233. 

  233.             <tr>\

    234. 

  234.             <td colspan='5' class='ui-widget-header ui-corner-all' style='line-height: 18px;'>\

    235. 

  235.             <div class='ui-closer ui-state-default ui-corner-all ui-helper-clearfix' style='float: right;'>\

    236. 

  236.             <span class='ui-icon ui-icon-close'></span>\

    237. 

  237.             </div>\

    238. 

  238.             " + opts.windowTitle + "\

    239. 

  239.             </td>\

    240. 

  240.             </tr>\

    241. 

  241.             </thead>\

    242. 

  242.             <tbody>\

    243. 

  243.             <tr class='sf'>\

    244. 

  244.             <td class='fields'></td>\

    245. 

  245.             <td class='ops'></td>\

    246. 

  246.             <td class='data'></td>\

    247. 

  247.             <td><div class='ui-del ui-state-default ui-corner-all'><span class='ui-icon ui-icon-minus'></span></div></td>\

    248. 

  248.             <td><div class='ui-add ui-state-default ui-corner-all'><span class='ui-icon ui-icon-plus'></span></div></td>\

    249. 

  249.             </tr>\

    250. 

  250.             <tr>\

    251. 

  251.             <td colspan='5' class='divider'><div>&nbsp;</div></td>\

    252. 

  252.             </tr>\

    253. 

  253.             </tbody>\

    254. 

  254.             <tfoot>\

    255. 

  255.             <tr>\

    256. 

  256.             <td colspan='3'>\

    257. 

  257.             <span class='ui-reset ui-state-default ui-corner-all' style='display: inline-block; float: left;'><span class='ui-icon ui-icon-arrowreturnthick-1-w' style='float: left;'></span><span style='line-height: 18px; padding: 0 7px 0 3px;'>" + opts.resetText + "</span></span>\

    258. 

  258.             <span class='ui-search ui-state-default ui-corner-all' style='display: inline-block; float: right;'><span class='ui-icon ui-icon-search' style='float: left;'></span><span style='line-height: 18px; padding: 0 7px 0 3px;'>" + opts.searchText + "</span></span>\

    259. 

  259.             <span class='matchText'>" + opts.matchText + "</span> \

    260. 

  260.             " + gOps_html + " \

    261. 

  261.             <span class='rulesText'>" + opts.rulesText + "</span>\

    262. 

  262.             </td>\

    263. 

  263.             <td>&nbsp;</td>\

    264. 

  264.             <td><div class='ui-add-last ui-state-default ui-corner-all'><span class='ui-icon ui-icon-plusthick'></span></div></td>\

    265. 

  265.             </tr>\

    266. 

  266.             </tfoot>\

    267. 

  267.             </table>\

    268. 

  268.             ");

    269. 

  269.             /* end hard-to-minify code */

    270. 

  270.             /* begin easier to minify code */

    271. 

  271.             jQ.html("").addClass("ui-searchFilter").append("<div class='ui-widget-overlay' style='z-index: -1'>&#160;</div><table class='ui-widget-content ui-corner-all'><thead><tr><td colspan='5' class='ui-widget-header ui-corner-all' style='line-height: 18px;'><div class='ui-closer ui-state-default ui-corner-all ui-helper-clearfix' style='float: right;'><span class='ui-icon ui-icon-close'></span></div>" + opts.windowTitle + "</td></tr></thead><tbody><tr class='sf'><td class='fields'></td><td class='ops'></td><td class='data'></td><td><div class='ui-del ui-state-default ui-corner-all'><span class='ui-icon ui-icon-minus'></span></div></td><td><div class='ui-add ui-state-default ui-corner-all'><span class='ui-icon ui-icon-plus'></span></div></td></tr><tr><td colspan='5' class='divider'><hr class='ui-widget-content' style='margin:1px'/></td></tr></tbody><tfoot><tr><td colspan='3'><span class='ui-reset ui-state-default ui-corner-all' style='display: inline-block; float: left;'><span class='ui-icon ui-icon-arrowreturnthick-1-w' style='float: left;'></span><span style='line-height: 18px; padding: 0 7px 0 3px;'>" + opts.resetText + "</span></span><span class='ui-search ui-state-default ui-corner-all' style='display: inline-block; float: right;'><span class='ui-icon ui-icon-search' style='float: left;'></span><span style='line-height: 18px; padding: 0 7px 0 3px;'>" + opts.searchText + "</span></span><span class='matchText'>" + opts.matchText + "</span> " + gOps_html + " <span class='rulesText'>" + opts.rulesText + "</span></td><td>&#160;</td><td><div class='ui-add-last ui-state-default ui-corner-all'><span class='ui-icon ui-icon-plusthick'></span></div></td></tr></tfoot></table>");

    272. 

  272.             /* end easier-to-minify code */

    273. 

  273. 

    274. 

  274.             var jRow = jQ.find("tr.sf");

    275. 

  275.             var jFields = jRow.find("td.fields");

    276. 

  276.             var jOps = jRow.find("td.ops");

    277. 

  277.             var jData = jRow.find("td.data");

    278. 

  278. 

    279. 

  279.             // generate the defaults

    280. 

  280.             var default_ops_html = "";

    281. 

  281.             jQuery.each(opts.operators, function() { default_ops_html += buildOpt(this.op, this.text); });

    282. 

  282.             default_ops_html = buildSel("default", default_ops_html, true);

    283. 

  283.             jOps.append(default_ops_html);

    284. 

  284.             var default_data_html = "<input type='text' class='default' style='display:none;' />";

    285. 

  285.             jData.append(default_data_html);

    286. 

  286. 

    287. 

  287.             // generate the field list as a string

    288. 

  288.             var fields_html = "";

    289. 

  289.             var has_custom_ops = false;

    290. 

  290.             var has_custom_data = false;

    291. 

  291.             jQuery.each(fields, function(i) {

    292. 

  292.                 var field_num = i;

    293. 

  293.                 fields_html += buildOpt(this.itemval, this.text);

    294. 

  294.                 // add custom ops if they exist

    295. 

  295.                 if (this.ops != null) {

    296. 

  296.                     has_custom_ops = true;

    297. 

  297.                     var custom_ops = "";

    298. 

  298.                     jQuery.each(this.ops, function() { custom_ops += buildOpt(this.op, this.text); });

    299. 

  299.                     custom_ops = buildSel("field" + field_num, custom_ops, true);

    300. 

  300.                     jOps.append(custom_ops);

    301. 

  301.                 }

    302. 

  302.                 // add custom data if it is given

    303. 

  303.                 if (this.dataUrl != null) {

    304. 

  304.                     if (i > highest_late_setup) highest_late_setup = i;

    305. 

  305.                     has_custom_data = true;

    306. 

  306.                     var dEvents = this.dataEvents;

    307. 

  307.                     var iEvent = this.dataInit;

    308. 

  308.                     var bs = this.buildSelect;

    309. 

  309.                     jQuery.ajax(jQuery.extend({

    310. 

  310.                         url : this.dataUrl,

    311. 

  311.                         complete: function(data) {

    312. 

  312.                             var $d;

    313. 

  313.                             if(bs != null) $d =jQuery("<div />").append(bs(data));

    314. 

  314.                             else $d = jQuery("<div />").append(data.responseText);

    315. 

  315.                             $d.find("select").addClass("field" + field_num).hide();

    316. 

  316.                             jData.append($d.html());

    317. 

  317.                             if (iEvent) initData(".field" + i, iEvent);

    318. 

  318.                             if (dEvents) bindDataEvents(".field" + i, dEvents);

    319. 

  319.                             if (i == highest_late_setup) { // change should get called no more than twice when this searchFilter is constructed

    320. 

  320.                                 jQ.find("tr.sf td.fields select[name='field']").change();

    321. 

  321.                             }

    322. 

  322.                         }

    323. 

  323.                     },opts.ajaxSelectOptions));

    324. 

  324.                 } else if (this.dataValues != null) {

    325. 

  325.                     has_custom_data = true;

    326. 

  326.                     var custom_data = "";

    327. 

  327.                     jQuery.each(this.dataValues, function() { custom_data += buildOpt(this.value, this.text); });

    328. 

  328.                     custom_data = buildSel("field" + field_num, custom_data, true);

    329. 

  329.                     jData.append(custom_data);

    330. 

  330.                 } else if (this.dataEvents != null || this.dataInit != null) {

    331. 

  331.                     has_custom_data = true;

    332. 

  332.                     var custom_data = "<input type='text' class='field" + field_num + "' />";

    333. 

  333.                     jData.append(custom_data);

    334. 

  334.                 }

    335. 

  335.                 // attach events to data if they exist

    336. 

  336.                 if (this.dataInit != null && i != highest_late_setup)

    337. 

  337.                     initData(".field" + i, this.dataInit);

    338. 

  338.                 if (this.dataEvents != null && i != highest_late_setup)

    339. 

  339.                     bindDataEvents(".field" + i, this.dataEvents);

    340. 

  340.             });

    341. 

  341.             fields_html = "<select name='field'>" + fields_html + "</select>";

    342. 

  342.             jFields.append(fields_html);

    343. 

  343. 

    344. 

  344.             // setup the field select with an on-change event if there are custom ops or data

    345. 

  345.             var jFSelect = jFields.find("select[name='field']");

    346. 

  346.             if (has_custom_ops) jFSelect.change(function(e) {

    347. 

  347.                 var index = e.target.selectedIndex;

    348. 

  348.                 var td = jQuery(e.target).parents("tr.sf").find("td.ops");

    349. 

  349.                 td.find("select").removeAttr("name").hide(); // disown and hide all elements

    350. 

  350.                 var jElem = td.find(".field" + index);

    351. 

  351.                 if (jElem[0] == null) jElem = td.find(".default"); // if there's not an element for that field, use the default one

    352. 

  352.                 jElem.attr("name", "op").show();

    353. 

  353.                 return false;

    354. 

  354.             });

    355. 

  355.             else jOps.find(".default").attr("name", "op").show();

    356. 

  356.             if (has_custom_data) jFSelect.change(function(e) {

    357. 

  357.                 var index = e.target.selectedIndex;

    358. 

  358.                 var td = jQuery(e.target).parents("tr.sf").find("td.data");

    359. 

  359.                 td.find("select,input").removeClass("vdata").hide(); // disown and hide all elements

    360. 

  360.                 var jElem = td.find(".field" + index);

    361. 

  361.                 if (jElem[0] == null) jElem = td.find(".default"); // if there's not an element for that field, use the default one

    362. 

  362.                 jElem.show().addClass("vdata");

    363. 

  363.                 return false;

    364. 

  364.             });

    365. 

  365.             else jData.find(".default").show().addClass("vdata");

    366. 

  366.             // go ahead and call the change event and setup the ops and data values

    367. 

  367.             if (has_custom_ops || has_custom_data) jFSelect.change();

    368. 

  368. 

    369. 

  369.             // bind events

    370. 

  370.             jQ.find(".ui-state-default").hover(hover, hover).mousedown(active).mouseup(active); // add hover/active effects to all buttons

    371. 

  371.             jQ.find(".ui-closer").click(function(e) {

    372. 

  372.                 opts.onClose(jQuery(jQ.selector));

    373. 

  373.                 return false;

    374. 

  374.             });

    375. 

  375.             jQ.find(".ui-del").click(function(e) {

    376. 

  376.                 var row = jQuery(e.target).parents(".sf");

    377. 

  377.                 if (row.siblings(".sf").length > 0) { // doesn't remove if there's only one filter left

    378. 

  378.                     if (opts.datepickerFix === true && jQuery.fn.datepicker !== undefined)

    379. 

  379.                         row.find(".hasDatepicker").datepicker("destroy"); // clean up datepicker's $.data mess

    380. 

  380.                     row.remove(); // also unbinds

    381. 

  381.                 } else { // resets the filter if it's the last one

    382. 

  382.                     row.find("select[name='field']")[0].selectedIndex = 0;

    383. 

  383.                     row.find("select[name='op']")[0].selectedIndex = 0;

    384. 

  384.                     row.find(".data input").val(""); // blank all input values

    385. 

  385.                     row.find(".data select").each(function() { this.selectedIndex = 0; }); // select first option on all selects

    386. 

  386.                     row.find("select[name='field']").change(function(event){event.stopPropagation();}); // trigger any change events

    387. 

  387.                 }

    388. 

  388.                 return false;

    389. 

  389.             });

    390. 

  390.             jQ.find(".ui-add").click(function(e) {

    391. 

  391.                 var row = jQuery(e.target).parents(".sf");

    392. 

  392.                 var newRow = row.clone(true).insertAfter(row);

    393. 

  393.                 newRow.find(".ui-state-default").removeClass("ui-state-hover ui-state-active");

    394. 

  394.                 if (opts.clone) {

    395. 

  395.                     newRow.find("select[name='field']")[0].selectedIndex = row.find("select[name='field']")[0].selectedIndex;

    396. 

  396.                     var stupid_browser = (newRow.find("select[name='op']")[0] == null); // true for IE6

    397. 

  397.                     if (!stupid_browser)

    398. 

  398.                         newRow.find("select[name='op']").focus()[0].selectedIndex = row.find("select[name='op']")[0].selectedIndex;

    399. 

  399.                     var jElem = newRow.find("select.vdata");

    400. 

  400.                     if (jElem[0] != null) // select doesn't copy it's selected index when cloned

    401. 

  401.                         jElem[0].selectedIndex = row.find("select.vdata")[0].selectedIndex;

    402. 

  402.                 } else {

    403. 

  403.                     newRow.find(".data input").val(""); // blank all input values

    404. 

  404.                     newRow.find("select[name='field']").focus();

    405. 

  405.                 }

    406. 

  406.                 if (opts.datepickerFix === true && jQuery.fn.datepicker !== undefined) { // using $.data to associate data with document elements is Not Good

    407. 

  407.                     row.find(".hasDatepicker").each(function() {

    408. 

  408.                         var settings = jQuery.data(this, "datepicker").settings;

    409. 

  409.                         newRow.find("#" + this.id).unbind().removeAttr("id").removeClass("hasDatepicker").datepicker(settings);

    410. 

  410.                     });

    411. 

  411.                 }

    412. 

  412.                 newRow.find("select[name='field']").change(function(event){event.stopPropagation();} );

    413. 

  413.                 return false;

    414. 

  414.             });

    415. 

  415.             jQ.find(".ui-search").click(function(e) {

    416. 

  416.                 var ui = jQuery(jQ.selector); // pointer to search box wrapper element

    417. 

  417.                 var ruleGroup;

    418. 

  418.                 var group_op = ui.find("select[name='groupOp'] :selected").val(); // puls "AND" or "OR"

    419. 

  419.                 if (!opts.stringResult) {

    420. 

  420.                     ruleGroup = {

    421. 

  421.                         groupOp: group_op,

    422. 

  422.                         rules: []

    423. 

  423.                     };

    424. 

  424.                 } else {

    425. 

  425.                     ruleGroup = "{\"groupOp\":\"" + group_op + "\",\"rules\":[";

    426. 

  426.                 }

    427. 

  427.                 ui.find(".sf").each(function(i) {

    428. 

  428.                     var tField = jQuery(this).find("select[name='field'] :selected").val();

    429. 

  429.                     var tOp = jQuery(this).find("select[name='op'] :selected").val();

    430. 

  430.                     var tData = jQuery(this).find("input.vdata,select.vdata :selected").val();

    431. 

  431.                     tData += "";

    432. 

  432.                     if (!opts.stringResult) {

    433. 

  433.                         ruleGroup.rules.push({

    434. 

  434.                             field: tField,

    435. 

  435.                             op: tOp,

    436. 

  436.                             data: tData

    437. 

  437.                         });

    438. 

  438.                     } else {

    439. 

  439. 						tData = tData.replace(/\\/g,'\\\\').replace(/\"/g,'\\"');

    440. 

  440.                         if (i > 0) ruleGroup += ",";

    441. 

  441.                         ruleGroup += "{\"field\":\"" + tField + "\",";

    442. 

  442.                         ruleGroup += "\"op\":\"" + tOp + "\",";

    443. 

  443.                         ruleGroup += "\"data\":\"" + tData + "\"}";

    444. 

  444.                     }

    445. 

  445.                 });

    446. 

  446.                 if (opts.stringResult) ruleGroup += "]}";

    447. 

  447.                 opts.onSearch(ruleGroup);

    448. 

  448.                 return false;

    449. 

  449.             });

    450. 

  450.             jQ.find(".ui-reset").click(function(e,op) {

    451. 

  451.                 var ui = jQuery(jQ.selector);

    452. 

  452.                 ui.find(".ui-del").click(); // removes all filters, resets the last one

    453. 

  453.                 ui.find("select[name='groupOp']")[0].selectedIndex = 0; // changes the op back to the default one

    454. 

  454.                 opts.onReset(op);

    455. 

  455.                 return false;

    456. 

  456.             });

    457. 

  457.             jQ.find(".ui-add-last").click(function() {

    458. 

  458.                 var row = jQuery(jQ.selector + " .sf:last");

    459. 

  459.                 var newRow = row.clone(true).insertAfter(row);

    460. 

  460.                 newRow.find(".ui-state-default").removeClass("ui-state-hover ui-state-active");

    461. 

  461.                 newRow.find(".data input").val(""); // blank all input values

    462. 

  462.                 newRow.find("select[name='field']").focus();

    463. 

  463.                 if (opts.datepickerFix === true && jQuery.fn.datepicker !== undefined) { // using $.data to associate data with document elements is Not Good

    464. 

  464.                     row.find(".hasDatepicker").each(function() {

    465. 

  465.                         var settings = jQuery.data(this, "datepicker").settings;

    466. 

  466.                         newRow.find("#" + this.id).unbind().removeAttr("id").removeClass("hasDatepicker").datepicker(settings);

    467. 

  467.                     });

    468. 

  468.                 }

    469. 

  469.                 newRow.find("select[name='field']").change(function(event){event.stopPropagation();});

    470. 

  470.                 return false;

    471. 

  471.             });

    472. 

  472. 

    473. 

  473.             this.setGroupOp = function(setting) {

    474. 

  474.                 /* a "setter" for groupping argument.

    475. 

  475.                  *  ("AND" or "OR")

    476. 

  476.                  *

    477. 

  477.                  * Inputs:

    478. 

  478.                  *  setting - a string

    479. 

  479.                  *

    480. 

  480.                  * Returns:

    481. 

  481.                  *  Does not return anything. May add success / failure reporting in future versions.

    482. 

  482.                  *

    483. 

  483.                  *  author: Daniel Dotsenko (dotsa@hotmail.com)

    484. 

  484.                  */

    485. 

  485.                 selDOMobj = jQ.find("select[name='groupOp']")[0];

    486. 

  486.                 var indexmap = {}, l = selDOMobj.options.length, i;

    487. 

  487.                 for (i=0; i<l; i++) {

    488. 

  488.                     indexmap[selDOMobj.options[i].value] = i;

    489. 

  489.                 }

    490. 

  490.                 selDOMobj.selectedIndex = indexmap[setting];

    491. 

  491.                 jQuery(selDOMobj).change(function(event){event.stopPropagation();});

    492. 

  492.             };

    493. 

  493. 

    494. 

  494.             this.setFilter = function(settings) {

    495. 

  495.                 /* a "setter" for an arbitrary SearchFilter's filter line.

    496. 

  496.                  * designed to abstract the DOM manipulations required to infer

    497. 

  497.                  * a particular filter is a fit to the search box.

    498. 

  498.                  *

    499. 

  499.                  * Inputs:

    500. 

  500.                  *  settings - an "object" (dictionary)

    501. 

  501.                  *   index (optional*) (to be implemented in the future) : signed integer index (from top to bottom per DOM) of the filter line to fill.

    502. 

  502.                  *           Negative integers (rooted in -1 and lower) denote position of the line from the bottom.

    503. 

  503.                  *   sfref (optional*) : DOM object referencing individual '.sf' (normally a TR element) to be populated. (optional)

    504. 

  504.                  *   filter (mandatory) : object (dictionary) of form {'field':'field_value','op':'op_value','data':'data value'}

    505. 

  505.                  *

    506. 

  506.                  * * It is mandatory to have either index or sfref defined.

    507. 

  507.                  *

    508. 

  508.                  * Returns:

    509. 

  509.                  *  Does not return anything. May add success / failure reporting in future versions.

    510. 

  510.                  *

    511. 

  511.                  *  author: Daniel Dotsenko (dotsa@hotmail.com)

    512. 

  512.                  */

    513. 

  513. 

    514. 

  514.                 var o = settings['sfref'], filter = settings['filter'];

    515. 

  515.                 

    516. 

  516.                 // setting up valueindexmap that we will need to manipulate SELECT elements.

    517. 

  517.                 var fields = [], i, j , l, lj, li,

    518. 

  518.                     valueindexmap = {};

    519. 

  519.                     // example of valueindexmap:

    520. 

  520.                     // {'field1':{'index':0,'ops':{'eq':0,'ne':1}},'fieldX':{'index':1,'ops':{'eq':0,'ne':1},'data':{'true':0,'false':1}}},

    521. 

  521.                     // if data is undefined it's a INPUT field. If defined, it's SELECT

    522. 

  522.                 selDOMobj = o.find("select[name='field']")[0];

    523. 

  523.                 for (i=0, l=selDOMobj.options.length; i<l; i++) {

    524. 

  524.                     valueindexmap[selDOMobj.options[i].value] = {'index':i,'ops':{}};

    525. 

  525.                     fields.push(selDOMobj.options[i].value);

    526. 

  526.                 }

    527. 

  527.                 for (i=0, li=fields.length; i < li; i++) {

    528. 

  528.                     selDOMobj = o.find(".ops > select[class='field"+i+"']")[0];

    529. 

  529.                     if (selDOMobj) {

    530. 

  530.                         for (j=0, lj=selDOMobj.options.length; j<lj; j++) {

    531. 

  531.                             valueindexmap[fields[i]]['ops'][selDOMobj.options[j].value] = j;

    532. 

  532.                         }

    533. 

  533.                     }

    534. 

  534.                     selDOMobj = o.find(".data > select[class='field"+i+"']")[0];

    535. 

  535.                     if (selDOMobj) {

    536. 

  536.                         valueindexmap[fields[i]]['data'] = {}; // this setting is the flag that 'data' is contained in a SELECT

    537. 

  537.                         for (j=0, lj=selDOMobj.options.length; j<lj; j++) {

    538. 

  538.                             valueindexmap[fields[i]]['data'][selDOMobj.options[j].value] = j;

    539. 

  539.                         }

    540. 

  540.                     }

    541. 

  541.                 } // done populating valueindexmap

    542. 

  542. 

    543. 

  543.                 // preparsing the index values for SELECT elements.

    544. 

  544.                 var fieldvalue, fieldindex, opindex, datavalue, dataindex;

    545. 

  545.                 fieldvalue = filter['field'];

    546. 

  546. 				if (valueindexmap[fieldvalue]) {

    547. 

  547. 					fieldindex = valueindexmap[fieldvalue]['index'];

    548. 

  548. 				}

    549. 

  549.                 if (fieldindex != null) {

    550. 

  550.                     opindex = valueindexmap[fieldvalue]['ops'][filter['op']];

    551. 

  551.                     if(opindex === undefined) {

    552. 

  552.                         for(i=0,li=options.operators.length; i<li;i++) {

    553. 

  553.                             if(options.operators[i].op == filter.op ){

    554. 

  554.                                 opindex = i;

    555. 

  555.                                 break;

    556. 

  556.                             }

    557. 

  557.                         }

    558. 

  558.                     }

    559. 

  559.                     datavalue = filter['data'];

    560. 

  560.                     if (valueindexmap[fieldvalue]['data'] == null) {

    561. 

  561.                         dataindex = -1; // 'data' is not SELECT, Making the var 'defined'

    562. 

  562.                     } else {

    563. 

  563.                         dataindex = valueindexmap[fieldvalue]['data'][datavalue]; // 'undefined' may come from here.

    564. 

  564.                     }

    565. 

  565.                 }

    566. 

  566.                 // only if values for 'field' and 'op' and 'data' are 'found' in mapping...

    567. 

  567.                 if (fieldindex != null && opindex != null && dataindex != null) {

    568. 

  568.                     o.find("select[name='field']")[0].selectedIndex = fieldindex;

    569. 

  569.                     o.find("select[name='field']").change();

    570. 

  570.                     o.find("select[name='op']")[0].selectedIndex = opindex;

    571. 

  571.                     o.find("input.vdata").val(datavalue); // if jquery does not find any INPUT, it does not set any. This means we deal with SELECT

    572. 

  572.                     o = o.find("select.vdata")[0];

    573. 

  573.                     if (o) {

    574. 

  574.                         o.selectedIndex = dataindex;

    575. 

  575.                     }

    576. 

  576. 					return true

    577. 

  577.                 } else {

    578. 

  578. 					return false

    579. 

  579. 				}

    580. 

  580.             }; // end of this.setFilter fn

    581. 

  581.         } // end of if fields != null

    582. 

  582.     }

    583. 

  583.     return new SearchFilter(this, fields, options);

    584. 

  584. };

    585. 

  585. 

    586. 

  586. jQuery.fn.searchFilter.version = '1.2.9';

    587. 

  587. 

    588. 

  588. /* This property contains the default options */

    589. 

  589. jQuery.fn.searchFilter.defaults = {

    590. 

  590. 

    591. 

  591.     /*

    592. 

  592.      * PROPERTY

    593. 

  593.      * TYPE:        boolean 

    594. 

  594.      * DESCRIPTION: clone a row if it is added from an existing row

    595. 

  595.      *              when false, any new added rows will be blank.

    596. 

  596.      */

    597. 

  597.     clone: true,

    598. 

  598. 

    599. 

  599.     /*

    600. 

  600.      * PROPERTY

    601. 

  601.      * TYPE:        boolean 

    602. 

  602.      * DESCRIPTION: current version of datepicker uses a data store,

    603. 

  603.      *              which is incompatible with $().clone(true)

    604. 

  604.      */

    605. 

  605.     datepickerFix: true,

    606. 

  606. 

    607. 

  607.     /*

    608. 

  608.      * FUNCTION

    609. 

  609.      * DESCRIPTION: the function that will be called when the user clicks Reset

    610. 

  610.      * INPUT TYPE:  JS object if stringResult is false, otherwise is JSON string

    611. 

  611.      */

    612. 

  612.     onReset: function(data) { alert("Reset Clicked. Data Returned: " + data) },

    613. 

  613. 

    614. 

  614.     /*

    615. 

  615.      * FUNCTION

    616. 

  616.      * DESCRIPTION: the function that will be called when the user clicks Search

    617. 

  617.      * INPUT TYPE:  JS object if stringResult is false, otherwise is JSON string

    618. 

  618.      */

    619. 

  619.     onSearch: function(data) { alert("Search Clicked. Data Returned: " + data) },

    620. 

  620. 

    621. 

  621.     /*

    622. 

  622.      * FUNCTION

    623. 

  623.      * DESCRIPTION: the function that will be called when the user clicks the Closer icon

    624. 

  624.      *              or the close() function is called

    625. 

  625.      *              if left null, it simply does a .hide() on the searchFilter

    626. 

  626.      * INPUT TYPE:  a jQuery object for the searchFilter

    627. 

  627.      */

    628. 

  628.     onClose: function(jElem) { jElem.hide(); },

    629. 

  629. 

    630. 

  630.     /* 

    631. 

  631.      * PROPERTY

    632. 

  632.      * TYPE:        array of objects, each object has the properties op and text 

    633. 

  633.      * DESCRIPTION: the selectable operators that are applied between rules

    634. 

  634.      *              e.g. for {op:"AND", text:"all"}

    635. 

  635.      *                  the search filter box will say: match all rules

    636. 

  636.      *                  the server should interpret this as putting the AND op between each rule:

    637. 

  637.      *                      rule1 AND rule2 AND rule3

    638. 

  638.      *              text will be the option text, and op will be the option value

    639. 

  639.      */

    640. 

  640.     groupOps: [

    641. 

  641.         { op: "AND", text: "all" },

    642. 

  642.         { op: "OR",  text: "any" }

    643. 

  643.     ],

    644. 

  644. 

    645. 

  645. 

    646. 

  646.     /* 

    647. 

  647.      * PROPERTY

    648. 

  648.      * TYPE:        array of objects, each object has the properties op and text 

    649. 

  649.      * DESCRIPTION: the operators that will appear as drop-down options

    650. 

  650.      *              text will be the option text, and op will be the option value

    651. 

  651.      */

    652. 

  652.     operators: [

    653. 

  653.         { op: "eq", text: "is equal to" },

    654. 

  654.         { op: "ne", text: "is not equal to" },

    655. 

  655.         { op: "lt", text: "is less than" },

    656. 

  656.         { op: "le", text: "is less or equal to" },

    657. 

  657.         { op: "gt", text: "is greater than" },

    658. 

  658.         { op: "ge", text: "is greater or equal to" },

    659. 

  659.         { op: "in", text: "is in" },

    660. 

  660.         { op: "ni", text: "is not in" },

    661. 

  661.         { op: "bw", text: "begins with" },

    662. 

  662.         { op: "bn", text: "does not begin with" },

    663. 

  663.         { op: "ew", text: "ends with" },

    664. 

  664.         { op: "en", text: "does not end with" },

    665. 

  665.         { op: "cn", text: "contains" },

    666. 

  666.         { op: "nc", text: "does not contain" }

    667. 

  667.     ],

    668. 

  668. 

    669. 

  669.     /*

    670. 

  670.      * PROPERTY

    671. 

  671.      * TYPE:        string

    672. 

  672.      * DESCRIPTION: part of the phrase: _match_ ANY/ALL rules

    673. 

  673.      */

    674. 

  674.     matchText: "match",

    675. 

  675. 

    676. 

  676.     /*

    677. 

  677.      * PROPERTY

    678. 

  678.      * TYPE:        string

    679. 

  679.      * DESCRIPTION: part of the phrase: match ANY/ALL _rules_

    680. 

  680.      */

    681. 

  681.     rulesText: "rules",

    682. 

  682. 

    683. 

  683.     /*

    684. 

  684.      * PROPERTY

    685. 

  685.      * TYPE:        string

    686. 

  686.      * DESCRIPTION: the text that will be displayed in the reset button

    687. 

  687.      */

    688. 

  688.     resetText: "Reset",

    689. 

  689.     

    690. 

  690.     /*

    691. 

  691.      * PROPERTY

    692. 

  692.      * TYPE:        string

    693. 

  693.      * DESCRIPTION: the text that will be displayed in the search button

    694. 

  694.      */

    695. 

  695.     searchText: "Search",

    696. 

  696.     

    697. 

  697.     /*

    698. 

  698.      * PROPERTY

    699. 

  699.      * TYPE:        boolean

    700. 

  700.      * DESCRIPTION: a flag that, when set, will make the onSearch and onReset return strings instead of objects

    701. 

  701.      */

    702. 

  702.     stringResult: true,    

    703. 

  703.     

    704. 

  704.     /*

    705. 

  705.      * PROPERTY

    706. 

  706.      * TYPE:        string

    707. 

  707.      * DESCRIPTION: the title of the searchFilter window

    708. 

  708.      */

    709. 

  709.     windowTitle: "Search Rules",

    710. 

  710.     /*

    711. 

  711.      * PROPERTY

    712. 

  712.      * TYPE:        object

    713. 

  713.      * DESCRIPTION: options to extend the ajax request

    714. 

  714.      */

    715. 

  715.     ajaxSelectOptions : {}

    716. 

  716. }; /* end of searchFilter */
    717.