BandTree = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
config.css = util.combine(config.css, {
|
container: null
|
});
|
|
this.popmenu = config.popmenu;
|
this.firstBand;
|
this.selected = {};
|
this.buckets = null;
|
this.bands = [];
|
this.fields = [];
|
this.itemIndent = 10;
|
|
Control.call(this, config);
|
},
|
|
getContainerTemplate: function() {
|
var template = $(BandTree_Template.container.join(""));
|
return template;
|
},
|
|
createContent: function() {
|
if (this.config.items) {
|
this.load(this.config.items);
|
}
|
},
|
|
load: function(itemOptions) {
|
this.clear();
|
this.createHolder();
|
this.createItems(this, this.container, itemOptions);
|
this.onBandSelected(this.firstBand);
|
},
|
|
createItem: function(container, option) {
|
return this.createBucket(container, option);
|
},
|
|
createBucket: function(container, option) {
|
//1. bucket
|
var bucket = $(BandTree_Template.bucket.join(""));
|
this.buckets.push(bucket);
|
bucket.body = $("#body", bucket);
|
|
//2. bucket click event
|
var me = this;
|
bucket.click(function() {
|
me.onBacketSelected(bucket);
|
});
|
|
//3. text
|
var text = bucket.text = $("#text", bucket);
|
text.html(option.name);
|
|
//4. bands
|
var bands = option.children;
|
|
if (bands && bands.length) {
|
var max = bands.length;
|
|
for (var i = 0; i < max; i++) {
|
var bandOption = bands[i];
|
var band = this.createBand(bucket, bandOption, i);
|
|
if (!bucket.firstBand) {
|
bucket.firstBand = band;
|
}
|
}
|
}
|
|
container.append(bucket);
|
return bucket;
|
},
|
|
createBand: function(bucket, option, idx) {
|
//1. band
|
var band = $(BandTree_Template.band.join(""));
|
if (this.firstBand == null) {
|
this.firstBand = band;
|
}
|
band.attr("id", "band_" + idx);
|
band.header = $("#header", band);
|
|
band.body = $("#band_body", band);
|
band.body.hide();
|
band.option = option;
|
|
//2. band click event
|
var me = this;
|
band.click(function(e) {
|
me.onBandSelected(band);
|
e.stopPropagation();
|
});
|
|
//3. text
|
var text = band.text = $("#text", band);
|
text.html(option.name);
|
|
//4. fields
|
var fields = option.children;
|
fields = fields.filter(one =>{
|
return one.isshow
|
})
|
if (fields && fields.length) {
|
var max = fields.length;
|
|
for (var i = 0; i < max; i++) {
|
var field = fields[i];
|
this.createOneField(band.body, field);
|
}
|
}
|
|
bucket.append(band);
|
this.bands.push(band);
|
|
return band;
|
},
|
|
createOneField: function(band, option) {
|
var field = $(BandTree_Template.field.join(""));
|
field.body = $("#body", field);
|
|
var text = field.text = $("#text", field);
|
text.html(option.name);
|
|
field.usedFlag = $("#used", field);
|
field.option = option;
|
field.band = band;
|
|
if (option.isused) {
|
field.addClass("field-used");
|
field.usedFlag.show();
|
}
|
|
if (this.popmenu) {
|
this.popmenu.linkTo(field.body, this.createOptionInfoByField(field));
|
}
|
|
band.append(field);
|
|
|
this.fields.push(field);
|
},
|
|
createHolder: function() {
|
var holder = this.holder = $(BandTree_Template.holder.join(""));
|
holder.body = $("#body", holder);
|
holder.text = $("#text", holder);
|
},
|
|
onBacketSelected: function(bucket) {
|
if (!bucket) {
|
return;
|
}
|
|
this.onBandSelected(bucket.firstBand);
|
},
|
|
onBandSelected: function(band) {
|
if (!band || this.selected.band == band) {
|
return;
|
}
|
|
if (this.selected.band) {
|
this.changeBandState(this.selected.band, "unselected");
|
}
|
|
this.changeBandState(band, "selected");
|
this.selected.band = band;
|
},
|
|
onFieldSelected: function(band, field) {
|
|
},
|
|
changeBandState: function(band, event) {
|
if ("selected" == event) {
|
band.body.show();
|
// band.arrow.addClass(config.css.openItemArrow);
|
return;
|
}
|
|
if ("unselected" == event) {
|
band.body.hide();
|
// item.arrow.removeClass(config.css.openItemArrow);
|
// item.arrow.addClass(config.css.itemArrow);
|
return;
|
}
|
},
|
|
findDragElInfo(holder, dragEl) {
|
if (!dragEl || !this.bands) {
|
return;
|
}
|
let dragField = $(dragEl);
|
let dragFind = this.fields.find(one => {
|
return one.is(dragField);
|
});
|
return this.createOptionInfoByField(dragFind);
|
},
|
|
createOptionInfoByField(dragField) {
|
if(!dragField || !dragField.option || !dragField.band.prevObject.option){
|
return null;
|
}
|
let bandOption = dragField.band.prevObject.option;
|
let fieldOption = dragField.option;
|
let defaultExpression = this.getExpressionSegment(bandOption.name) + "." + this.getExpressionSegment(fieldOption.name);
|
let defaultCode = bandOption.code + "_" + fieldOption.code;
|
let option = {
|
name: fieldOption.name,
|
bandcode: bandOption.code,
|
bandcolumn: fieldOption.code,
|
expression: defaultExpression,
|
code: defaultCode
|
};
|
return option;
|
},
|
|
getExpressionSegment(val) {
|
if(val == null) {
|
return val;
|
}
|
return "[" + val + "]";
|
},
|
|
findFieldByBand(band, dragEl) {
|
if(band == null || dragEl == null){
|
return null;
|
}
|
for (let i = 0; i < band.fields.length; i++) {
|
let field = band.fields[i];
|
if(field === $(dragEl)) {
|
return field;
|
}
|
}
|
},
|
|
getHolder(text, dragEl) {
|
this.holder.text.html(text);
|
let holder = this.holder.get(0);
|
let cloneHolder = holder.cloneNode(true);
|
cloneHolder.option = this.findDragElInfo(holder, dragEl);
|
return cloneHolder;
|
},
|
|
getBand(idx) {
|
return this.bands[idx];
|
},
|
|
clear: function() {
|
this.container.empty();
|
this.selected = {};
|
this.buckets = [];
|
}
|
|
});
|
|
|
//*************************************
|
BandTree_Template = {};
|
|
BandTree_Template.container = [
|
'<ul class="band-tree"></ul>'
|
];
|
|
BandTree_Template.bucket = [
|
'<li class="band-tree-bucket">',
|
'<div id="body" class="bucket-header">',
|
'<i class="icon iconfont icon-bucket"></i> ',
|
'<span id="text" class="band-tree-text"></span>',
|
'</div>',
|
'</li>'
|
];
|
|
BandTree_Template.band = [
|
'<li class="band-tree-band">',
|
'<div id="header" class="band-header">',
|
'<i class="icon iconfont icon-band"></i> ',
|
'<span id="text" class="band-tree-text"></span>',
|
'<i id="arrow" class="band-arrow icon iconfont icon-arrow-down"></i>',
|
'</div>',
|
'<div id="band_body" class="band-body">',
|
'</div>',
|
'</li>'
|
];
|
|
BandTree_Template.field = [
|
'<div class="band-tree-field">',
|
'<span id="used" class="used-flag iconfont icon-field"></span>',
|
'<div id="body" class="field-body">',
|
'<i class="icon iconfont icon-field"></i> ',
|
'<span id="text" class="band-tree-text"></span>',
|
'</div>',
|
'</div>'
|
];
|
|
BandTree_Template.item_arrow = [
|
'<i id="icon" class="band-tree-body-arrow iconfont"></i> '
|
];
|
|
BandTree_Template.holder = [
|
'<div class="band-tree-holder">',
|
'<div id="body" class="holder-body">',
|
'<i class="icon iconfont icon-field"></i> ',
|
'<span id="text" class="band-tree-text"></span>',
|
'</div>',
|
'</div>'
|
];
|
