我的应用程序要求管理员从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 callbackvar li = $(document.createElement('li'));for(var i=0;i
ul{ 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%; }
