lightTreeview

  1  /* *
  2 
  3   * lightTreeview for jQuery 1.2.x
  4 
  5   *
  6 
  7   * author: feiyu
  8 
  9   * e-mail: feiyu@asgard.cn
 10 
 11   * website: http://feiyu.asgard.cn
 12 
 13   *
 14 
 15   * Version: 1.0.0
 16 
 17    */
 18 
 19 
 20 
 21  ( function ($) {
 22 
 23 
 24 
 25      $.lightTreeview = {
 26 
 27          toggle:  function (o,speed) {
 28 
 29              exec(o,speed, ' toggle ' );
 30 
 31          },
 32 
 33          close:  function (o,speed) {
 34 
 35              exec(o,speed, ' hide ' );
 36 
 37          },
 38 
 39          open:  function (o,speed) {
 40 
 41              exec(o,speed, ' show ' );
 42 
 43          }
 44 
 45      };
 46 
 47 
 48 
 49       function  exec(o,s,act) {
 50 
 51           var  f = $(o).parent();
 52 
 53           var  ico = f.find( ' >.flex-ico ' );
 54 
 55          flex(ico,f,{animate:isNaN(s) ? 100 :s},act);
 56 
 57      }
 58 
 59 
 60 
 61      $.fn.lightTreeview = function (s1) {
 62 
 63           if ( typeof (s1) == ' undefined ' ) s1  =  {};
 64 
 65           var  settings = defaultSettings();
 66 
 67          $.extend(settings,s1);
 68 
 69 
 70 
 71           this .addClass( ' lightTreeview ' );
 72 
 73 
 74 
 75           // 是否启用连节线
 76 
 77           if ( ! settings.line)  this .addClass( ' treeview-noline ' );
 78 
 79 
 80 
 81           // 是否设置了风格
 82 
 83           if (settings.style)  this .addClass( ' treeview- ' + settings.style);
 84 
 85 
 86 
 87           // 取节点
 88 
 89           var  node = $( ' li:has(ul,ol) ' , this );
 90 
 91 
 92 
 93           // 设置结尾的分枝
 94 
 95          $( ' li:last-child ' , this ).addClass( ' branch-last ' );
 96 
 97 
 98 
 99           if (settings.collapse) {     // 允许伸缩
100 
101 
102 
103               // 设置带图标的li的连节线
104 
105              node.addClass( ' node-normal ' ).filter( ' :last-child ' ).attr( ' class ' , ' node-last ' );
106 
107 
108 
109               // 默认文件图标支持
110 
111               if (settings.fileico) $( ' li:not(:has(ul,ol))>:first-child ' , this ).addClass( ' treeview-file ' );
112 
113 
114 
115               // 默认文件夹图标支持
116 
117               if (settings.folderico) $( ' >:first-child ' ,node).addClass( ' treeview-folder ' );
118 
119 
120 
121               // 在节点中加入默认加减
122 
123              node.css( ' cursor ' , ' pointer ' ).prepend( ' <span class="flex-ico"></span> ' ).find( ' >ul,>ol ' ).filter( ' :hidden ' ).parent().find( ' >.flex-ico ' ).addClass( ' flex-close ' );
124 
125              $( ' >.flex-ico ' ,node.filter( ' :last-child ' )).addClass( ' flex-none ' );
126 
127              $( ' >ul,>ol ' ,node.filter( ' :last-child ' )).filter( ' :hidden ' ).parent().addClass( ' node-last-close ' );
128 
129              node.find( ' >ul,>ol ' ).filter( ' :hidden ' ).parent().find( ' >.treeview-folder ' ).addClass( ' treeview-folder-close ' );
130 
131 
132 
133               // 绑定标题行的点击事件
134 
135               if (settings.nodeEvent)
136 
137                  node.find( ' >:nth-child(2) ' ).click( function () {
138 
139                      $( this ).parent().find( ' >.flex-ico ' ).trigger( ' click ' );
140 
141                  });
142 
143 
144 
145               // 绑定默认事件
146 
147              $( ' >.flex-ico ' ,node).click( function () {
148 
149                   var  f = $( this ).parent();     // 当前节点
150 
151                   if (settings.unique  &&  $( ' >ul,>ol ' ,f).is( ' :hidden ' )) {     // 同级互斥
152 
153                       var  ff = $( ' >li:has(ul,ol) ' ,f.parent()).not(f);     // 排除当前节点的同级节点集合
154 
155                      flex($( ' >:first-child ' ,ff),ff,settings, ' hide ' );
156 
157                  }
158 
159                  flex($( this ),f,settings);
160 
161              });
162 
163          }
164 
165      };
166 
167 
168 
169       // 缩放操作
170 
171       function  flex(ico,father,settings,type) {
172 
173           var  list = $( ' >ul,>ol ' ,father);
174 
175           var  ln = ico.filter( ' .flex-none ' ).parent();
176 
177           var  ic = ico.not( ' .flex-none ' );
178 
179           var  fl = $( ' >.treeview-folder ' ,father);
180 
181           if (type == ' hide ' ) {
182 
183              ln.addClass( ' node-last-close ' );
184 
185              ic.addClass( ' flex-close ' );
186 
187              fl.addClass( ' treeview-folder-close ' );
188 
189              list.hide(settings.animate);
190 
191          }
192 
193           else   if (type == ' show ' ) {
194 
195              ln.removeClass( ' node-last-close ' );
196 
197              ic.removeClass( ' flex-close ' );
198 
199              fl.removeClass( ' treeview-folder-close ' );
200 
201              list.show(settings.animate);
202 
203          }
204 
205           else  {
206 
207              ln.toggleClass( ' node-last-close ' );
208 
209              ic.toggleClass( ' flex-close ' );
210 
211              fl.toggleClass( ' treeview-folder-close ' );
212 
213              list.toggle(settings.animate);
214 
215          }
216 
217      }
218 
219 
220 
221       // 默认参数设置
222 
223       var  defaultSettings = function () {
224 
225           return  {
226 
227              collapse:  true ,         // 允许折叠
228 
229              line:  true ,             // 有连接线
230 
231              animate:  200 ,         // 动画速度
232 
233              nodeEvent:  true ,     // 响应分枝整行的事件
234 
235              unique:  false ,         // 同级节点下是否互斥
236 
237              style:  '' ,             // 默认风格
238 
239              fileico:  false ,         // 文件图标支持
240 
241              folderico:  false      // 文件夹图标支持
242 
243          }
244 
245      };
246 
247  })(jQuery);

转载于:https://www.cnblogs.com/orez88/articles/1493988.html