动态创建一组按钮,并为其绑定变量参数事件方法

做项目时,遇到一个比较奇怪的需求,需要用highChart作图,但是由于横坐标是公司的部分职级的人员,且人员数目较多,这样就会造成作出来的图好长,
在有限的屏幕上显示不全。于是客户要求,可以将所有人员根据人数的多少自动分成几组,每一组用一个按钮来控制。这样每一个按钮就可以显示一张图了。
效果如下:

这里写图片描述

就是达到图上的效果啦。。。
但是现在问题是人员总数并不是固定的,可能随时在变,所以这个按钮的分组值也是要随时变化的。所以必须用变量来代替。
所以,我们必须根据人员的总数动态添加按钮,并按照每组12个人来进行分组,在调用显示统计图时,
可以根据按钮的value值来进行调用具体是显示第几个人到第几个人的统计信息。
于是,我尝试了一下的方法来解决:
$(function () {
    var random = Math.random();//随机数 
    $.ajax({
        type:"get",
        datatype:"text",
        url:basePath+"TVShowAction/Account.do?random="+random,
        async:false,
        success:function(data){
            if(data<=15){
                showChart(0);
            }else{
                var count=Math.ceil(data/12);
                var div=document.getElementById("button");
                var divSum=document.getElementById("buttonSum");
                for(var i=1;i<=count;i++){
//              var input=document.createElement('input');
//              input.setAttribute("type", "button");
//              input.setAttribute("value", (i-1)*12+"—"+i*12);

//              input.onclick = function(){
//                 showChart((i-1)*12,i*12);
//                    };
                   // div.appendChild(input)
                    //showChart((i-1)*12,i*12);
                   var htm = "<input type='button' value='"+((i-1)*12)+"-"+(i*12)+"' onclick='showChart("+((i-1)*12)+","+(i*12)+")'>";
                   var htmSum= "<input type='button' value='"+((i-1)*12)+"-"+(i*12)+"' onclick='showChartSum("+((i-1)*12)+","+(i*12)+")'>";
                   div.innerHTML+=htm;  
                    divSum.innerHTML+=htmSum;
                }       

            }               
        }       
    })           
}); 
看到代码中红色被注释掉的部分,那是我最开始的解决方案,但是很不幸,没有达到我的需求。为什么呢?如果你亲自试过这种方式的话,
你一定能了解,在动态为button绑定事件方法时,button中事件上绑定的方法在绑定时是不识别的,也就是系统在绑定事件时,
只是告诉你,button上有一个绑定的事件,告诉你事件名字,但是事件里面具体的是怎么样赋值或者执行的,系统在绑定时是好不关心的!
我想,这就是所谓的事件驱动吧!
在绑定时,并不识别,也就是对变量不进行记忆,事件驱动,触发的时候才会去取值。在执行时,我们发现,每次i的取值,都是循环到最后时+1,所以这种方式,行不通!
于是,我想可不可以用一种方法,来将这个变量记住。于是,想到了利用拼HTML的方式,拼的方式虽然也会给button来绑定事件,
但是这样绑定事件时静态的。就相当于,将变量记忆在页面上了。所以可以达到我想要的效果了!
看一下第一个按钮显示的效果吧!

这里写图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值