Gridstack.js: ์œ„์น˜๋ฅผ json์œผ๋กœ ๋‚ด๋ณด๋‚ด๊ธฐ

์— ๋งŒ๋“  2018๋…„ 08์›” 01์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: gridstack/gridstack.js

@hairyheron
์•ˆ๋…•ํ•˜์„ธ์š”,
ํ˜„์žฌ ์œ„์น˜๋ฅผ JSON ํ˜•์‹์œผ๋กœ ๋‚ด๋ณด๋‚ด๊ณ  ์ด json์œผ๋กœ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•.

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํŽ˜์ด์ง€์—์„œ gridstack์˜ ๋ ˆ์ด์•„์›ƒ์„ ์œ ์ง€ํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์งง์€ ์˜ˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

var getGridJSON = function () {
    var nodes = $('#gridstack').data('gridstack').grid.nodes;
    return nodes.map(function(obj, idx){
       return {
           x: obj.x,
           y: obj.y,
           width: obj.width,
           height: obj.height,
           minHeight: obj.minHeight,
           minWidth: obj.minWidth
       }
    });
};
// this will give you array with each gridstack item, stringify it and persist in the backend :)
console.log(getGridJSON());

๋ชจ๋“  3 ๋Œ“๊ธ€

์ €๋Š” ์ด ํ”„๋กœ์ ํŠธ์˜ ๊ด€๋ฆฌ์ž๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋”๋ผ๋„ ๋‚˜๋Š” ๋‹น์‹ ์˜ ์งˆ๋ฌธ์„ ์ดํ•ดํ•˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

ํŽ˜์ด์ง€์—์„œ gridstack์˜ ๋ ˆ์ด์•„์›ƒ์„ ์œ ์ง€ํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์งง์€ ์˜ˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

var getGridJSON = function () {
    var nodes = $('#gridstack').data('gridstack').grid.nodes;
    return nodes.map(function(obj, idx){
       return {
           x: obj.x,
           y: obj.y,
           width: obj.width,
           height: obj.height,
           minHeight: obj.minHeight,
           minWidth: obj.minWidth
       }
    });
};
// this will give you array with each gridstack item, stringify it and persist in the backend :)
console.log(getGridJSON());

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค, @zhanazhan . ์ข‹์€ ํ•ด๊ฒฐ์ฑ… ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰