SpreadJS是一个JavaScript的电子表格和网格功能控件。用于显示和管理类似Excel的数据。SpreadJS使用Json作为加载数据的方式。本文主要介绍通过SpreadJS自定义列数据绑定。

1.SpreadJS的数据可以通过JSON的方式加载，在演示中为了简单，使用Javascript生成

        var _lines = ["计算机", "洗净器", "炉灶"];
        var _colors = ["红色", "绿色", "蓝色", "白色"];
        var _ratings = ["差", "正常", "好", "非常好"];
        function Product(id, line, color, name, price, cost, weight, discontinued, rating)
        {
            this.id = id;
            this.产品 = line;
            this.颜色 = color;
            this.名称 = name;
            this.价格 = price;
            this.成本 = cost;
            this.重量 = weight;
            this.折扣 = discontinued;
            this.等级 = rating;
        }
        function _getSign(index)
        {
            if (index < 10)
            {
                return (parseInt(Math.random() * 100 % 6) === 0 ? -1 : 1);
            } else
            {
                return 1;
            }
        }
        function getProducts(count)
        {
            var dataList = [];
            for (var i = 0; i < count; i++)
            {
                var line = _lines[parseInt(Math.random() * 3)];
                dataList[i] = new Product(i,
                        line,
                        _colors[parseInt(Math.random() * 4)],
                        line + " " + line.charAt(0) + i,
                        parseInt(Math.random() * 501 + 500) * _getSign(i),
                        parseInt(Math.random() * 601) * _getSign(i),
                        parseInt(Math.random() * 101),
                        !!(Math.random() > 0.5),
                        _ratings[parseInt(Math.random() * 4)]);
            }
            return dataList;
        }

2.初始化SpreadJS

            var spread = new GcSpread.Sheets.Spread($("#ss")[0]);
            var sheet = spread.getSheet(0);
            sheet.isPaintSuspended(true);
 

3.将自动绑定设置为False，并加载数据

            sheet.autoGenerateColumns = false;
            sheet.setDataSource(getProducts(50));

4.将单元格进行格式设置

            var lineCellType = new GcSpread.Sheets.ComboBoxCellType();
            lineCellType.items(_lines);
            var colorCellType = new GcSpread.Sheets.ComboBoxCellType();
            colorCellType.items(_colors);
            var checkBoxCellType = new GcSpread.Sheets.CheckBoxCellType();
            var ratingCellType = new GcSpread.Sheets.ComboBoxCellType();
            ratingCellType.items(_ratings);
            var cis = [
                { name: "id" },
                { name: "名称", size: 100 },
                { name: "产品", cellType: lineCellType, size: 80 },
                { name: "颜色", cellType: colorCellType },
                { name: "价格", formatter: "0.00" },
                { name: "成本", formatter: "0.00" },
                { name: "重量", formatter: "0.00" },
                { name: "折扣", cellType: checkBoxCellType, size: 80 },
                { name: "等级", cellType: ratingCellType }
            ];
            sheet.bindColumns(cis);
            sheet.defaults.rowHeight = 23;

5.增加删除按钮

            var columnCount = sheet.getColumnCount();
            sheet.addColumns(columnCount, 1);
            var buttonCellType = new GcSpread.Sheets.ButtonCellType();
            buttonCellType.marginTop(4).marginRight(4).marginBottom(4).marginLeft(4);
            buttonCellType.text("删除");
            sheet.getColumn(columnCount).cellType(buttonCellType)
                    .hAlign(GcSpread.Sheets.HorizontalAlign.center)
                    .vAlign(GcSpread.Sheets.VerticalAlign.center);
            sheet.isPaintSuspended(false);

6.绑定删除相关事件

            spread.bind(GcSpread.Sheets.Events.ButtonClicked, function (e, args)
            {
                var clickSheet = args.sheet;
                var clickRow = args.row;
                var clickCol = args.col;
                var cellType = clickSheet.getCellType(clickRow, clickCol);
                if (cellType instanceof GcSpread.Sheets.ButtonCellType)
                {
                    var result = confirm("是否确定删除这行数据", "确定", "取消");
                    if (result)
                    {
                        clickSheet.deleteRows(clickSheet.getActiveRowIndex(), 1);
                        if (clickSheet.isEditing())
                        {
                            clickSheet.endEdit();
                        }
                    }
                }
            });

7.执行入口函数

        $(document).ready(function ()
        {
            initFunction();
            $("#ckbAllowEditorReservedLocations").click(function ()
            {
                sheet.allowEditorReservedLocations($("#ckbAllowEditorReservedLocations").prop("checked"));
            });
        });

运行截图：

下载地址：

这就是你想要的SpreadJS，快来官网了解并下载它吧！