root/ui/web/htdocs/js/jquery.treeview.async.js

Revision 5f2ddc824a8510304798a80360e45d8283e751c2, 3.8 kB (checked in by Theo Schlossnagle <jesus@omniti.com>, 9 years ago)

some mockups

  • Property mode set to 100644
Line 
1 /*
2  * Async Treeview 0.1 - Lazy-loading extension for Treeview
3  *
4  * http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
5  *
6  * Copyright (c) 2007 Jörn Zaefferer
7  *
8  * Dual licensed under the MIT and GPL licenses:
9  *   http://www.opensource.org/licenses/mit-license.php
10  *   http://www.gnu.org/licenses/gpl.html
11  *
12  * Revision: $Id$
13  *
14  */
15
16 (function($) {
17
18   // In keeping (I hope) with your convention of storing IDs/Classes
19   // in object literals
20   var IDS = {
21     status: 'msg_status',
22     placeholder: 'placeholder'
23   };
24
25   var CLASSES = {
26     hasChildren: 'hasChildren',
27     placeholder: 'placeholder'
28   };
29
30   function load(settings, root, child, container)
31   {
32     // row-by-row URL params from JSON or fall back to default
33     var params = settings.params[root] ? settings.params[root].params : {root: root};
34
35     // status message (loading could take a bit)
36     child.html('<span id="'+IDS.status+'">Loading....</span>');
37
38     $.getJSON(settings.url, params, function (response)
39     {
40       $.each(response, createNode, [child]);
41       $(container).treeview({add: child});
42       // kill the status message
43       $('#'+IDS.status).remove();
44     });
45
46     // Moved this out of the callback.  Easier (for me) to read and
47     // saw no benefit to redefining it each on each XHR
48     function createNode(parent)
49     {
50       var current = $("<li/>")
51         .attr("id", this.id || "")
52         .html("<span>" + this.text + "</span>")
53         .appendTo(parent);
54
55       // Object, indexed by id, of url params
56       // Current approach allows for multiple params to be passed to
57       //   server as well as different params/values per JSON row.
58       // Pretty sure this approach won't work if you wanted a less
59       //   granular approach (ie, all first level nodes get X=Y), but,
60       //   IMO, the server can handle that logic and construct the
61       //   appropriate JSON response (still return X=Y for each row).
62       // Not married to this implementation, just needed a way for
63       //   getJSON (by way of load()) to access the URL params and
64       //   the settings variable seemed appropriate
65       if (this.params)  { settings.params[this.id] = {params: this.params}; }
66
67       if (this.classes) { current.children("span").addClass(this.classes); }
68       if (this.expanded){ current.addClass("open"); }
69
70       if (this.hasChildren || this.children && this.children.length) {
71         var branch = $("<ul/>").appendTo(current);
72         if (this.hasChildren){
73           current.addClass(CLASSES.hasChildren);
74           createNode.call({text: CLASSES.placeholder,
75                            id: IDS.placeholder,
76                            children: []
77                           }, branch);
78         }
79         if (this.children && this.children.length) {
80           $.each(this.children, createNode, [branch]);
81         }
82       }
83     } // createNode
84
85   } // load
86
87   var proxied = $.fn.treeview;
88   $.fn.treeview = function(settings)
89   {
90     if (!settings.url) { return proxied.apply(this, arguments); }
91
92     // not set in the constructor, so create it here
93     if (!settings.params){ settings.params={}; }
94
95     var container = this;
96     load(settings, "source", this, container);
97     var userToggle = settings.toggle;
98     return proxied.call(this, $.extend({}, settings, {
99       collapsed: true,
100       toggle: function()
101       {
102         var $this = $(this);
103
104         // If you want to get make a new request each time the branch is re-opened
105         if (settings.reloadJSON){
106           var childList = $this.find("ul").empty();
107           if ($this.hasClass(proxied.classes.collapsable)){
108             load(settings, this.id, childList, container);
109           }
110         } else if ($this.hasClass(CLASSES.hasChildren)) {
111           var childList = $this.removeClass(CLASSES.hasChildren).find("ul").empty();
112           load(settings, this.id, childList, container);
113         }
114
115         if (userToggle) { userToggle.apply(this, arguments); }
116       }
117     })); // return
118
119   }; //treeview
120
121 })(jQuery);
Note: See TracBrowser for help on using the browser.