ajax+jquery+弹窗实现添加数据功能

下面来记录一下如何传递给后台一个项目id，然后获取整个项目的工作记录并且动态生成在列表中，而后弹窗页面在加载时会弹出想要的信息，例子图如下：

首先需要从后台获取数据，用到的方法是getTopRow()将项目id传给后台获取相应的json记录字段：

function getTopRow(){ 
    var proid=$('#sessionproId', parent.document).html(); 
    var proId={"proId":proid};  //
    $.ajax({
         type: "POST",
         url: "/s305/getUserWorkHourById",  //获取全部工作时间的记录
         data: proId,
         sync : false,
         complete: function (data1) {
             getTopsdd(data1.responseJSON);   
         },
         error: function (msg) {
         alert(msg);
         }
         }); 
     }

在ajax中调用getTopsdd(data)方法，该函数主要是一个循环的方法用来循环的调用重要的函数getTopdata(data,i)，即把每条记录动态生成的函数写在外面不停的调用这个方法效率更加高一点。

 

function getTopsdd(data) {
    for(var i=0;i<data.length;i++){getTopdata(data[i],i);}
    }

 

function getTopdata(dataOne,i){
        var data=[{"value": dataOne.weekWorkTime[0].value,"name": dataOne.weekWorkTime[0].time},  
                  {"value": dataOne.weekWorkTime[1].value,"name": dataOne.weekWorkTime[1].time}, 
                  {"value": dataOne.weekWorkTime[2].value,"name": dataOne.weekWorkTime[2].time}, 
                  {"value": dataOne.weekWorkTime[3].value,"name": dataOne.weekWorkTime[3].time}, 
                  {"value": dataOne.weekWorkTime[4].value,"name":dataOne.weekWorkTime[4].time}, 
                  {"value": dataOne.weekWorkTime[5].value,"name": dataOne.weekWorkTime[5].time}, 
                  {"value": dataOne.weekWorkTime[6].value,"name": dataOne.weekWorkTime[6].time}];
         var newRow='<tr><td class="table_mem">'+dataOne.userId
         +' <input type="button" value="show" class="butt" id="butt'+i+'">'
         +'</td><td class="table_time">'+data[0].value+'</td><td class="table_time">'+data[1].value
         +'</td><td class="table_time">'+data[2].value+'</td><td class="table_time">'+data[3].value
         +'</td><td class="table_time">'+data[4].value+'</td><td class="table_time">'+data[5].value
         +'</td><td class="table_time">'+data[6].value+'</td></tr>';  
         $('#table').append(newRow); 
         $("#butt"+i).click(function(){
                              dataShow(data);
                              $('#container').dialog('open');
        
    });    
}

getTopdata(dataOne,i)函数主要是把获取的json的字段中拿出需要的信息，这里需要的信息是指需要的是weekWorkTime里面的内容，把它放到一个新的data里面。最后的点击一个$("#butt"+i).click（）这里的butti是一个动态生成里面的id
点击这个按钮就出触发dataShow函数建立一个条形图在弹窗的固定位置再执行下面那个打开弹窗的指令就能将弹窗打开，此时图表在打开之前就已经在弹窗区域生成了。

注意这段话' <input type="button" value="show" class="butt" id="butt'+i+'">' 这里是增加动态id的写法

最后在函数中调用如下方法把弹窗打开：

$(document).ready(function(){
        $('#container').dialog({
            autoOpen:false
        });        });

 

 

获取的字段如下：

[{"userId":1,"weekWorkTime":[{"time":"mo","value":7},{"time":"tu","value":0},{"time":"we","value":0},{"time":"th","value":19},{"time":"fr","value":9},{"time":"sa","value":0},{"time":"su","value":0}]},{"userId":2,"weekWorkTime":[{"time":"mo","value":4},{"time":"tu","value":8},{"time":"we","value":0},{"time":"th","value":6},{"time":"fr","value":8},{"time":"sa","value":14},{"time":"su","value":0}]}]