表格和卡片视图模式切换js插件-插件特效-ICode联盟

isomorphic-table-cards.js是一个JavaScript库,可以在表格视图和卡片网格视图之间切换，平稳过渡效果。数据格式var data = [ { "name": "Amazonite", "chakra": 4, "spirit": "Self-determination" }, { "name": "Amber", "chakra": 3, "spirit": "Makes carefree" }, { "name": "Amethyst", "chakra": 7, "spirit": "Alertness, justice, inner peace", "body": "Good for the skin; alleviates pain, tension and lowers high blood pressure." }, // ... ].sort(function(a, b){ return (a.chakra+a.name).localeCompare(b.chakra+b.name); });数据呈现在视图上let itc itc = new IsomorphicTableCards({ // row and card dimesions rowHeight: 31, cardHeight: 94, cardWidth: 210, // item template itemTemplate: d => `

${d.name}

${d.spirit}

`, // sort functions sort: (data, key, direction) => { if(key=='chakra'){ return data.sort(direction>0 ? (a, b) => (a.chakra+a.name).localeCompare(b.chakra+b.name) : (a, b) => ((8-a.chakra)+a.name).localeCompare((8-b.chakra)+b.name) ) }else{ return data.sort((a, b) => direction*a.name.localeCompare(b.name)) } } }); itc.render()需要的时候呈现itc.redraw()切换视图的模式itc.redraw('table') itc.redraw('cards')

表格和卡片视图模式切换js插件

preview Points Download 6毛Download Share Download

文件目录······

暂无数据

未经允许不得转载： ICode联盟 » Plugin Special Effects » 表格和卡片视图模式切换js插件

点击广告，支持我们为你提供更好的服务

猜你喜欢更多»

项目推荐更多»

[开源]基于DevUIDesign的Vue3组件库简洁、易用、灵活高质量组件 (1)

[开源]自动化部署系统，发布代码和服务器管理工具，简单开箱即用 (1)

[开源]团队协同办公系统框架，面向中小团体，拖拽操作简单方便 (0)

[开源]基于SpringBoot开发的互联网停车收费管理系统，可商用 (1)