;(function($, window, document, gl) { // 定义TreeView的命名空间 gl.namespace('pages.TreeView'); /** * @param jquery ele jQuery 对象 * @param Object first 第一层的数据对象 */ var TreeView = function (ele, options) { this.ele = ele; this.container; this.init(options); }; var _prop = TreeView.prototype; // 初始化容器并设置基础的点击事件 _prop.init = function(options) { var _this = this; // 清空容器 this.ele.addClass('whyc-sider-menu-container'); this.ele.text(''); var whycTreeView = $('
'); this.ele.append(whycTreeView); this.container = whycTreeView; this.setContainer(); //this.resize(options); // 给容器内容添加绑定事件 this.ele.off('click.treeView.folder').on('click.treeView.folder', '.sider-menu-folder', function() { $(this).parent().toggleClass('sider-menu-open'); }); this.ele.off('click.treeView.file').on('click.treeView.file', '.sider-menu-file', function() { if(!$(this).hasClass('active')) { _this.ele.find('.sider-menu-file').removeClass('active'); $(this).addClass('active'); } }); }; // 设置resizable _prop.resize = function(options) { var _this = this; var defaults = { minWidth: 200, maxWidth: 400 }; var opts = $.extend({}, defaults, options || {}); if(this.ele.resizable) { this.ele.resizable({ handles: 'e', maxWidth: opts.maxWidth, minWidth: opts.minWidth, alsoResize: this.container, stop:function() { _this.container.height('100%'); } }); } }; // 设置容器的宽度 _prop.setContainer = function() { var eleWidth = this.ele.width(); this.container.width(eleWidth+20); }; // 生成列表 _prop.treeView = function(container, data, flush) { var defaults = { file: false }; // 存在ul且当前不允许刷新 if(container.find('ul').length !=0 && !flush) { return; }else if(flush) { container.text(''); } // 删除等待框 this.delProgress(container); // 生成元素 var _ul = $(''); for(var i=0; i'); var _a = $(''); var _i = $(''); var _span = $(''+_data.txt+''); if(_data.file) { _a = $(''); _i = $(''); } _a.addClass(_data.cla); _a.append(_i); _a.append(_span); _li.append(_a); // 存储生成元素的值 _a.data('attr', _data.attr); _ul.append(_li); } container.append(_ul); }; // 获取folder的一条数据 _prop.getFolder = function (txt, cla, attr) { var tmp = {}; tmp.txt = txt; tmp.cla = cla; tmp.attr = attr; return tmp; }; // 获取file的一条数据 _prop.getFile =function(txt, cla, id, attr) { var tmp = {}; tmp.txt = txt; tmp.cla = cla; tmp.id = id; tmp.file = true; tmp.attr = attr; return tmp; }; // 添加progressBar _prop.addProgress = function(container) { // 存在就不用再添加 if(container.find('.treeView-progressBar-container').length != 0) { return; } var cont = $('
'); var progress = $('
'); var progressLabel = '
加载...
'; progress.append(progressLabel); cont.append(progress); container.append(cont); // 设置样式 progress.progressbar({ value: false, change: function() { progressLabel.text( progressbar.progressbar( "value" ) + "%" ); }, complete: function() { progressLabel.text( "完成!" ); } }); }; // 移除progressBar _prop.delProgress = function(container) { container.find('.treeView-progressBar-container').remove(); }; // 展开指定的 _prop.spreadFolder = function(cla, txt, callback) { var rsCla = '.sider-menu-folder'+'.'+cla; var aFolders = this.ele.find(rsCla); // 没有获取到内容就返回false if(aFolders.length == 0) { return false; } var tgt = aFolders.eq(0); aFolders.each(function() { var _txt = $(this).find('.treeview-txt').text(); if(txt == _txt) { tgt = $(this); } }); tgt.parent().addClass('sider-menu-open'); // 设置回调函数并且设置默认的值 if(callback) { callback(this, tgt.parent(), tgt.data('attr')); } }; _prop.activeFile = function(cla, txt, callback) { var rsCla = '.sider-menu-file'+'.'+cla; var aFiles = this.ele.find(rsCla); // 没有获取到内容就返回false if(aFiles.length == 0) { return false; } var tgt = aFiles.eq(0); tgt.click(); }; // 添加到gl.pages.TreeView的命名空间下 gl.pages.TreeView = TreeView; })(jQuery, window, document, GLOBAL); // 定义页面中的siderbar组件 ;(function($, window, document, gl, undefined) { gl.namespace('pages.siderbar'); // 获取当前选中内容(省-市-机房-电池组) var province = getQueryString('province'); // 省 var city = getQueryString('city'); // 市 var home = getQueryString('home'); // 机房 console.log(province); // 生成一级导航-省 function first(treeView, container) { //treeView.addProgress(container); $.ajax({ type: "post", url: "BattInfAction!serchAllStation", async:true, dataType:'json', data:null, success: function(data){ var rs = JSON.parse(data.result); if(rs.code == 1) { var _data= rs.data; var formatData = []; for(var i=0; i<_data.length;i++) { var __data = _data[i]; var tmp = treeView.getFolder(__data.StationName1, 'province', __data); formatData.push(tmp); } treeView.treeView(container, formatData); treeView.spreadFolder('province', '', firstSpread); }else { } } }); } // 将函数绑定到GLOBAL.pages.siderbar的命名空间下 gl.pages.siderbar.first = first; // 展开一级导航 function firstSpread(treeView, container, data) { second(treeView, container, data, true); } // 生成二级导航-市 function second(treeView, container, data, spread) { // 已经存在 if(container.find('ul').length !=0) { return; } treeView.addProgress(container); $.ajax({ type: "post", url: "BattInfAction!serchStationName2", async:true, dataType:'json', data:"json = "+JSON.stringify(data), success: function(data){ var rs = JSON.parse(data.result); treeView.delProgress(container); if(rs.code == 1) { var _data= rs.data; var formatData = []; for(var i=0; i<_data.length;i++) { var __data = _data[i]; var tmp = treeView.getFolder(__data.StationName2, 'city', __data); formatData.push(tmp); } treeView.treeView(container, formatData); if(spread) { treeView.spreadFolder('city', '', secondSpread, true); } }else { } } }); } // 将函数绑定到GLOBAL.pages.siderbar的命名空间下 gl.pages.siderbar.second = second; // 展开二级导航 function secondSpread(treeView, container, data) { third(treeView, container, data, true); } // 生成 三级导航-机房 function third(treeView, container, data, spread) { // 已经存在 if(container.find('ul').length !=0) { return; } treeView.addProgress(container); $.ajax({ type: "post", url: "BattInfAction!serchStationName3", async:true, dataType:'json', data:"json = "+JSON.stringify(data), success: function(data){ var rs = JSON.parse(data.result); treeView.delProgress(container); if(rs.code == 1) { var _data= rs.data; var formatData = []; for(var i=0; i<_data.length;i++) { var __data = _data[i]; var tmp = treeView.getFolder(__data.StationName, 'home', __data); formatData.push(tmp); } treeView.treeView(container, formatData); if(spread) { treeView.spreadFolder('home', '', thirdSpread, true); } }else { } } }); } // 将函数绑定到GLOBAL.pages.siderbar的命名空间下 gl.pages.siderbar.third = third; // 展开三级导航 function thirdSpread(treeView, container, data) { var tmp = { StationName1: data.StationName1, StationName2: data.StationName2, StationName: data.StationName, StationId: data.StationId }; fourth(treeView, container, tmp, true); } // 生成 三级导航-机房 function thirdFile(treeView, container, data) { // 已经存在 if(container.find('ul').length !=0) { return; } treeView.addProgress(container); $.ajax({ type: "post", url: "BattInfAction!serchStationName3", async:true, dataType:'json', data:"json = "+JSON.stringify(data), success: function(data){ var rs = JSON.parse(data.result); treeView.delProgress(container); if(rs.code == 1) { var _data= rs.data; var formatData = []; for(var i=0; i<_data.length;i++) { var __data = _data[i]; var tmp = treeView.getFile(__data.StationName, 'home', '',__data); formatData.push(tmp); } treeView.treeView(container, formatData); }else { } } }); } // 将函数绑定到GLOBAL.pages.siderbar的命名空间下 gl.pages.siderbar.thirdFile = thirdFile; // 生成 三级导航-电池组 function fourth(treeView, container, data, active) { // 已经存在 if(container.find('ul').length !=0) { return; } treeView.addProgress(container); $.ajax({ type: "post", url: "BattInfAction!serchBattByStation", async:true, dataType:'json', data:"json = "+JSON.stringify(data), success: function(data){ var rs = JSON.parse(data.result); treeView.delProgress(container); if(rs.code == 1) { var _data= rs.data; var formatData = []; for(var i=0; i<_data.length;i++) { var __data = _data[i]; var tmp = treeView.getFile(__data.BattGroupName, 'eleGroup', __data.BattGroupId, __data); formatData.push(tmp); } treeView.treeView(container, formatData); if(active) { treeView.activeFile('eleGroup', ''); } }else { } } }); } // 将函数绑定到GLOBAL.pages.siderbar的命名空间下 gl.pages.siderbar.fourth = fourth; })(jQuery, window, document, GLOBAL);