css: <style> .combo-title { padding-right: 5px } .combo-data > div { display: inline-block } </style> html: <div class="row"> <div class="col-xs-2 topic" style="padding-left: 0">指标公共维度:</div> <div class="col-xs-7 combo-data"> <span class="combo-title">频率:</span> <div id="rotate"></div> <div class="data-combo-year"></div>//开始年 <div> <div class="data-combo"></div>//开始月或季节 </div> <span style="color:darkgreen">———</span> <div class="data-combo-year"></div>//结束年 <div> <div class="data-combo"></div>//结束月和季节 </div> </div> </div>
js 代码:一定要小心使用onSelect,因为它在下拉框重新加载或是加载时,会执行里面的内容,在做联动框时,得好好注意!,为了避免可以使用onChange,或是onHidePanel.
var $dataCombo = $(".data-combo"), $yearCombo = $(".data-combo-year"); var year_f, year_last, year_s; var yearArr = []; var month = [ {id: '1', text: '1月'}, {id: '2', text: '2月'}, {id: '3', text: '3月'}, {id: '4', text: '4月'}, {id: '5', text: '5月'}, {id: '6', text: '6月'}, {id: '7', text: '7月'}, {id: '8', text: '8月'}, {id: '9', text: '9月'}, {id: '10', text: '10月'}, {id: '11', text: '11月'}, {id: '12', text: '12月'} ]; var roteArr = [{"id": 1, "text": "年份", "value": "1"}, {"id": 2, "text": "季度", "value": "2"}, {"id": 3, "text": "月份", "value": "3"}];/*频率选择数组*/ var season = [ {id: '1', text: '1季度'}, {id: '2', text: '2季度'}, {id: '3', text: '3季度'}, {id: '4', text: '4季度'} ];/*季度*/ getYears();/*获得近4年*/ function getYears() { var nowDate = new Date(); year_f = nowDate.getFullYear(); year_last = year_f - 1; year_s = year_f - 3; var id, text; for (var y = year_f; y >= year_s; y--) { id = y.toString(); text = id + "年"; yearArr.push({id: id, text: text}); } }
/*默认第二个年的数组,包含今年和去年*/
var secondYear = yearArr.slice(0, 2);
var is_loadWhole=true;
function ComboChange(monNode,oneYear,twoYear){
this.rotateId=$("#rotate").combobox("getValue");/*获取频率*/
/*得到要操作的月或季度数组*/
//第二个月
this.endMon=parseInt($dataCombo.last().combobox("getValue"));
//开始月
this.startMon= monNode ? parseInt(monNode) : parseInt($dataCombo.first().combobox("getValue"));
//开始年
this.startYear=oneYear?parseInt(oneYear):parseInt($yearCombo.first().combobox("getValue"));
// 结束年
this.endYear=twoYear?parseInt(twoYear):parseInt($yearCombo.last().combobox("getValue"));
}
ComboChange.prototype.getRotate=function(){
if (this.rotateId == 3) {
return month.slice();
} else if (this.rotateId == 2) {
return season.slice();
}
};
ComboChange.prototype.firstMonChange = function () {
if(this.startYear==this.endYear){
var secondMonArr = this.getRotate().slice(this.startMon - 1);/*第二个月或季度显示的数组,从star开始*/
is_loadWhole=this.startMon==1?true:false;/*加载的不是所有月*/
$dataCombo.last().combobox("loadData", secondMonArr);
if (this.startMon > this.endMon) {/*前面的月或季度大于后面的*/
$dataCombo.last().combobox("setValue", this.startMon); /*同步两个*/
}
}
};
ComboChange.prototype.secondYearChange=function () {
if(this.endYear==this.startYear){
if(this.rotateId==2 || this.rotateId==3){
var secondMonArr = this.getRotate().slice(this.startMon - 1);/*第二个月或季度显示的数组,从star开始*/
is_loadWhole=this.startMon==1?true:false;/*加载的不是所有月*/
$dataCombo.last().combobox("loadData", secondMonArr);
if(this.startMon>this.endMon){
$dataCombo.last().combobox("setValue", this.startMon); /*同步两个*/
}
}
}else{
if(this.rotateId==2 || this.rotateId==3){
if(! is_loadWhole){
is_loadWhole=true;
$dataCombo.last().combobox("loadData", this.getRotate());
}
}
}
};
ComboChange.prototype.firstYearChange=function () {
var self=this;
var secondYearArr=yearArr.slice(0, (year_f - self.startYear + 1));/*第二个年要加载的*/
$yearCombo.last().combobox("loadData", secondYearArr);
if (self.startYear >=self.endYear) {
if(self.startYear!=self.endYear){/*同步年份*/
$yearCombo.last().combobox("setValue",this.startYear);
}
if(this.rotateId==2 || this.rotateId==3){
var secondMonArr = self.getRotate().slice(self.startMon - 1);/*第二个月或季度显示的数组,从star开始*/
is_loadWhole=self.startMon==1?true:false;/*加载的不是所有月*/
$dataCombo.last().combobox("loadData", secondMonArr);
if(self.startMon>self.endMon){
$dataCombo.last().combobox("setValue", self.startMon); /*同步两个*/
}
}
} else {
if(this.rotateId==2 || this.rotateId==3){
if (!is_loadWhole){
is_loadWhole=true;
$dataCombo.last().combobox("loadData",self.getRotate());
}
}
}
};
/*频率框加载*/
var rotateSel;
$("#rotate").combobox({
valueField: "id",
textField: "text",
data: roteArr,
editable: false,
70,
height: 30,
panelWidth: 70,
value:"3",
panelHeight: 'auto',
onLoadSuccess:function(){
console.log($("#rotate").combobox("options"));
},
onChange:function (newVal,oldVal) {
if(newVal!=oldVal){
if (newVal == 1) {/*1:频率为年;2:季节;3:月份*/
$dataCombo.parent().hide();
} else {
var firstArr;
firstArr=newVal==2?season:month;
$dataCombo.combobox("clear");
$dataCombo.parent().show();
is_loadWhole=true;
$dataCombo.combobox("loadData", firstArr);
$dataCombo.combobox("setValue", "1");
}
}
},
formatter: function (row) {
return "<span class='glyphicon glyphicon-check'> " + row.text + "</span>"
},
onHidePanel:function () {
},
onSelect: function (recoder) {
rotateSel=recoder;
}
});
/*结束-月框加载*/
$dataCombo.last().combobox({
valueField:"id",
textField:"text",
data: month,
editable: false,
80,
height: 30,
panelWidth: 80,
panelHeight: 'auto',
value:"1",
onLoadSuccess:function (data) {
var text=is_loadWhole?"整年":"不完整";
alert(text);
},
formatter: function (row) {
return "<span class='glyphicon glyphicon-check'> " + row.text + "</span>"
}
});
/*开始-月框加载*/
$dataCombo.first().combobox({
valueField:"id",
textField:"text",
data:month,
value:"1",
editable:false,
80,
height: 30,
panelWidth: 80,
panelHeight: 'auto',
formatter: function (row) {
return "<span class='glyphicon glyphicon-check'> " + row.text + "</span>"
},
onChange:function(newVal,oldVal) {
if(newVal!=oldVal){
var combo= new ComboChange(newVal,null,null);
combo.firstMonChange();
}
},
onHidePanel:function () {
/* var combo= new ComboChange(firstMonSel,null,null);
combo.firstMonChange();*/
},
onSelect: function (node){
}
});
/*结束年份*/
$yearCombo.last().combobox({
valueField: "id",
textField: "text",
data: secondYear,
value: year_f,
editable: false,
80,
height: 30,
panelWidth: 80,
panelHeight: 'auto',
formatter: function (row) {
return "<span class='glyphicon glyphicon-check'> " + row.text + "</span>"
},
onLoadSuccess:function () {
},
onChange:function(newVal,oldVal) {
if(newVal!=oldVal){
var combo = new ComboChange(null, null, newVal);
combo.secondYearChange();
}
},
onHidePanel:function () {
/*var combo = new ComboChange(null, null, endYearSel);
combo.secondYearChange();*/
},
onSelect: function (node) {
}
});
/*开始年份*/
$yearCombo.first().combobox({
valueField:"id",
textField: "text",
data:yearArr,
value:year_last,
editable: false,
80,
height: 30,
panelWidth: 80,
panelHeight: 'auto',
onLoadSuccess:function(){
},
formatter: function (row) {
return "<span class='glyphicon glyphicon-check'> " + row.text + "</span>"
},
onSelect: function (node) {
var combo=new ComboChange(null,node.id,null);
combo.firstYearChange();
}
});