表格和卡片视图模式切换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插件

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

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

猜你喜欢更多»

项目推荐更多»

[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换 (1)

[开源]一套企业级微服务框架、微服务能力开放平台，功能强大 (0)

[开源]免费开源的流程设计器，开箱即用，助力流程开发使用更简单 (0)

[开源]MIT开源协议，前后端分离、美观大方后台通配权限管理系统 (1)

[开源]一款终端仿真软件，支持多种后端协议，无依赖跨平台使用 (0)