根据列值显示/隐藏按钮

我有一个网格视图，其中有两列(FOOD和OPERATIONS(。在食品专栏中，我展示了我的菜单。在OPERATIONS列中，我有两个按钮(DELETE和EDIT(。我想要的是如果食物是"；汉堡"；我希望这两个按钮是可见的，否则我想隐藏它们。这是我想要的演示

我在jQuery中尝试过这个代码。但我认为条件的实现是否正确。

Menu = $('#tblMenu').DataTable({
columns: [
{ "data": "FOOD", responsivePriority: 1, "searchable": true },
{
"data": null,
render: function (data, type, row) {
btn = '<div class="d-flex">';
btn += '<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>';
btn += '<a class="btn btn-danger" id="deleteMenu" href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>';

//Condition
if (data.find("FOOD") != "HAMBURGER") {
/*btn +=*/ $('<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>').hide();
$('<a class="btn btn-danger"  href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>').hide();
} else {
$('<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>').show();
$('<a class="btn btn-danger"  href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>').show();
}
btn += '</div>';
return btn;
}, 
}
]
});

//HTML
<table class="table align-middle table-bordered text-center w-100" style="font-size:75%; " id="tblMenu">
<thead class="table-primary">
<tr>
<th class="align-middle">FOOD</th>
<th class="align-middle">OPERATIONS</th>
</tr>
</thead>
</table>

我注意到DataTables和Bootstrap都在使用。我假设OP有BS4，因为DataTables还没有BS5的样式表。请参见图I以获取示例加载的外部文件列表。

图I

引导程序.min.css v4.6.1
dataTables.bootstrap4.min.css v1.10.21
jquery.min.js v3.6.1
popper.min.js v1.16.1
bootstrap.bundle.min.js v4.6.1
jquery.dataTables.min.js v1.10.21

在dataTable()插件中，使用了columnDefs参数和render: function()属性来解决问题。请参见图二。

图二

{
targets: 1, // This is rendering buttons in the second column
data: null, // This uses the whole source (dataSet)
render: function(data, type, row, meta) {
/**
* If data.item (OP: data.FOOD) is not "CONFIGURABLE" (OP: "HAMBURGER")...
* >status< = "hidden" otherwise it's = "" (nothing)
*/
let status = data.item !== "CONFIGURABLE" ? "hidden" : "";
/**
* Only a single string is needed. Note that >status< is a class 
* (see CSS in example). It's important that the "hidden" class is
* added to your CSS exactly how it is in the example CSS. BS styles
* are difficult to override so if changed it may not work.
*/
const btn = `
<div class="btn-group ${status}">
<a href="/editMenu?id=${row.idOrder}" class="btn btn-info">EDIT</a>
<a href="/deleteMenu?id=${row.idOrder}" class="btn btn-danger">DELETE</a>
</div>`;
return btn;
}
}

const dataSet = [{item:0, config:""}, {item:"CONFIGURABLE", config:""},{item:2, config:""},{item:"CONFIGURABLE", config:""},{item:4, config:""},{item:5, config:""},{item:"CONFIGURABLE", config:""},{item:7, config:""},{item:"CONFIGURABLE", config:""},{item:8, config:""},{item:9, config:""},{item:"CONFIGURABLE", config:""}];
const Menu = $('#tblMenu').DataTable({
data: dataSet,
columns: [{
title: "Item"
}, {
title: ""
}],
columnDefs: [{
targets: 0,
data: "item"
},
{
targets: 1,
data: null,
render: function(data, type, row, meta) {
let status = data.item !== "CONFIGURABLE" ? "hidden" : "";
const btn = `
<div class="btn-group ${status}">
<a href="/editMenu?id=${row.idOrder}" class="btn btn-info">EDIT</a>
<a href="/deleteMenu?id=${row.idOrder}" class="btn btn-danger">DELETE</a>
</div>`;
return btn;
}
}
]
});

.btn-group.hidden {
display: none;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container">
<section class="row">
<div class="col mt-5">
<table id="tblMenu" class="table align-middle table-bordered text-center w-100" style="font-size:75%;">
<thead class="table-primary">
<tr>
<th class="align-middle"></th>
<th class="align-middle"></th>
</tr>
</thead>
</table>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script></script>
</body>
</html>

在我完成这个演示后不久，问题就改变了。因此，这个答案并不完全适合datatables.net的场景，但它提供了可以实现的策略的提示。

在最新的代码中，您试图根据输入数据评估条件，并动态地制作一些元素来填充表格。

您还可以在每一行上有第二列包含按钮，但只需根据该行中给定类的存在来显示/隐藏该单元格。

在文档就绪的情况下，我将循环遍历所有表行，如果在第一个单元格中找到值Hamburger，则将类enabled添加到整行中。这样的条件将触发css规则将该单元格设置为可见而非隐藏。

$(document).ready(function () {
//for each row in the table
$('table.foods > tbody > tr').each((i,row)=>{
//grabs the text value from the first cell in the row,
const foodValue = $(row).find('td:first-child').text();    
//and if it's hamburger,
if(foodValue == 'Hamburger'){
//adds the class enabled to the row
$(row).addClass('enabled');
}      
});
});

/**************************************************************
* Styles to show/hide rows having/not having the enabled class
**************************************************************/
table.foods > tbody > tr > td:nth-child(2) {
visibility: hidden;
}
table.foods > tbody > tr.enabled > td:nth-child(2) {
visibility: visible;
}
/**************************************************************
* Styles for better presentation
**************************************************************/
table.foods {
border-collapse: collapse;
width: 100%;
}
table.foods th {
text-align: center;
}
table.foods td,
table.foods th {
border: solid 2px black;
padding: 1rem;
}
.action {
border: solid 2px;
border-radius: 5px;
padding: .5rem 1rem;
background: white;
}
.edit {
border-color: red;
color: red;
}
.delete {
border-color: blue;
color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="foods">
<thead>
<th>FOOD</th>
<th>DRINK</th>
</thead>
<tbody>
<tr>
<td>Hamburger</td>
<td>
<button type="button" class="action edit">EDIT</button>
<button type="button" class="action delete">DELETE</button>
</td>
</tr>
<tr>
<td>Pasta</td>
<td>
<button type="button" class="action edit">EDIT</button>
<button type="button" class="action delete">DELETE</button>
</td>
</tr>
<tr>
<td>Pizza</td>
<td>
<button type="button" class="action edit">EDIT</button>
<button type="button" class="action delete">DELETE</button>
</td>
</tr>
</tbody>
</table>

您能向我们展示更多您的代码吗？你在这里使用jQuery，

//Sets your ready function    
$(document).ready(function () {
$("#Delete").click(function () {
$("a").hide(); //Selecting the <a> and hiding it on click
});
$("#show").click(function () {
$("a").show();//Selecting the <a> and showing it on click

});
});

请更新更多关于你试图实现的问题，你目前选择的是元素的所有实例，而不是使用

$("#a").show(); // ID based
$(".a").show(); //Selecting with class names

相关内容

最新更新

热门标签：