handsontable 例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    　<script src="../static/js/jquery-1.9.1.min.js"></script>

    <link type="text/css" rel="stylesheet" href="../static/js/hst/handsontable.full.css"/>
    <script type="text/javascript" src="../static/js/hst/handsontable.full.js"></script>

    <script src="../static/js/hst/languages/zh-CN.js"></script>

</head>
<body>
<div id="ee"></div>
</body>
<script>
    $(function(){

        var container = document.getElementById('ee');

        // 参数类型
        // var options = {
        //     data: Array || Object, // data 是整个表格的数据源，可以接收一个二维数组，或者一个对象
        //     rowHeaders: Boolean || Array || function,//上边的标题
        //     colHeaders: Boolean || Array || function,//左边的标题
        //     cells: function,     // row, col, prop//单元格标题
        //     stretchH: String,  // 'all', 'none', 'last',
        //     columns: Array || function,//data具体的展示列
        //     columnSorting: Boolean || Object,//设置是否可以排序
        //     manualColumnResize: true,//
        //     renderer: function,// 属性可以自定义单元格的各种属性
        // }



        // // 作为对象数据
        // data = [
        //     {td1: "b0_0", td2: "b0_1", td3: "b0_2"},
        //     {td1: "b1_0", td2: "b1_1", td3:"b1_2"},
        //     {td1: "b2_0", td2: 'b2_1', td3:"b2_2"},
        //     {td1: "b3_0", td2: 'b3_1', td3:"b3_2"},
        //     {td1: "b4_0", td2: 'b4_1', td3:"b4_2"},
        //     {td1: "b5_0", td2: 'b5_1', td3:"b5_2"},
        // ];
        // new Handsontable(container, {
        //     data: data,
        //     colHeaders: true,
        //     columns: [
        //         {data: 'td1'},
        //         {data: 'td2'},
        //         {data: 'td3'}
        //     ],
        // });
       //使用数组做对象
      let  data = [
            ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
            ['2012', 10, 11, 12, 13, 15, 16],
            ['2013', 10, 11, 12, 13, 15, 16],
            ['2014', 10, 11, 12, 13, 15, 16],
            ['2015', 10, 11, 12, 13, 15, 16],
            ['2016', 10, 11, 12, 13, 15, 16]
        ];

// 相应配置(每一列显示哪些数据由columns决定)
       let hot = new Handsontable(container, {
            data: data,
            colHeaders: true,//上标题 //应该是一样的
            rowHeaders: true,//左标题//可以是数组也可以是函数
            //cells 设置单元格的属性  设置第一列未只读 （只能是属性？不能是样式？？？）
            cells: function (row, col, prop) {
                var cellProperties = {};
                if (col === 0) {
                    cellProperties.readOnly = true;
                }
                return cellProperties;
            },
            stretchH: 'none', // all 全列按最大宽度展开; none 紧缩的表格; last 最后一列展开
            columns: [//columns 决定显示数组中对应的数据 如第一行显示 0 2 3...( 1不显示)
                {data: 0},
                {data: 2},
                {data: 3},
                {data: 4},
                {data: 5},
                {data: 6}
            ],
           renderer: function (instance, td, row, col, prop, value, cellProperties) {
               // 渲染为text类型，可选的有TimeRenderer、PasswordRenderer等不同的类型
               Handsontable.renderers.TextRenderer.apply(this, arguments);
               // 判断条件
               if (value && row === 2) {
                   td.style.backgroundColor = '#e0ecff';
               }
           }
        });
        hot.addHook('afterChange', function (changeData, source) {
            // changeData 是一个数组，第一个元素(数组)，记录所有修改信息
            if (!changeData) return;
            var change = changeData[0],
                row = change[0],
                colProp = change[1],
                preData = change[2],
                newData = change[3];
        })
      let a= hot.getCell(0, 0)
        debugger
    })
</script>
</html>
猜你喜欢
