;(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 = $('<div class="whyc-sider-menu"></div>');
|
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 = $('<ul></ul>');
|
for(var i=0; i<data.length; i++) {
|
var _data = $.extend({}, defaults, data[i]);
|
// 设置内容容器
|
var _li = $('<li></li>');
|
var _a = $('<a href="javascript:;" class="sider-menu-folder"></a>');
|
var _i = $('<i class="fa fa fa-caret-right"></i>');
|
var _span = $('<span class="treeview-txt">'+_data.txt+'</span>');
|
if(_data.file) {
|
_a = $('<a href="javascript:;" id="'+_data.id+'" class="sider-menu-file"></a>');
|
_i = $('<i class="fa"></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 = $('<div class="treeView-progressBar-container" style="margin-left: 15px; margin-right: 15px;"></div>');
|
var progress = $('<div class="treeView-progressBar"></div>');
|
var progressLabel = '<div class="progress-label">加载...</div>';
|
|
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();
|
console.info();
|
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');
|
// 生成一级导航-省
|
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);
|
