• 年,月 ,季节 下拉框


    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'>&nbsp;" + 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'>&nbsp;" + 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'>&nbsp;" + 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'>&nbsp;" + 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'>&nbsp;" + row.text + "</span>"
    },
    onSelect: function (node) {
    var combo=new ComboChange(null,node.id,null);
    combo.firstYearChange();
    }
    });

      

  • 相关阅读:
    转载.net泛型理解说明
    转载Repository 和Unit of work的使用说明
    libtool的工作原理
    带有通配符的字符串匹配算法-C/C++
    linux core文件机制
    grep多条件和sed合并两行
    BZOJ 3232 圈地游戏 (分数规划 + SPFA找负/正环)
    CSP2019 D1T3 树上的数 (贪心+并查集)
    CSP-S 2019 第二轮 退役记
    object-c中的int NSInteger NSUInteger NSNumber辨析
  • 原文地址:https://www.cnblogs.com/S-Ekin/p/7439669.html
Copyright © 2020-2023  润新知