|
|
|
|
@ -1,4 +1,5 @@
|
|
|
|
|
(function () {
|
|
|
|
|
let initData = null;
|
|
|
|
|
let grid = null;
|
|
|
|
|
let currentComponent = null;
|
|
|
|
|
|
|
|
|
|
@ -11,15 +12,31 @@
|
|
|
|
|
|
|
|
|
|
/** 初始化 */
|
|
|
|
|
var init = function () {
|
|
|
|
|
const initDataStorage = localStorage.getItem('initData');
|
|
|
|
|
if (!initDataStorage) {
|
|
|
|
|
initData = {
|
|
|
|
|
id: `grid_${generateUniqueId()}`,
|
|
|
|
|
children: [],
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
initData = JSON.parse(initDataStorage);
|
|
|
|
|
}
|
|
|
|
|
console.log(initData, 'initData');
|
|
|
|
|
|
|
|
|
|
// 让gridstack知道如何渲染，组件children中的content直接渲染html
|
|
|
|
|
GridStack.renderCB = function (el, w) {
|
|
|
|
|
el.innerHTML = w.content;
|
|
|
|
|
};
|
|
|
|
|
grid = GridStack.init({
|
|
|
|
|
// 一行高度
|
|
|
|
|
cellHeight: 80,
|
|
|
|
|
cellHeight: 60,
|
|
|
|
|
// 间距
|
|
|
|
|
margin: 5,
|
|
|
|
|
minRow: 8,
|
|
|
|
|
acceptWidgets: true,
|
|
|
|
|
float: true,
|
|
|
|
|
removable: '#trash',
|
|
|
|
|
children: initData.children,
|
|
|
|
|
});
|
|
|
|
|
GridStack.setupDragIn('#components-panel .component-item', undefined, [
|
|
|
|
|
{
|
|
|
|
|
@ -38,28 +55,7 @@
|
|
|
|
|
]);
|
|
|
|
|
console.log(grid, 'grid实例');
|
|
|
|
|
|
|
|
|
|
var initData = [
|
|
|
|
|
// {
|
|
|
|
|
// x: 0,
|
|
|
|
|
// y: 0,
|
|
|
|
|
// w: 2,
|
|
|
|
|
// h: 2,
|
|
|
|
|
// content: 'item 1',
|
|
|
|
|
// data: {
|
|
|
|
|
// name: 'item 1',
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// x: 2,
|
|
|
|
|
// y: 3,
|
|
|
|
|
// w: 3,
|
|
|
|
|
// content: 'item 2',
|
|
|
|
|
// data: {
|
|
|
|
|
// name: 'item 2',
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
];
|
|
|
|
|
// grid.load(initData);
|
|
|
|
|
// grid.load(initData.children);
|
|
|
|
|
|
|
|
|
|
grid.engine.nodes.forEach((item) => {
|
|
|
|
|
handleAddComponent(item);
|
|
|
|
|
@ -82,7 +78,9 @@
|
|
|
|
|
|
|
|
|
|
// 处理添加组件之后的操作
|
|
|
|
|
var handleAddComponent = (component) => {
|
|
|
|
|
if (!component.id) {
|
|
|
|
|
component.id = `${component.type}_${generateUniqueId()}`;
|
|
|
|
|
}
|
|
|
|
|
setComponentView(component);
|
|
|
|
|
component.el.addEventListener('click', () => {
|
|
|
|
|
console.log('点击组件', component);
|
|
|
|
|
@ -192,6 +190,8 @@
|
|
|
|
|
// grid.addWidget({ w: 2, content: 'item 1' });
|
|
|
|
|
console.log(grid.save());
|
|
|
|
|
console.log(grid);
|
|
|
|
|
initData.children = grid.save();
|
|
|
|
|
localStorage.setItem('initData', JSON.stringify(initData));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/** 执行方法 */
|
|
|
|
|
|
LCJ-MinYa