动态添加列和行 ajax,前端解决动态添加列的问题

bootStrap动态添加列

由于接到需求，要求我做一个表格根据选择的时间段显示每个班组每天的工作数量，由于选择的时间段是不固定的，所以就要根据后端传的JSON数据，动态添加列。我也是参考了，别人的博客才有了解决的办法，

https://my.oschina.net/u/2356355/blog/1595563

代码如下

table>

div>

$("#table").bootstrapTable({

ajax: function (request) {

$.ajax({

type: "GET",

url: "/table",

contentType: "application/json;charset=utf-8",

dataType: "json",

json: 'callback',

success: function (json) {

var columnsArray = [];

columnsArray.push({field: "state", checkbox: true});

for (var i = 0; i < (Object.keys(json[0])).length; i++) {//Object.keys(obj) 获取key名称

var property = (Object.keys(json[0]))[i];//id username

columnsArray.push({

"title": property,

"field": property,

switchable: true,

sortable: true

});

}

$('#table').bootstrapTable('destroy').bootstrapTable({

data: json,

toolbar: '#toolbar',

singleSelect: true,

clickToSelect: true,

sortName: "create_time",

sortOrder: "desc",

pageSize: 15,

pageNumber: 1,

pageList: "[10, 25, 50, 100, All]",

showToggle: true,

showRefresh: true,

showColumns: true,

search: true,

pagination: true,

columns: columnsArray

});

},

error: function () {

alert("错误");

}

});

}

});

其实用的还是bootstrap，只不过在创建bootstrap之前调用ajax,异步从后台获取JSON数据，通过Object.keys(obj)获取对象的key值，值得注意的是，由于json数据可能为多条，但是key值一样，所以json[0]获取第一个对象的数据key即可，至于value不需要你去获取，因为bootstrap中colunms的field属性，会根据你赋值给它的英文名，去json中查到相应的数据，此时，查找的是全部json对象，但是如果json中的key-value要是”2018-08-23”：”3”这种形式的话，你会发现页面就是不显示，个人感觉就是只有英文名才能赋值给field。

[{"id":null,"isNewRecord":true,"remarks":null,"createDate":null,"updateDate":null,"teamId":null,"workteamName":"1班","wlId":null,"goodsId":null,"teamNums":null,"ikId":null,"startDate":null,"endDate":null,"dateMap":[{"2018-08-23":"3","2018-08-24":"3"}]},{"id":null,"isNewRecord":true,"remarks":null,"createDate":null,"updateDate":null,"teamId":null,"workteamName":"2班","wlId":null,"goodsId":null,"teamNums":null,"ikId":null,"startDate":null,"endDate":null,"dateMap":[{"2018-08-23":"3","2018-08-24":"3"}]}]

这是我的后台返回前端的JSON数据，一共2个对象，每个对象中都含有一个list,因为我只需要list中的key-value，所以只需要Object.keys((json[0].dateMap)[0])就会获取到list中第一条数据的key.但是客官你会发现，key为”2018-08-23”这种格式的，field根本找不到值，所以页面不显示3，所以这个方法我放弃了。

传统方法

没办法，既然高大上的bootstrap满足不了我的需求，我只能回归原始，开始用append的方式，添加字符了，

$.ajax({

type: "GET",

url: "${ctx}/plan/blPlanTeam/getBlPlanTeam?workline="+workline+"&startTime="+startTime+"&endTime="+endTime+"&orderNumbers="+orderNumbers,

contentType: "application/json;charset=utf-8",

dataType: "json",

json: 'callback',

success: function (json) {

if(hasPrivileage){

console.log((Object.values((json[0].dateMap)[0]))[0]);

var teamName = (Object.keys(json[0]))[6];

var rows;

var row = '

'+teamName+'';

rows = rows+row;

for(var i=0;i

var row1 =''+(Object.keys((json[0].dateMap)[0]))[i]+'';

rows = rows+row1;

}

var row2 = '';

rows = rows+row2;

$('#mytable').append(rows);

var lines;

for(var j =0;jvar line = '

'+(Object.values(json[j]))[6]+'';

lines = lines+line;

for(var m=0;m

var line1 = ''+(Object.values((json[0].dateMap)[0]))[m]+'';

lines =lines+line1;

}

var line3 = '';

lines = lines+line3;

}

$('#mytable').append(lines);

}

hasPrivileage = false;

return hasPrivileage;

},

error: function () {

alert("错误");

}

});

这种方法实现了我想要的效果，但是却是有bug存在的，那就是当我请求来的时候，但经过success:function(json){}会动态生成表，但是如果我再点击一下按钮，还会触发ajax，会在之前生成表的基础上，在下面接着生成一个一模一样的表，所以这个还需要处理，我的想法是，因为我是采用button点击事件触发的ajax，所以如果是提交的话，也就是在form.validate中，在$(form).ajaxSubmit之前，做一次ajax，将表生成，然后进行提交，再提交中刷新页面或者是其他操作，这样的话也许能成，待我试一试，便给各位看官，结果

博客须知

这篇博客，主要也是借助了广大开发者的力量，通过参考他们的思路，进行尝试解决自己的问题，虽然很可惜，bootstrap没能解决我的问题，但是还是让我对bootstrap有了更加深层的体验。

开发就是一个不断尝试，不断进步的过程，不建议直接copy代码，反正思路不是特别的难，完全可以根据思路自己去尝试开发，没必要copy，copy就会抹杀一个灵感的迸发，当然bootstrap几乎都是固定的属性，不copy是不行的，真是背不下来。