javascript遇到的问题:
给数据动态的添加按钮同样也是先用ajax请求到数据,在成功事件里面用for循环遍历拆分这个数组,让我们可以顺利的拿到想要的字段,然后把按钮动态的写进空数组里面。
①.不会把数据动态的加载到页面上。
②.不会对动态加载的按钮添加点击事件。
解决方案:
①.不会把数据动态的加载到页面上。
$.ajax({
url : '<%=request.getContextPath() + "/Message/Search"%>',
type : 'POST',
dataType : 'json',
success : function(data){
var htmlText = '';
for(var i=0;i<data.length;i++){
{
htmlText += '<div data-search-create-panel="degreeCreatePanel" style="margin-bottom:15px;" title="每日信息结果" >';
htmlText += '<h1 style="font-size:16px;float:left;margin-left:15px;">' + data[i].createdDate + '</h1>';
htmlText += '<div style="margin-left:10px;width:300px;float:left;font-size:14px;margin-top:2px;">' + data[i].name + '</div>';
htmlText += '<button data-search-centent-edit="linkbutton" style="margin-top:4px;width:80px;" οnclick="edit(\''+ data[i].id +'\')">编辑</button>';
htmlText += '<span style="margin-left:10px;"><button data-search-centent-delete="linkbutton" style="margin-top:4px;width:80px;" οnclick="deleteMessage(\''+ data[i].id +'\')">删除</button></span>';
htmlText += '<ul class="degreeCreate-centent" style="padding-top:10px;padding-left:15px;padding-bottom:8px;">';
htmlText += '<li style="margin-left:8px;margin-top:6px;">';
htmlText += data[i].description;
htmlText += '</li>';
htmlText += '</ul>';
htmlText += '<div style="margin-left:290px;margin-bottom:15px;">';
htmlText += '编辑人:<span style="margin-right:20px;">' + data[i].projectLoaderName + '</span>';
htmlText += '编辑日期:<span>' + data[i].modifiedOn +'</span>';
htmlText += '</div>';
htmlText += '</div>';
}
$('#dailyInformationCentent').html(htmlText);输出htmlText这个数组到id为dailyInformationCentent的容器内。
$('div[data-search-create-panel]').panel();
$('button[data-search-centent-edit]').linkbutton();
$('button[data-search-centent-delete]').linkbutton();
}
}
});
ajax请求到后台的数据,在成功之后新建一个空的字符串,然后对数据进行遍历,用+=的方式把布局格式及内容写进这个空的字符串内,在需要显示这段数据的地方建立一个DIV,把这个储存了内容的数组输出到div里面。
ajax一共请求到4条数据,被动态的加载到了页面里。
data-search-create-panel
对于这个东西,我自己的理解是类似与ID的东西,可以自行进行定义。因为这里是自己定义的,它被当作id来用了。
②.不会对动态加载的按钮添加点击事件。
$.ajax({
url : '<%=request.getContextPath() + "/Ticket/SelectListByDebugversionId"%>',
type : 'POST',
dataType : 'json',
data : {
debugversionId : '<%=request.getParameter("id")%>',
},
success : function(data) {
var htmlTxt = '';
for (i = 0; i < data.length; i++) {
htmlTxt += '<button data-search-centent-designatedMember="linkbutton" style="width:105px;" real-value="' + data[i].Value + '" οnclick="test1(this)">' + data[i].Text + '<tton>';
}
$('#designatedMember').html(htmlTxt);
$('button[data-search-centent-designatedMember]').linkbutton();
}
});
function test1(obj) {
$.ajax({
url : '<%=request.getContextPath() + "/Ticket/Search"%>',
type : 'POST',
dataType : 'json',
data : {
userId : $(obj).attr("real-value")
},
success : function(data) {
$('#CurrentTicket').datagrid('loadData',data);
},
error : function(){
alert('数据异常!')
}
});
}
给数据动态的添加按钮同样也是先用ajax请求到数据,在成功事件里面用for循环遍历拆分这个数组,让我们可以顺利的拿到想要的字段,然后把按钮动态的写进空数组里面。
这里请求的内容是一个Text,一个Value,页面需要显示text故而加载text,而点击按钮事件需要传递ID给后台(数组的Value属性)所以要在button里面加一条value进去。
real-value="' + data[i].Value + '"
这样就加了一条Value进去,切记:加载变量到value里面,需要多加一个单引号:real-value = "
' + data[i].Value + ' ",不加的话会被认为是一个字符串,如果输出的会把data[i].Value直接输出出来。现在button里面就动态加载了Value值,点击的话再添加一个点击事件进去,这里我动态加载的数据,按钮也是根据数据增加或者减少的,所以不知道点击的是那个,所以要在点击事件中添加一个
this参数进去,this参数就是告诉他们我点击的是那个,这样我就可以顺利的拿到对应按钮的Value了,然后可以进行其他的工作。这里我要进行的是请求ajax。设置一个全局变量来进行ajax的数据传输。全局变量中设置一个参数用来接受点击事件中的this参数,获取点击的按钮的value。在需要传递的数据里面用attr()方法拿到按钮中的Value值。
$().attr(属性名)jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQueryDOM操作中会经常用到attr()。
两次点击的按钮的ID会根据onclick事件里面的this参数变。