我正在使用EditableGrid(http://www.editablegrid.net/),它创建了一些漂亮的Editable表
我正在尝试修改表头以使其成为单个过滤器,例如示例-https://phppot.com/demo/column-search-in-datatables-using-server-side-processing/
“当前过滤器”文本框工作得非常好,但是对于所有列搜索一个值是有限制的。
我为单个列过滤器找到了许多解决方案,但是我不想使用其他表,因为它们不提供带有下拉列表和日期选择器的内联表编辑功能,是否可以在EditableGrid中实现它?
我也曾在Github(https://github.com/webismymind/editablegrid-mysql-example/issues/66)上问过这个问题,但是该线程已经很长时间没有处于活动状态了,所以我几乎没有从那里获得解决方案的希望。
最佳答案
在index.html中,更新此代码:看到// //新代码----开始和// //新代码----结束的位置,然后尝试一下。
<script type="text/javascript">
var datagrid;
window.onload = function() {
datagrid = new DatabaseGrid();
//new code ---- starts
var list = document.getElementsByTagName("thead")[0];
for(var i = -1; i < list.childNodes.length; i++){
var input = document.createElement("input");
input.type = "text";
input.className = "filter";
list.getElementsByTagName("th")[i+1].appendChild(input);
}
var z = document.getElementsByClassName('filter')
for(var i = 0; i< z.length; i++){
z[i].addEventListener("input", function(e){
datagrid.editableGrid.filter( e.target.parentNode.querySelector("input").value, [i]);
})
}
//new code ---- ends
// key typed in the filter field
$("#filter").keyup(function() {
datagrid.editableGrid.filter( $(this).val());
// To filter on some columns, you can set an array of column index
//datagrid.editableGrid.filter( $(this).val(), [0,3,5]);
});
$("#showaddformbutton").click( function() {
showAddForm();
});
$("#cancelbutton").click( function() {
showAddForm();
});
$("#addbutton").click(function() {
datagrid.addRow();
});
}
$(function () {
});
</script>
关于javascript - EditableGrid-如何使每个列标题成为单独的过滤器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54823464/