我的应用程序要求管理员从1000个可用名称的大型列表中创建名称的子组.我希望他们看到所有的名字,并能够通过在搜索框中输入来缩小可见项目,以便他们可以选择他们想要的东西.结果可能是逗号分隔的列表或数组.在这种情况下,Chosen / Select2行为无用.
理想的解决方案是拥有像Datatables这样的东西,你可以看到所有项目并实时缩小结果,但是,因为我只有名字,我更喜欢网格布局来最大化空间,而不是表格布局.我可以在表格上使用数据表而不是在任何其他元素上吗？
最佳答案
有可能,前段时间我用它来做同样的事情.您需要覆盖row-callback function中的行输出并在init-callback中执行一些html修改.
这是展示该作品的情况(不介意它们是随机的图像;)：
您需要以json格式将数据插入数据表,然后更改每个记录的渲染输出.这是一个小小的黑客,但它是可管理的.
编辑示例:(它有一些粗糙的边缘,但它的工作原理;)
$('#example').dataTable({
"data": [
// some rows data
['Trident','Internet Explorer 4.0','Win 95+','4','X'],['Trident','Internet Explorer 5.0','5','C'],'Internet Explorer 5.5','5.5','A'],'Internet Explorer 6','Win 98+','6','A']
],"columns": [
{ "title": "Engine" },{ "title": "Browser" },{ "title": "Platform" },{ "title": "Version","class": "center" },{ "title": "Grade","class": "center" }
],"initComplete": function(settings,json) {
// show new container for data
$('#new-list').insertBefore('#example');
$('#new-list').show();
},"rowCallback": function( row,data ) {
// on each row callback
var li = $(document.createElement('li'));
for(var i=0;iul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul li {
display: inline-block;
width: 100px;
border: 1px #CCC solid;
padding: 10px;
margin: 3px;
}
ul li p {
margin-top: 2px;
margin-bottom: 2px;
}
.dataTables_length {
width: 50%;
}
.dataTables_filter {
width: 50%;
}