前端解决动态添加列的问题

bootStrap动态添加列

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

代码如下

<div>
    <table id="table" class="table table-responsive table-striped
    table-bordered table-hover table-condensed ">
    </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 = '<tr align="center"><td><input type="checkbox"></td><td>'+teamName+'</td>';
                                rows = rows+row;
                                for(var i=0;i<Object.keys((json[0].dateMap)[0]).length;i++){
                                    var row1 ='<td>'+(Object.keys((json[0].dateMap)[0]))[i]+'</td>';
                                    rows = rows+row1;
                                }
                                var row2 = '</tr>';
                                rows = rows+row2;
                                $('#mytable').append(rows);

                                var lines;
                                for(var j =0;j<json.length;j++){
                                    var line  = '<tr align="center"><td><input type="checkbox"></td><td>'+(Object.values(json[j]))[6]+'</td>';
                                    lines = lines+line;
                                        for(var m=0;m<Object.keys((json[0].dateMap)[0]).length;m++){
                                            var line1 = '<td>'+(Object.values((json[0].dateMap)[0]))[m]+'</td>';
                                            lines =lines+line1;

                                        }
                                    var line3 = '</tr>';
                                    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是不行的，真是背不下来。