Question

我有一个问题，我想在数据表中隐藏该列，但仍需要访问其值。

这是我的代码

<div class="container">
  <div class="">
    <h1>HRphn</h1>
    <div class="col-sm-8">
    <div class="well clearfix">
        <div class="pull-right"><button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
        <span class="glyphicon glyphicon-plus"></span> Record</button></div></div>
    <table id="posting_grid" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" data-toggle="bootgrid">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric" data-identifier="true">Posting No</th>
                <th data-column-id="position">Position</th>
                <th data-column-id="department">Department</th>
                <th data-column-id="vacancy">Vacancy</th>
                <th data-column-id="postingdate">Date</th>
                <th data-column-id="status">Status</th>
                <th data-column-id="qualification" clas="hidden-lg"></th>
                <th data-column-id="experience" class="hidden-lg"></th>
                <th data-column-id="criteria1" class="hidden-lg"></th>
                <th data-column-id="criteria2" class="hidden-lg"></th>
                <th data-column-id="criteria3" class="hidden-lg"></th>
                <th data-column-id="jd1" ></th>
                <th data-column-id="jd2" ></th>
                <th data-column-id="jd3" ></th>
                <th data-column-id="jd4" ></th>
                <th data-column-id="jd5" ></th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
            </tr>
        </thead>
    </table>
</div>

我想隐藏这个

<th data-column-id="qualification" data-class="hidden"></th>
                <th data-column-id="experience" data-class="hidden"></th>
                <th data-column-id="criteria1" data-class="hidden"></th>
                <th data-column-id="criteria2" data-class='hidden'></th>
                <th data-column-id="criteria3" data-class='hidden'></th>
                <th data-column-id="jd1" ></th>
                <th data-column-id="jd2" ></th>
                <th data-column-id="jd3" ></th>
                <th data-column-id="jd4" ></th>
                <th data-column-id="jd5" ></th>

但是..如果我隐藏了这些值..我无法通过

访问它们

grid.find(".command-edit").on("click", function(e)
{
    //alert("You pressed edit on row: " + $(this).data("row-id"));
        var ele =$(this).parent();
        var g_id = $(this).parent().siblings(':first').html();
        var g_name = $(this).parent().siblings(':nth-of-type(7)').html();
                    console.log(g_id);
                console.log(g_name);

    //console.log(grid.data());//
    $('#edit_model').modal('show');
                if($(this).data("row-id") >0) {

                            // collect the data
                            // $('#edit_id').val(ele.siblings(':first').html()); // in case we're changing the key
                            $('#edit_position').val(ele.siblings(':nth-of-type(2)').html());
                            $('#edit_department').val(ele.siblings(':nth-of-type(3)').html());
                            $('#edit_vacancy').val(ele.siblings(':nth-of-type(4)').html());
                                                            $('#edit_qualification').val(ele.siblings(':nth-of-type(7)').html());
                                                            $('#edit_experience').val(ele.siblings(':nth-of-type(8)').html());
                                                            $('#edit_postingdate').val(ele.siblings(':nth-of-type(5)').html());
                                                            $('#edit_status').val(ele.siblings(':nth-of-type(6)').html());
                                                            // $('#edit_description').val(ele.siblings(':nth-of-type(9)').html());
                } else {
                 alert('Now row selected! First select row, then click edit button');
                }
})

我在Bootstrap-Table: How to hide a column without deleting it from the DOM?尝试了解决方案但它似乎根本没有隐藏该列

Answer 1

如果您使用的是Bootstrap 4+，只需将类.d-none添加到您的列中，

将在其上设置display: none。

如果您使用的是Bootstrap 3+，则应为.hidden-*，其中*是

xs
sm
md
lg

用于不同的屏幕尺寸。也许.hidden在没有尺寸选择器的情况下也可以正常工作...

隐藏数据表中的列

1 个答案: