项目心得--动态列

        用了bootstrap表格，正常情况下 初始化的表格是和数据库中的行列值相同。而动态列是将 数据库中 某一列的值 作为表的属性，这样，每次增加该列的值，就可以增加表的横向属性。

        本篇文章借鉴了bootstrap table 动态列数据加载（一）_bootstraptable动态加载数据-CSDN博客

bootstrap table 动态列数据加载（二）_bootstraptable动态加载列数据-CSDN博客

bootstrap table 动态列数据加载（三）_bootstraptable动态加载数据-CSDN博客

并根据实际情况 进行了代码的变动。

---

   首先我们要了解BootStrapTable的动态表格：

          其通过initTable函数初始化了列名（字段/属性），在这里可以人为的修改字段名，但是具体是有哪些字段，其是固定的。为了使其变成动态列，就要在这个地方下功夫。

columns: {
    {
        field: 'Id',
        title: '编号',
    },{
        field: 'name',
        title: '名称',
    },{
        field: 'sex',
        title: '性别',
        //自定义方法
        formatter: function (value) {
            if (value == 1) {
                return '男';
            } else if (value == 2) {
                retuen '女';
            }
        }
    },
}

详解

NO.1----

1.  Object.keys(json): 获取json对象的所有键（key），返回一个键的数组。
2. .map(key => ({key, value: json[key]})): 使用Array.prototype.map方法遍历键数组，并为每个键创建一个新的对象。这个新对象有两个属性：key和value。其中，key属性存储的是键的名称（字符串），而value属性存储的是键对应的值。

如果json的对象是

{
  "name": "Alice",
  "age": 30
}

那么数组a是

[
  { "key": "name", "value": "Alice" },
  { "key": "age", "value": 30 }
]

No.2---

var b = a[1].value;

这行代码从数组a中取出第二个元素（索引为1，因为数组索引是从0开始的），然后取出该元素的value属性，并将其赋值给变量b。这意味着b现在存储的是json对象中第二个键对应的值。

No.3--

var c = Object.keys(b[0]); 

这行代码假设b是一个数组（根据之前的代码，b是json对象中的第二个值，这个值可能是一个对象或数组），然后它取出b的第一个元素（b[0]），并使用Object.keys()方法获取这个元素的所有键，并将这些键存储到数组c中。 

$("#bootstrap-table").bootstrapTable({
        ajax: function (request) {
            $.ajax({
                //请求类型
                type: "GET",
                //调用controller的url,请求链接地址
                url: prefix + "/list",
                //传输内容类型,发送给服务器的格式
                contentType: "application/json;charset=utf-8",
                //数据传输类型,收到数据的格式
                dataType: "json",
                json: 'callback',
                success: function (json) {
                    // 这句话可以和controller传入的数据呼应
                    // 见详细NO.1
                    var a = Object.keys(json).map(key => ({key,value: json[key]}));
                    //详细见No.2
                    var b = a[1].value;
                    var columnsArray = [];
                    //详细见No.3
                    var c = Object.keys(b[0]);

                    //对应后台的ID和名字 键值对
                    for (var i = 1; i < 2; i++) {
                        var property = c[i];
                        columnsArray.push({
                            "title": property,
                            "field": property,
                            sortable: true,
                        })
                    }

                    //动态列--对应该ID和名字 所关联属性
                    //为columnsArray数组创建一个新的对象，
                    //该对象包含三个属性：title、field和formatter。
                    //title和field的值都设置为从c中获取的property值。
                    for (var i = 2; i < 10; i++) {
                        var property = c[i];
                        columnsArray.push({
                            "title": property,
                            "field": property,
                            //formatter是一个函数，它接收三个参数：value、row和index。
                            //这个函数的主要目的是根据提供的value和index来生成一个HTML字                    
                            //符串，该字符串是一个带有特定类、类型和名称的input元素。
                            //此外，这个input元素还有一个required属性，这意味着在提交表            
                            //单时该字段是必填的。
                            //生成的HTML字符串被返回，并用作formatter函数的输出。
                            formatter: function(value, row, index) {
                                var html = $.common.sprintf("<input class='form-control' " +
                                    "type='text' name='planeParameter[%s].property' value='%s' required>", index, value);
                                return html;
                            }
                        })
                    }
                    if(c.length<11){
                        //销毁表格
                        $('#bootstrap-table').bootstrapTable('destroy').bootstrapTable({
                            data: json,
                            toolbar: '#toolbar',
                            singleSelect: true,
                            clickToSelect: true,
                            pagination: true,
                            columns: columnsArray,
                        });
                    }else{
                        //销毁表格
                        $('#bootstrap-table').bootstrapTable('destroy').bootstrapTable({
                            data: json,
                            toolbar: '#toolbar',
                            singleSelect: true,
                            clickToSelect: true,
                            pagination: true,
                            detailView: true,
                            columns: columnsArray,
                            onExpandRow: function (index, row, $detail) {
                                initChildTable(index, row, $detail);
                            },
                        });
                    }

                },
                error: function () {
                    alert("错误");
                },

            });

        }
    });

---

讲一下后台：

public TableDataInfo list(xx xx)
    {
        startPage();
        
        List<xx> list = xx.xx(xx);
        
        new一个新的对象
        List<xx> xx = xx.selectxxListNoStop(xx);

        //建立一个键值对的List
        List<Map<String,String>> list1 = new ArrayList<>();
        if(xx.size()!=0){
            for(int i =0;i<xxList.size();i++) {
                Map<String, String> map = new LinkedHashMap<>();
                //把ID和对应的名字放入List中
                map.put("ID", xxList.get(i).getxxId().toString());
                map.put("名字", planeList.get(i).getPlaneCode());
                //对应该ID所关联的属性，并依次放入List中
                for (int j = 0; j < list.size(); j++) {
                    if (list.get(j).getxxId() == xxList.get(i).getxxId()) {
                        if(list.get(j).getParameter()==0){
                            map.put(list.get(j).getxxAttrName(),"-");
                        }else {
                            map.put(list.get(j).getxxAttrName(), list.get(j).getParameter().toString());
                        }
                    }
                }
                list1.add(map);
            }
        }else{
            Map<String, String> map1 = new LinkedHashMap<>();
            map1.put(" "," ");
            list1.add(map1);
        }
        return getDataTable(list1);
    }

欢迎大家帮我纠错哦~