easyui portal动态加载面板及保存配置

本文使用easyui portal实现动态加载面板、自定义面板位置以及保存配置的面板功能。

html：

<div class="modual-main" id="module">
<!-- 分两列布局，需提前固定布局 -->
      <div style="width: 55%;">
      </div>

      <div style="width: 45%;">
      </div>
    </div>
    <button class="layui-btn layui-btn-normal" id="updateConfig" style="margin: 10px;">保存</button>

js:

//门户初始化
  $("#module").portal({
    border: false,
    fit: true
  });

  loadPanel();

  // 保存面板配置
  $("#updateConfig").click(function () {
    var panels1 = $("#module").portal('getPanels', 0);  // 获取第一列的所有面板
    var panels2 = $("#module").portal('getPanels', 1);  // 获取第二列的所有面板
    var dataList = [];
    // 遍历面板，保存id、title和columnIndex字段
    $.each(panels1, function (index, item) {
      let data = {};
      data.id = item[0].id;
      data.title = item.panel('options').title;
      data.columnIndex = 0;
      dataList.push(data);
    })
    $.each(panels2, function (index, item) {
      let data = {};
      data.id = item[0].id;
      data.title = item.panel('options').title;
      data.columnIndex = 1;
      dataList.push(data);
    })

    // 导出面板配置
    var blob = new Blob([JSON.stringify(dataList)], { type: "" });
    saveAs(blob, "panelConfig.json");
  });

  // 导入面板
  function loadPanel() {
    $.ajax({
      type: 'get',
      url: '/jsonData/panelConfig.json',
      dataType: 'json',
      success: function (data) {
        $.each(data, function (index, item) {
          var p = $('<div></div>').appendTo('body');
          p.panel({
            id: item.id,
            title: item.title,
            href: '/html/Panel/' + item.id + '.html',  // 每个面板链接到对应页面
            height: 280,
            // closable: true,
            collapsible: true
          });

          // 动态添加面板（在同一列的面板会依次加载到对应列的后面）
          $('#module').portal('add', {
            panel: p,
            columnIndex: item.columnIndex
          });
        });
      }
    })
  }

导出的json配置文件：

[{
    "id": "panel_tankStock",
    "title": "罐存统计",
    "columnIndex": 0
}, {
    "id": "panel_announce",
    "title": "公告",
    "columnIndex": 0
}, {
    "id": "panel_unDealt",
    "title": "待处理事务",
    "columnIndex": 0
}, {
    "id": "panel_armPlacing",
    "title": "出库统计(按鹤位)",
    "columnIndex": 1
}, {
    "id": "panel_module1",
    "title": "模块1",
    "columnIndex": 1
}]

效果图：