一个handsometable的dome，实现了对增加，修改的操作。

Question

一个handsometable的dome，实现了对增加，修改的操作。

Opened this issue 6 years ago · 0 comments

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>handsometable测试</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https:// cdn.jsdelivr.net/npm/handsontable@7.0.2/dist/handsontable.full.min.css"
    />
  </head>
  <body>
    <div id="example"></div>

    <script src="https:// cdn.jsdelivr.net/npm/handsontable@7.0.2/dist/handsontable.full.min.js"></script>
    <script type="text/javascript">
      var objectData = [
          {
            id: 1,
            name: "Ted Right",
            address: "重庆",
            content: "其它"
          },
          {
            id: 2,
            name: "Frank Honest",
            address: "北京",
            content: "其它"
          },
          {
            id: 3,
            name: "Joan Well",
            address: "天津",
            content: "其它"
          },
          {
            id: 4,
            name: "Gail Polite",
            address: "内蒙",
            content: "其它"
          },
          {
            id: 5,
            name: "Michael Fair",
            address: "黑龙江",
            content: "其它"
          }
        ],
        container = document.getElementById("example");

      // 通过 JSON.parse(JSON.stringify(object)) 的方式,将数据的副本绑定到handsometable,这样handsometable改变数据的时候,不会影响到数据源,只会影响到副本
      var dataCopy = JSON.parse(JSON.stringify(objectData));

      var hot = new Handsontable(container, {
        // 调用handsometable的绑定数据的方式是: hot.getData()
        data: dataCopy,
        // 定义数据源为空时,handsometable的数据格式
        dataSchema: {
          id: null,
          name: null,
          address: null,
          content: null
        },
        colWidths: 300, // 列宽
        rowHeights: 83, // 行高
        // 通过定义width和height来决定容器的宽和高,当内容超出时,便会显示滚动条
        height: 450,
        width: "50%",
        // 通过设置fixedRowsTop来决定滚动时,锁定的行;通过设置fixedColumnsLeft来决定滚动时,锁定的列
        fixedColumnsLeft: 2,
        // 设置列名
        colHeaders: ["", "姓名", "地址", "备注"],
        // 设置显示行索引
        rowHeaders: true,
        // 许可秘钥
        licenseKey: "non-commercial-and-evaluation",
        // 留出一行空白,用作新增
        minSpareRows: 1,
        // 隐藏的列索引 例:columns:[0,1,2],隐藏0,1,2三列
        // 如果需要显示隐藏列的位置标识,可以在hiddenColumns中加上 indicators: true
        hiddenColumns: {
          columns: [0]
        },
        // className用作定义表格的对齐方式,多个值用空格隔开
        // 水平方向上的值: htLeft, htCenter, htRight, htJustify
        // 垂直方向上的值: htTop, htMiddle, htBottom
        className: "htCenter htMiddle",
        // 定义列和数据源的映射关系和一些其它属性
        columns: [
          {
            data: "id"
          },
          {
            data: "name"
            //  readOnly: true // 定义为只读列
          },
          {
            data: "address"
          },
          {
            data: "content"
          }
        ],
        // 当table数据发生改变的相应事件
        afterChange: function(change, source) {
          // change[0]是一个数组,第一个值是行索引/行名,第二个值是列索引/列名,第三个值是修改前的值,第四个值是修改后的值
          // source的值目前知道:loadData(加载数据);edit(新增或编辑)
          if (source === "loadData") {
            return;
          }

          // 如果修改的列是ID列,不作处理,防止进入死循环
          if (change[0][1] == "id") {
            return;
          }
          if (dataCopy[change[0][0]].id == null) {
            console.log("新增");
            // 生成新列的ID
            let mId = new Date().getTime();
            hot.setDataAtCell(change[0][0], 0, mId);
            console.log("新ID：" + mId);
          } else {
            console.log(
              "修改了ID为：" +
                dataCopy[change[0][0]].id +
                "的数据,值由" +
                change[0][2] +
                "修改为：" +
                change[0][3]
            );
          }
        }
      });
    </script>
  </body>
</html>