表格和卡片视图模式切换js插件-插件特效-星河码客

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毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»