2

尝试创建具有拖放和调整大小功能的动态仪表板。我想将 ASP 服务器控件添加到“grid-stack-item-content”，并在每 10 秒后通过 Ajax 更新它们。

https://jsfiddle.net/kLeu7y0h/

    <html lang="en">
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.all.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bigslide.js/0.12.0/bigSlide.min.js"></script>

    <style type="text/css">
        .grid-stack {
            background: lightgoldenrodyellow;
        }

        .grid-stack-item-content {
            color: #2c3e50;
            text-align: center;
            background-color: #18bc9c;
            margin: 10px;
        }
    </style>
</head>
<body>
  <div class="container-fluid">
            <div>
                <a class="btn btn-default" id="save-grid" href="#">Save</a>
                <a class="btn btn-default" id="load-grid" href="#">Load</a>
                <a class="btn btn-default" id="clear-grid" href="#">Clear</a>
                <input type="hidden" id="saved-data">
            </div>

            <br/>

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

            <div class="grid-stack-item" id="moni1">
              <div class="grid-stack-item-content">
                  <p>ASP Panel A</p>
              </div>
            </div>
            <div class="grid-stack-item" id="moni2">
               <div class="grid-stack-item-content">
                  <p>ASP Panel B</p>
              </div>
            </div>
            <div class="grid-stack-item" id="moni3">
                <div class="grid-stack-item-content">
                  <p>ASP Panel C</p>
              </div>
            </div>
            <div class="grid-stack-item" id="moni4">
                 <div class="grid-stack-item-content">
                  <p>ASP Panel D</p>
              </div>
            </div>
    </div>
<script>
$(function () {
                var options = {
                };
                $('.grid-stack').gridstack(options);

                new function () {
                    this.serializedData = [
                        { x: 0, y: 0, width: 2, height: 2, id: moni1 },
                        { x: 0, y: 1, width: 2, height: 2, id: moni2 },
                        { x: 0, y: 2, width: 2, height: 2, id: moni3 },
                        { x: 0, y: 3, width: 2, height: 2, id: moni4 },
                    ];

                    var grid = $('.grid-stack').data('gridstack');

                    this.loadGrid = function () {
                        grid.removeAll();
                        var items = GridStackUI.Utils.sort(this.serializedData);
                        _.each(items, function (node) {
                            grid.addWidget(node.id,
                                node.x, node.y, node.width, node.height);
                        }, this);
                        return false;
                    }.bind(this);

                    this.saveGrid = function () {
                        this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
                            el = $(el);
                            var node = el.data('_gridstack_node');
                            return {
                                x: node.x,
                                y: node.y,
                                width: node.width,
                                height: node.height,
                                id: node.id
                            };
                        }, this);
                        $('#saved-data').val(JSON.stringify(this.serializedData, null, '    '));
                        return false;
                    }.bind(this);

                    this.clearGrid = function () {
                        grid.removeAll();
                        return false;
                    }.bind(this);

                    $('#save-grid').click(this.saveGrid);
                    $('#load-grid').click(this.loadGrid);
                    $('#clear-grid').click(this.clearGrid);

                    this.loadGrid();
                };
            });
</script>
</body>
</html>

我需要从从数据库中检索到的 JSON 中加载元素以形成布局。但是每次我单击“加载”按钮时，都会显示最大调用堆栈大小错误。

4

0 回答 0