如何在gridstack.js中序列化和加载HTML元素的数据？

问题描述

我有一个由样式书及其图像组成的网格，这些网格是使用gridstack库创建的：

我还有一个“保存”按钮，该按钮调用SentrySdk.CaptureException函数来保存每本书在网格中的位置，并使用saveGrid()加载其序列化数据

HTML：

grid.load(serializedData)

JS：

<div>
    <h1 class="title">Your Books</h1>
    <button onclick="saveGrid(); grid.load(serializedData)">Save</button>
</div>
<div class="grid-stack"></div>

问题在于，当单击“保存”按钮时，将保存项目的位置，但不保存实际的HTML图像和内容（如按钮），如下所示：

解决方法

我已经解决了这个问题，并编辑了saveGrid()函数，并创建了一个新的loadGrid()函数，该函数可以在保存后加载网格，另外一个addBooks()函数可以从页面加载时的数组。以下是HTML和完整的JS代码：

HTML ：

<div class="grid-stack"></div>

JS：

var booksArray = [
    {"ISBN": '0385504209',"bookURL": "https://images.penguinrandomhouse.com/cover/9780767926034"},{"ISBN": '0143039431',"bookURL": "https://upload.wikimedia.org/wikipedia/commons/a/ad/The_Grapes_of_Wrath_%281939_1st_ed_cover%29.jpg"},{"ISBN": '0743273567',"bookURL": "https://prodimage.images-bn.com/pimages/9780743273565_p0_v8_s550x406.jpg"},{"ISBN": '0743297334',"bookURL": "https://upload.wikimedia.org/wikipedia/commons/8/8b/The_Sun_Also_Rises_%281st_ed._cover%29.jpg"},{"ISBN": '0553283685',"bookURL": "http://books.google.com/books/content?id=wDVV6y-8YHEC&printsec=frontcover&img=1&zoom=1&source=gbs_api"}
]

var grid = GridStack.init({
    column: 8,animate: true,//kinda wonky -->  float: true,removable: true,rtl: true
})

const addBooks = () => {
    grid.batchUpdate()
    booksArray.forEach((book,index) => {
        grid.addWidget(`
        <div>
            <div class="grid-stack-item-content">  
                <img src="${book.bookURL}" class="book-cover" id=${book.ISBN}></img>
                <div class="button-group">
                    <a href="something" class="button4" style="background-color:#f21832"><i class="fa fa-minus-circle"></i></a>

                    <button class="btn button4" data-toggle="modal" data-target="#exampleModalLong" style="background-color:#4f21cf"><i class="fa fa-info-circle"></i></button>
                    
                    <a href="something" class="button4" style="background-color:#18de54"><i class="fa fa-check"></i></a>  
                </div>  
            </div>
        </div>`,{
            width: 2,height: 3,noResize: true,staticGrid: true
        })

        grid.engine.nodes[index].ISBN = book.ISBN
        grid.engine.nodes[index].bookURL = book.bookURL

        console.log(document.querySelector('.book-cover').id)

    })
    grid.commit()  
    console.log(grid.engine.nodes)
}

const saveGrid = () => {
    serializedData = []
    console.log(grid.engine.nodes)
    grid.batchUpdate()
    grid.engine.nodes.forEach((node,index) => {
        console.log(node.el)
        console.log(node.ISBN)
        console.log(node.bookURL)
        serializedData.push({
                x: node.x,y: node.y,width: 2,ISBN: node.ISBN,bookURL: node.bookURL
        })
    })
    serializedData.sort()
    grid.commit()
    console.log(JSON.stringify(serializedData,null,'  '))
    console.log(grid.engine.nodes.length)
  }

const loadGrid = () => {
    // empty the grid first:
    grid.removeAll({detachNode:false}) //{detachNode: false}
    // grid.assign()
    console.log(serializedData)
    var items = GridStack.Utils.sort(serializedData)
    console.log(items)
    grid.batchUpdate()
    items.forEach((node,index) => {
        grid.addWidget(`
        <div>
            <div class="grid-stack-item-content">  
                <img src="${node.bookURL}" class="book-cover"></img>
                <div class="button-group">
                    <a href="something" class="button4" style="background-color:#f21832"><i class="fa fa-minus-circle"></i></a>
                    <a href="something" class="button4" style="background-color:#4f21cf"><i class="fa fa-info-circle"></i></a>
                    <a href="something" class="button4" style="background-color:#18de54"><i class="fa fa-check"></i></a>  
                </div>  
            </div>
        </div>`,node)

        grid.engine.nodes[index].ISBN = node.ISBN
        grid.engine.nodes[index].bookURL = node.bookURL

        console.log(node)

    })
    grid.commit()
    console.log(grid.engine.nodes.length)
    console.log(grid.engine.nodes)
  }

window.onload = addBooks()