jquery - 如何将引导标签设计应用于 html 表的状态列中显示的数据库值

Question

function ShowData() {
  $.ajax({
    type: "post",
    url: "Stock_Entry.aspx/ShowStockData",
    //parameter is not available so we dont need data
    data: {},
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        var $table = "<table id='tblStockData' width='100%' class='table table-striped table-bordered table-hover'>";
        var header = "<thead><tr><th style='text-align:center;'>S.No</th><th>Shipment</th><th>Chassis No</th><th>Engine No</th><th>Status</th><th></th></tr></thead>";
        $table += header;
        var count = 1;
        //data.d is returning list of years
        //i =index, x element or data
        $.each(data.d, function (i, x) {

            var Om = ConvertDate(x.OrderMonth);
            var ArM = ConvertDate(x.ArrivalDate);
            var PayM = ConvertDate(x.PaymentDate);

            var row = "<tr><td style='text-align:center;'>" + count + "</td>" +
            "<td style='text-align:left;'><span>" + x.Shipment + "</span></td>" +
            "<td style='text-align:left;'><span>" + x.ChassisNo + "</span></td>" +
            "<td style='text-align:left;'><span>" + x.EngineNo + "</span></td>" +
            "<td style='text-align:left;'><span>" + x.Status + "</span></td>" +
                "<td width='120px'>" + (x.Edit == false ? "" : "<a class='btn-sm btn-warning edit' onclick='EditDetail(this)' href='#'><span class='glyphicon glyphicon-edit'></span></a>") + ' ' +
                  (x.Detail == false ? "" : "<a class='btn-sm btn-info edit' onclick='ViewDetail(this)' href='#'><span class='glyphicon glyphicon-modal-window'></span></a>") + ' ' +
                (x.Delete == false ? "" : "<a class='btn-sm btn-danger edit' onclick='Delete(this)' href='#'><span class='glyphicon glyphicon-trash'></span></a>") + "<span style='display:none'>" + x.No + "</span><span style='display:none'>" + x.Shipment + "</span><span style='display:none'>" + x.VehicleTypeID + "</span><span style='display:none'>" + x.TypeTitle + "</span><span style='display:none'>" + x.ModelID + "</span><span style='display:none'>" + x.ModelTitle + "</span><span style='display:none'>" + Om + "</span><span style='display:none'>" + x.ArrQty + "</span><span style='display:none'>" + x.VehicleCondition + "</span><span style='display:none'>" + x.ReceivingPlace + "</span><span style='display:none'>" + ArM + "</span><span style='display:none'>" + x.Duty + "</span><span style='display:none'>" + x.ChassisNo + "</span><span style='display:none'>" + x.EngineNo + "</span><span style='display:none'>" + x.KeyNo + "</span><span style='display:none'>" + x.Color + "</span><span style='display:none'>" + x.ColorTitle + "</span><span style='display:none'>" + x.CountryOfOrigin + "</span><span style='display:none'>" + x.CountryTitle + "</span><span style='display:none'>" + x.RefNumber + "</span><span style='display:none'>" + x.Status + "</span><span style='display:none'>" + x.ReceivingRoot + "</span><span style='display:none'>" + x.RootTitle + "</span><span style='display:none'>" + PayM + "</span></td>" +
            "</tr>";
            $table += row;
            count++;
        });

        $('#divStock').html($table);
        $table += "</table>";


        $('#tblStockData').DataTable({ "bPaginate": true, "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": true, 'iDisplayLength': 3, "aLengthMenu": [[3, 5, 25, -1], [3, 5, 10, "All Items"]], "aaSorting": [],
            "columnDefs": [{
                "type": "numeric",
                "targets": 0
            }]
        });
        $('#divStock').show();
    },
    error: function () {
        alert('error');
    }
  });
}

如何将引导标签设计应用于 HTML 表中显示的数据库值。我想要具有soldtolabel label-danger和Availableto值的字段label label-success

这是我想要的样本。我希望 HTML 表中的 Status 列根据它们的值分配引导类

<div id="StockDetailDialog" class="StockDetailDialog" title="" style="display: none;
    text-align: center; vertical-align: central;">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <strong id="CustomerMsgTitle" align="center">Stock Detail Detail</strong>
        </div>
        <br />
        <div class="panel-body">
            <div class="row">
                <div id="divStock" class="DivSize">
                </div>
            </div>
        </div>
    </div>
</div>

标签： jqueryhtml

Answer 1

通过检查 ajax x.Status 返回，您可以分配您想要的表格行的类，这样您将获得所需的结果。

...
var row = "<tr><td style='text-align:center;'>" + count + "</td>" +
"<td style='text-align:left;'><span>" + x.Shipment + "</span></td>" +
"<td style='text-align:left;'><span>" + x.ChassisNo + "</span></td>" +
"<td style='text-align:left;'><span>" + x.EngineNo + "</span></td>" +
if(x.Status == "Sold"){
    "<td style='text-align:left;'><span class='text-danger'>" + x.Status + "</span></td>"
}
else if(x.Status == "Avaliable"){
    "<td style='text-align:left;'><span class='text-success'>" + x.Status + "</span></td>"
} + ...