如何在AJAX 回调函数用不匹配的JSON给表格赋值?

初始数据会很多么？如果不会很多的话，建议你把初始数据整理一下，存一个数组或者放到一个hidden的input中，回头对比会更方便，但是注意添加或删除数据时，维护一下你初始存储的数据。

if(data!=null && data.length!=0){
    var html="";
    for (var i = 0; i <data.length; i++) {
        html+="<tr>";
        html+='<td><input type="checkbox"/></td>';
        html+='<td>'+data[i].bid+'</td>';
        html+='<td>'+data[i].bname+'</td>';
        html+="</tr>"
    };
    $("#mintab tbody").append(html);
}
  }

拼接字符串，然后append到表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:blue;color:#fff;font-size:26px;line-height:100px;text-align:center; margin-bottom:20px;}
.text{height:30px;font-size:20px;line-height:30px;}
</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){

var data=[{"bid":"aa","bname":"xx","bpa":"123","age":"18"},{"bid":"bb","bname":"yy","bpa":"1234","age":"18"},{"bid":"cc","bname":"cc","bpa":"1235","age":"18"}];
var content='';
$.each(data,function(i,ele){
content+='<tr><td><input type="checkbox"/></td><td>'+ele.bpa+'</td><td>'+ele.bname+'</td></tr>';
})
$('#mintab').append(content);
})</script>
</head><body>
<table id="mintab" class="easyui-datagrid" border="0"  style="width:400px ;height:150px"dataoptions="pagination:true,fitColumns:false,toolbar:'#tb'">
     <thead>
        <tr>
            <th data-options="field:'chec',width:100,align:'center'"><input type="checkbox"/></th>
            <th data-options="field:'id',width:140,align:'center'">编号</th>
            <th data-options="field:'name',width:160,align:'center'">名称</th>
        </tr>
    </thead>
    <tbody >
    </tbody>
   </table>
</body>
</html>

$.ajax({
type:"post",
url:"url.action",
dataType:"json",
data:{id:tid},
success: function(data){
data =eval(data);
if(data!=null && data.length!=0){
var newDate={};
newDate.total=data.length+1;
newDate.rows=data;$('#dg').datagrid("loadData",newDate);
}
}
});

不是有拼接吗，你又多少列，就拼出多少个td，然后组合上json中的数据，拼接成表格的行，然后append到表格你根据你的需求调整这一句即可有几列就拼几个tdcontent+='<tr><td><input type="checkbox"/></td><td>'+ele.bpa+'</td><td>'+ele.bname+'</td></tr>';

$.ajax({
type:"post",
url:"url.action",
dataType:"json",
data:{id:tid},
success: function(data){
data =eval(data);
if(data!=null && data.length!=0){
$.each(data,function(k,v){
var newDate={};
newDate.id=v.bid;
newDate.name=v.bname;
$('#dg').datagrid("appendRow",newDate);

});

}
}
});

$.ajax({
type:"post",
url:"url.action",
dataType:"json",
data:{id:tid},
success: function(data){
data =eval(data);
if(data!=null && data.length!=0){
var newDate={};
var ay={};
newDate.total=data.length+1;
var arrry=[];
$.each(data,function(k,v){
var newDate={};
ay.id=v.bid;
ay.name=v.bname;

arrry.push(ay);

});
newDate.rows=arrry;$('#dg').datagrid("loadData",newDate);
}
}
});这是用新数据把原来的表格覆盖

包括checkbox总共有5列
          var content='';
    $.each(data,function(i,ele){
        content+='<tr><td><input type="checkbox"/></td><td>'+ele.bpa+'</td><td>'+ele.bname+'</td><td>'+ele.accountID+'</td><td>'+ele.errorMessage+'</td></tr>';
    })出来就这样。

这个如果用拼行情况下，你的用开发工具看看那个表格是存数据的，因为easyUi 在页面上会生成很多表格。

拼接应该没错  就是页面看起来有3个表格  用谷歌看了下 <div class="datagrid-view1”>...</div>左边一个表格
<div class="datagrid-view2“>...</div>右边一个表格  我要放数据在这里
还有下面一个表格  这个怎么解决

昨天我也问了你这个问题只是没分重新弄了个帐号  我的是需要用拼接的方式，我以前也是用的拼接，但是这里会多出两个表格，把样式都打乱了<div class="datagrid-view1”>...</div>左边一个表格
<div class="datagrid-view2“>...</div>右边一个表格  我要放数据在这里
还有下面一个表格  这个怎么解决

昨天我也问了你这个问题只是没分重新弄了个帐号  我的是需要用拼接的方式，我以前也是用的拼接，但是这里会多出两个表格，把样式都打乱了<div class="datagrid-view1”>...</div>左边一个表格
<div class="datagrid-view2“>...</div>右边一个表格  我要放数据在这里
还有下面一个表格  这个怎么解决你就用开发工具看看哪个是存数据的表格，表格上有class  ，作为选择器选中这个表格，把你拼的串放进去就行了，你要注意行的样式和的生成的一样。

appendTo(".datagrid-btable tbody")我这版本装数据的表格就是这个，不知道你的是什么，你自己看看。

大哥还有个问题你看

下面的数据跟表头的背景一样
也就是数据是在<div class="datagrid-header">里面而不是在<div class="datagrid-body"> 里面（空白处）

自己生成的有样式 <tr class='datagrid-row'></tr> 你吧这个样式加到你的tr上试试。

不行看起来感觉是把数据加到表头了一样而不是tbody里面

用ajax的时候，特别要留意的一点，就是异步的问题，看你代码，貌似要根据返回值判断以后来进行操作，应采用同步执行。特别是ajax嵌套的情况。赋值给表格，本人的建议是，返回一个类json对象的字符串，如果你把返回的类数组对象放到一个对象变量里缓存，就容易理解了。比如{"table":[{"bid":"aa","bname":"xx","bpa":"123","age":"18"},{"bid":"bb","bname":"yy","bpa":"1234","age":"18"},{"bid":"cc","bname":"cc","bpa":"1235","age":"18"}]}由于你ajax方法指定的datatype为json，json的解析已经交给浏览器做了，这也是推荐的做法。
假设你返回的缓存变量为data，那么返回的数据，可以这样取data.Table[0].bid
不懂追贴

看起来就是表格内容不一样你加的地方不对吧你看看你的存放数据的表格的ID 和class 是什么，不同版本有差异，我用是没问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../jquery/jquery-easyui-1.3.3/demo/demo.css">
<script type="text/javascript" src="../jquery/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>  <script type="text/javascript">
$(function(){$('#dg').datagrid({ url:'json.json',
onLoadSuccess:onLoadSuccess,
pagination:true,
pagePosition:"top",
toolbar: [{
  iconCls: 'icon-edit',
  handler: function(){alert('edit')}
  },'-',{
  iconCls: 'icon-help',
  handler: function(){alert('help')}
  }],
checkOnSelect:true,
columns:[[
{field:'aa',checkbox:true},
{field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] });
})
function onLoadSuccess(data){//每次删除和添加后触发该函数var tr2=$("<tr class='datagrid-row'></tr>");$(".datagrid-row").each(function(k,v){//遍历所有行
$("td",this).each(function(key,val){
var td=$("td",tr2.get(0)).eq(key);
if(td.text()!=null&&td.text()!='undefined'&&td.text()!=""){

td.text(parseFloat(td.text())+parseFloat($(val).text()));

}else{
$("<td>"+$(val).text()+"</td>").appendTo(tr2);}
});
});tr2.appendTo(".datagrid-btable tbody");}
</script></head>
<body>
<table id="dg"></table>

</body>
</html>
以下是测试json
{"total":44,"rows":[{"code":"001","name":"3","price":"44355"},{"code":"001","name":"5","price":"44355"},{"code":"001","name":"4","price":"44355"},{"code":"001","name":"7","price":"44355"}]}

如果返回值为1就开门，如果返回值为0就开门
返回值就是一个逻辑判断的依据
由于ajax默认是异步，那么第一个开门的也许还没有得到1或者0，第二个人就已经进来了。而你的本意是要关门，不让第二个人进来，这取决于网络因素和数据库的并发能力。

ajax有个属性async。默认是true
设置为false，就是异步中的同步，本方法为异步，嵌套的ajax为同步想要所有都为同步，$.ajaxSetup({async:false});

看起来就是表格内容不一样你加的地方不对吧  你看看你的存放数据的表格的ID 和class 是什么  ，不同版本有差异  ，我用是没问题。
这段代码有问题啊，
$.each(data,function(k,v){
var newDate={};
ay.vin=v.vin;
ay.account=v.account;
ay.bjche=v.exceptionID;
arrry.push(ay);
});
newDate.rows=arrry;
在开发工具里面看了 arrry里面的数据都是一样的  是Date最后一个数据把全面的都覆盖了

好吧终于找到了 var newDate={}; 这个写错了是var ay = {}; ......

调试易

如何在AJAX 回调函数用不匹配的JSON给表格赋值?

解决方案 »

如何在AJAX 回调函数 用不匹配的JSON给表格赋值?

解决方案 »

如何在AJAX 回调函数用不匹配的JSON给表格赋值?