"data-column-id" in bootstrap table 有条件

Question

我想在 data-column-id 上应用条件，它是从 php code.Is 获取的，这可以做这样的事情吗？

if(data-column-id)==0{
data-column-id="ordinary";
}else{
data-column-id="ordinary";
}// i want this for cat_type

table

<table id="categories_grid" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
        <thead>
            <tr>
                <th data-column-id="cat_id" data-type="numeric" data-identifier="true">CatID</th>
                <th data-column-id="cat_name">Name</th>
                <th data-column-id="cat_type">Type</th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
            </tr>
        </thead>
 </table>

AJAX

$( document ).ready(function() {
        var grid = $("#categories_grid").bootgrid({

            ajax: true,
            rowSelect: true,
            post: function ()
            {
                /* To accumulate custom parameter with the request object */
                return {
                    id: "b0df282a-0d67-40e5-8558-c9e93b7befed"

                };
            },

            url: "response_categories.php",
            formatters: {
                "commands": function(column, row)
                {
                    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.cat_id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " +
                        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.cat_id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
                }
               /* "type":function (column,row) {
                    if(row.cat_type == 0)
                    {
                        return "ordinary";
                    }
                    else
                        return "special";

                }*/
            }
        }).on("loaded.rs.jquery.bootgrid", function()

Answer 1

这样的检查，数据属性的设置可以通过JavaScript来完成。这里我将使用 jQuery。

给定一个 DOM 元素：

<th id='test_id' data-column-id="cat_id" data-type="numeric" data-identifier="true">CatID</th>

我们可以 select 它，以及它的数据属性。为了 select 它更容易，并且出于示例目的，我在上面的 table header 中添加了一个 id。 (test_id)

var column_id = $('#test_id').data('column-id');

现在我们有了它的值，我们可以执行您想要的检查：

if(column_id == 0){
    // logic
}else{
    // logic
}

要设置数据属性，您只需执行以下操作：

$('#test_id').data('column-id', 'some value');

按照此语句，您的 DOM 元素变为：

<th id='test_id' data-column-id="some value" data-type="numeric" data-identifier="true">CatID</th>

"data-column-id" in bootstrap table 有条件

"data-column-id" in bootstrap table with conditions

html

php

twitter-bootstrap

bootstrap-table