在做页面的时候为了使页面美化，我们经常会用拼接字符串的方式，动态加载后台的数据，这里我们使用的前台框架是bootstrap，但是很多效果还是要用jquery来实现
（1）方法传参与字符串的拼接 （拼接用的replace）
先声明一个展示数据的页面模型（使用过的模型1）
|
var userModel = "<div class="itemdiv commentdiv" style="margin-left: 7%;">"+
"<div class="row text-left" style="margin-top:5px;">"+
"<label style="color: #737D81;">用户ID:</label>"+
"<label> {userid}</label>"+
"</div>"+
"<div class="row text-left" style="margin-top:5px;">"+
"<label style="color: #737D81;">姓名:</label>"+
"<label> {username}</label>"+
"<button id="{btnId}" class="btn btn-sm btn-info" style="height:30px;margin-left: 20%;">添加</button>"+
"</div>"+
"<div class="row text-left" style="margin-top:5px;">"+
"<label style="color: #737D81;">电话:</label>"+
"<label> {telephone}</label>"+
"</div>"+
"<div class="row">"+
"<div class="hr hr8"></div>"+
"</div>"+
"</div>";
|
然后ajax加载后台数据，然后使用replace，将数据动态替换到页面模型中
|
$.ajax({
url:'<%=basePath%>platform/getUserPad.action',
type : 'POST',
dataType : 'json',
data :{
user_number : $("#form_searchSecurity").val(),
user_name : $("#search_user_name").val(),
},
success : function(data) {
$.each(data, function(index, element) {
//此处替换页面模型中的值
var oneUserInfo = userModel.replace(/{userid}/g,element.userid).replace(/{username}/g,element.username)
.replace(/{telephone}/g,element.telephone)
.replace(/{btnId}/g,'btnId'+index); //给button设置动态ID，不需要可不设置
$("#userModelDiv").append(oneUserInfo); //将页面中的值替换好之后，将这些数据插入页面中需要放这些数据处的div中
document.getElementById('btnId'+index).onclick = function() { //动态添加事件，若在每条数据的后面要添加件事传参，此方式可传一个对象过去
addNumberBySearch(element); //调用这个方法，把对象传过去，
}
//或者是在页面中定义方法，此处传不同参数，同样使用replace方法
});
}
});
function addNumberBySearch(element){
//在此方法中添加操作
element.userid //获取属性值
}
|
拼接字符串的时候，遇到传值的问题，可选择方法传值（可以在button里面onclick=aa(参数1，参数2)）