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

Question

我有一个带有样式的书籍及其图像的网格，使用 gridstack 库创建：

我还有一个“保存”按钮，它调用 saveGrid() 函数来保存每本书在网格上的位置，并使用 grid.load(serializedData)

加载其序列化数据

HTML:

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

JS:

saveGrid = () => {
    serializedData = [];
    grid.engine.nodes.forEach((node) => {
      serializedData.push({
        x: node.x,
        y: node.y,
        width: node.width,
        height: node.height,
        noResize: true, 
        el: node.el
      });
    });
  };

问题是，当点击“保存”按钮时，项目的位置被保存，而不是实际的HTML图像和内容（如按钮），如下所示：

Answer 1

我已经解决了问题并编辑了我的 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,
                height: 3,
                noResize: true,
                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()

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

How to serialize and load an HTML element's data in gridstack.js?

javascript

html

dom

serialization

gridstack