基于列值显示/隐藏按钮
基于列值显示/隐藏按钮
提问于 2022-10-14 08:03:39
我有一个网格视图，其中有2列(食物和操作)。在食物栏里，我展示了我的菜单。在操作栏中，我有两个按钮(删除和编辑)。我想要的是，如果食物是“汉堡包”，我希望这两个按钮是可见的，否则我想隐藏它们。这里是我想要的演示
我在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>回答 3
Stack Overflow用户
回答已采纳
发布于 2022-10-14 10:46:28
我注意到DataTables和引导一样被使用。我以为OP有BS4，因为DataTables还没有BS5的样式表。有关示例加载的外部文件列表，请参见图I。
图I
- bootstrap.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()属性来解决这个问题。参见图2。
图II
{
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>
Stack Overflow用户
发布于 2022-10-14 08:34:45
在我完成这个演示后不久，这个问题就被改变了。因此，这个答案并不完全符合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>
Stack Overflow用户
发布于 2022-10-14 08:12:37
你能给我们看看你的密码吗？你在这里使用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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74066156
复制相关文章
相似问题
腾讯云开发者
