如何在数据表列中创建下拉列表？
如何在数据表列中创建下拉列表？
提问于 2019-01-09 21:25:52
我想在我的数据表的列中有一个下拉列表。我使用json数据填充我的datatable，对于这些数据，我有json对象和一个保存所有这些json对象的数组。
html：
<table id="orderDescriptionTable" class="table table-bordered">
<thead>
<tr>
<th> Sr.no. </th>
<th> Item </th>
<th> Status </th>
</tr>
</thead>
<tbody></tbody>
</table>javascript / jquery：
var obj1 = {
srNo : "12",
item: "Notebook",
status: '<select id="status-1" class="status"></select>'
};
var obj2 = {
srNo : "15",
item: "Notebook",
status: '<select id="status-2" class="status"></select>'
};
var dataSet = [];
$('#orderDescriptionTable').DataTable({
data: dataSet,
columns: [{
"data": function(data) {
return data.srNo;
}
}, {
"data": function(data) {
return data.item;
}
}, {
"data": function(data) {
return data.status;
}
}
]
});我想在表的'Status‘列中有下拉列表。我试图在$('.status')中附加标签，但似乎没有帮助。有谁能帮帮我吗？
回答 2
Stack Overflow用户
发布于 2019-01-09 21:40:01
下面是一个简单的datatable，其中有一列(填充了一些垃圾数据)，其中显示了在列中呈现的选择列表：
html标记：
<body>
<table class="display" id="exampleTable" width="60%">
<thead>
<tr>
<th>Select List Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>数据表：
jQuery(function($) {
var testData = [
["test1", "test", "1"],
["test2", "test", "2"],
["test3", "test", "3"],
["test4", "test", "4"]
]
$('#exampleTable').DataTable({
retrieve: true,
paging: false,
data : testData,
columns: [ {
"title": "Select List Col",
"render": function(data, type, row, meta) {
var a = testData.indexOf(row);
var select = $("<select id='role_"+a+"'><option value ='1'>Option 1</option><option value ='2'>Option 2</option</select>");
$("#role_"+a).val(row[1]);
return select.prop("outerHTML")
}
} ],
order: []
});
});Stack Overflow用户
发布于 2019-01-09 21:41:07
我希望这就是你需要的？
jsfiddle
<table id="orderDescriptionTable" class="table table-bordered">
<thead>
<tr>
<th> Sr.no. </th>
<th> Item </th>
<th>
<span style="margin-left:25px;">Status</span>
<select id="status-1" class="status">
<option value="1" class="status">1</option>
<option value="2" class="status">2</option>
</select>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var dataSet = [];
$('#orderDescriptionTable').DataTable({
data: dataSet,
columns: [{
"data": function(data) {
return data.srNo;
}
}, {
"data": function(data) {
return data.item;
}
}, {
"data": function(data) {
return data.status;
}
}
]
});
$('#status-1').click(function(e){
e.stopPropagation();
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54111229
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号