bootstrapTable实现tdatagrid的显示隐藏列

要实现<t:datagrid>的显示隐藏列功能，可以使用bootstrapTable的showColumns和hideColumns方法。

首先，在<t:datagrid>标签上添加一个按钮，用于触发显示隐藏列功能：

<t:datagrid id="myTable" ...>
    ...
    <a href="javascript:void(0);" onclick="showHideColumns()">显示/隐藏列</a>
</t:datagrid>

然后，在页面中引入bootstrapTable的JS文件和CSS文件：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

接下来，编写showHideColumns函数：

function showHideColumns() {
    var columns = $('#myTable').bootstrapTable('getOptions').columns[0]; // 获取表格的列信息
    var visibleColumns = []; // 存储当前可见的列名
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].visible) {
            visibleColumns.push(columns[i].field);
        }
    }
    var options = ''; // 存储列名的选项
    for (var i = 0; i < columns.length; i++) {
        options += '<label><input type="checkbox" value="' + columns[i].field + '"';
        if (columns[i].visible) {
            options += ' checked';
        }
        options += '> ' + columns[i].title + '</label>';
    }
    // 弹出模态框，显示所有列名的选项
    BootstrapDialog.show({
        title: '列名',
        message: options,
        buttons: [{
            label: '确定',
            action: function(dialog) {
                var checkedColumns = []; // 存储选中的列名
                dialog.getModalBody().find('input[type="checkbox"]:checked').each(function() {
                    checkedColumns.push($(this).val());
                });
                // 显示选中的列，隐藏未选中的列
                $('#myTable').bootstrapTable('showColumns', checkedColumns);
                $('#myTable').bootstrapTable('hideColumns', difference(visibleColumns, checkedColumns));
                dialog.close();
            }
        }]
    });
}

// 求两个数组的差集
function difference(arr1, arr2) {
    var arr = [];
    for (var i = 0; i < arr1.length; i++) {
        if (arr2.indexOf(arr1[i]) === -1) {
            arr.push(arr1[i]);
        }
    }
    return arr;
}

最后，运行页面，点击“显示/隐藏列”按钮，就可以弹出模态框，显示所有列名的选项。选中要显示的列，点击“确定”，就可以显示选中的列，隐藏未选中的列。