gridstackjs 的使用

官网地址：Gridstack.js | Build interactive dashboards in minutes.
基础使用：

 方式一：

1. 项目中引入GridStack
2. 初始化GridStack （内部的配置项，可以自定义）

this.gridStack = GridStack.init({
                    cellHeight: 122, // 设置网格单元格高度，一行的高度是122px
                    // 添加更多配置
                    column: 12,  // 设置网格列数 (1408px分成12列)
                    margin: 8,  // 设置网格间距
                    disableOneColumnMode: true, // 禁用单列模式
                    float: false, // 元素是否可以浮动
                    animate: true, // 是否启用动画效果
                    disableDrag: true, // 禁用拖动
                    disableResize: true, // 禁用缩放
                })

3. 定义列表 宽高 位置 
 

panelJsonData: [ //  card数据
                    {
                        id: 1,
                        title: 'Vehicle',
                        x: 0,
                        y: 0,
                        w: 2,
                        h: 3,
                        content: null
                    },
                    { id: 2, title: 'Strategic ', x: 2, y: 0, w: 10, h: 3, content: Strategic },
                    { id: 3, title: 'Miles ', x: 0, y: 3, w: 4, h: 3, content: 'Miles' },
                    { id: 4, title: 'Average ', x: 4, y: 3, w: 4, h: 3, content: 'Average' },
                    { id: 5, title: 'Driving ', x: 8, y: 3, w: 4, h: 3, content: 'Driving' },
                    { id: 6, title: 'Charging', x: 0, y: 6, w: 6, h: 3, content: 'Charging ' },
                    { id: 7, title: 'Route', x: 6, y: 6, w: 6, h: 3, content: 'Route ' },
                    { id: 8, title: 'Battery', x: 0, y: 9, w: 4, h: 3, content: 'Battery' },
                    { id: 9, title: 'Energy', x: 4, y: 9, w: 8, h: 3, content: 'Energy ' },
                ]

4. 加载列表

this.gridStack.load(this.panelJsonData)

如果想要动态设置内部卡片的内容，可以按照下面的方法

                // // 动态设置 panelJsonData 的 content
                // this.panelJsonData.forEach(panel => {
                //     if (panel.id === 1) { // 假设您要修改 id 为 1 的面板
           
                //         panel.content = this.initCardOneHtml()
                //     }
                //     if (panel.id === 2) { // 假设您要修改 id 为 2 的面板
                //         panel.content = this.initCardOneHtml()
                //     }
                // });
                // // 数据变化后，重新加载网格和内容
                // this.gridStack.load(this.panelJsonData);
                // // 动态渲染 HTML 内容
                // this.gridStack.engine.nodes.forEach(node => {
                //     let element = document.querySelector(`[gs-id="${node.id}"] .grid-stack-item-content`);
                //     if (element) {
                //         element.innerHTML = node.content; // 将 HTML 插入到网格项的内容区域
                //     }
                // });

5 页面效果

使用这种方式定义元素的宽高和位置，我的项目的设计稿的宽是1408px, 我这边把gird设置成12列 ，column:12,所以一列的宽度就是 1408/12= 117px, 然后第一个内部第一个元素的宽是180px,所以第一个元素的w是180/117 = 2 ， 内部元素的 每列的高度都是350px,所以我这边设置了cellHeight为122，因此 h 都是3 ，第一个元素的位置是x:0 y：0，（表示0列0行），第二个元素的位置是x:2 ,y:0 (表示从第二列开始 第0行)

方式二：

for循环dom