SpreadJS单元格数据绑定

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

发布于 2015/12/07 00:00

SpreadJS

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

1.初始化Spread

            var spread = new GcSpread.Sheets.Spread($("#ss")[0], { sheetCount: 2 });

            var sheet = spread.getActiveSheet();

            var sourceFormRow = -1;

            var sourceFormCol = -1;

            var sourceFormSheet = spread.getSheet(0);

            spread.newTabVisible(false);

            spread.highlightInvalidData(true);

            //cell:0 row:1 column:2

            sheet.selectionUnit(1);

            sheet.allowEditorReservedLocations(true);

            initDataSourceBind(spread.getSheet(0));

            initCellLevelBind(spread.getSheet(1));

            sheet.getColumn(0).visible(false);

            sheet.getColumn(7).visible(false);

            sheet.setIsProtected(true);

            sheet.getColumn(sheet.getColumnCount() - 1).locked(false);

            sheet.getColumn(sheet.getColumnCount() - 2).locked(false);



 



2.绑定按钮



            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 (clickSheet.getName() == "SourceForm")

                {

                    if (cellType instanceof GcSpread.Sheets.ButtonCellType)

                    {

                        sourceFormRow = clickRow;

                        sourceFormCol = clickCol;

                        if (args.col === (clickSheet.getColumnCount() - 2))

                        {

                            var result = confirm("Are you sure you want to delete this record", "OK", "Cancel");

                            if (result)

                            {

                                clickSheet.deleteRows(clickSheet.getActiveRowIndex(), 1);

                                if (clickSheet.isEditing())

                                {

                                    clickSheet.endEdit();

                                }

                            }

                        }

                        if (args.col === clickSheet.getColumnCount() - 1)

                        {

                            var clickItem = clickSheet.getDataSource()[clickRow];

                            _dummySource.id = clickItem.id;

                            _dummySource.name = clickItem.name;

                            _dummySource.line = clickItem.line;

                            _dummySource.color = clickItem.color;

                            _dummySource.price = clickItem.price;

                            _dummySource.cost = clickItem.cost;

                            _dummySource.weight = clickItem.weight;

                            _dummySource.discontinued = clickItem.discontinued;

                            _dummySource.rating = clickItem.rating;

                            _dummySource.dataIndex = clickRow;

                            var detialFormSheet = args.sheet.parent.getSheet(1);

                            detialFormSheet.setDataSource(new GcSpread.Sheets.CellBindingSource(_dummySource));

                            args.sheet.parent.setActiveSheetIndex(1);

                        }

                    }

                }

                if (clickSheet.getName() == "DetialForm")

                {

                    if (cellType instanceof GcSpread.Sheets.ButtonCellType)

                    {

                        if (sourceFormRow == -1)

                        {

                            alert("Please Input Valid Data");

                            return -1;

                        }

                        else

                        {

                            var updateItem = sourceFormSheet.getDataSource()[sourceFormRow];

                            updateItem.id = _dummySource.id;

                            updateItem.name = _dummySource.name;

                            updateItem.line = _dummySource.line;

                            updateItem.color = _dummySource.color;

                            updateItem.price = _dummySource.price;

                            updateItem.cost = _dummySource.cost;

                            updateItem.weight = _dummySource.weight;

                            updateItem.discontinued = _dummySource.discontinued;

                            updateItem.rating = _dummySource.rating;

                            args.sheet.parent.setActiveSheetIndex(0);

                        }

                    }

                }

            });



 



3.初始化Source



        function initDataSourceBind(sheet)

        {

            sheet.isPaintSuspended(true);

            sheet.setName("SourceForm");

            sheet.autoGenerateColumns = false;

            sheet.setDataSource(getProducts(100));

            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", displayName: "ID", size: 25 },

                { name: "name", displayName: "Name", size: 100 },

                { name: "line", displayName: "Line", cellType: lineCellType, size: 80 },

                { name: "color", displayName: "Color", cellType: colorCellType },

                { name: "price", displayName: "Price", formatter: "0.00" },

                { name: "cost", displayName: "Cost", formatter: "0.00" },

                { name: "weight", displayName: "Weight", formatter: "0.00" },

                { name: "discontinued", displayName: "Discontinued", cellType: checkBoxCellType, size: 80 },

                { name: "rating", displayName: "Rating", cellType: ratingCellType }

            ];

            sheet.bindColumns(cis);

            sheet.getColumn(7).hAlign(GcSpread.Sheets.HorizontalAlign.center)

                .vAlign(GcSpread.Sheets.VerticalAlign.center);

            sheet.defaults.rowHeight = 23;

            var columnCount = sheet.getColumnCount();

            sheet.addColumns(columnCount, 2);

            var deleteCellType = new GcSpread.Sheets.ButtonCellType();

            deleteCellType.marginTop(4).marginRight(4).marginBottom(4).marginLeft(4);

            deleteCellType.text("Delete");

            sheet.getColumn(columnCount).cellType(deleteCellType).hAlign(GcSpread.Sheets.HorizontalAlign.center).vAlign(GcSpread.Sheets.VerticalAlign.center);

            sheet.setValue(0, columnCount, "", GcSpread.Sheets.SheetArea.colHeader);

            var showDetialCellType = new GcSpread.Sheets.ButtonCellType();

            showDetialCellType.marginTop(4).marginRight(4).marginBottom(4).marginLeft(4);

            showDetialCellType.text("Detial");

            sheet.getColumn(columnCount + 1).cellType(showDetialCellType).hAlign(GcSpread.Sheets.HorizontalAlign.center).vAlign(GcSpread.Sheets.VerticalAlign.center);

            sheet.setValue(0, columnCount + 1, "", GcSpread.Sheets.SheetArea.colHeader);

            //set SourceForm column's width and the header's height

            for (var i = 1; i < sheet.getColumnCount() - 2; i++)

            {

                sheet.setColumnWidth(i, 80);

            }

            sheet.setColumnWidth(1, 110);

            sheet.setColumnWidth(2, 90);

            sheet.setRowHeight(0, 40, GcSpread.Sheets.SheetArea.colHeader);

            sheet.isPaintSuspended(false);

        }



 



4.初始化CellLevel



        function initCellLevelBind(sheet)

        {

            sheet.isPaintSuspended(true);

            sheet.setName("DetialForm");

            sheet.setColumnWidth(1, 90);

            sheet.setColumnWidth(2, 100);

            sheet.setColumnWidth(3, 90);

            sheet.setColumnWidth(4, 100);

            sheet.setColumnWidth(5, 100);

            sheet.setColumnWidth(6, 100);

            sheet.setRowHeight(6, 40);

            sheet.setRowHeight(14, 30);

            sheet.addSpan(6, 1, 1, 2);

            sheet.addSpan(6, 3, 1, 2);

            sheet.addSpan(6, 5, 1, 2);

            sheet.setGridlineOptions({ showVerticalGridline: false, showHorizontalGridline: false });

            sheet.canUserDragDrop(false);

            sheet.canUserDragFill(false);

            //set border of the area which can be edited

            for (var i = 0; i < 5; i += 2)

            {

                for (var j = 0; j < 4; j++)

                {

                    var range_1 = new GcSpread.Sheets.Range(7 + j, 2 + i, 1, 1);

                    if (i + 2 == 6)

                    {

                        sheet.setBorder(range_1, new GcSpread.Sheets.LineBorder("rgb(216,216,216)", GcSpread.Sheets.LineStyle.thin), { right: true, bottom: true }, 3);

                    }

                    sheet.setBorder(range_1, new GcSpread.Sheets.LineBorder("rgb(216,216,216)", GcSpread.Sheets.LineStyle.thin), { bottom: true }, 3);

                }

            }

            sheet.getCell(6, 1).value("Product Info").font("bold 15pt Courier New").vAlign(GcSpread.Sheets.VerticalAlign.center).hAlign(GcSpread.Sheets.HorizontalAlign.center).foreColor("white").backColor("rgb(182,134,218)");

            sheet.getCell(6, 3).value("Market Info").font("bold 15pt Courier New").vAlign(GcSpread.Sheets.VerticalAlign.center).hAlign(GcSpread.Sheets.HorizontalAlign.center).foreColor("white").backColor("rgb(182,134,218)");

            sheet.getCell(6, 5).value("Status").font("bold 15pt Courier New").vAlign(GcSpread.Sheets.VerticalAlign.center).hAlign(GcSpread.Sheets.HorizontalAlign.center).foreColor("white").backColor("rgb(182,134,218)");

            sheet.getCells(7, 1, 10, 1).font("bold 10pt Courier New").foreColor("rgb(64,64,64)").backColor("rgb(216,216,216)").vAlign(GcSpread.Sheets.VerticalAlign.center).hAlign(GcSpread.Sheets.HorizontalAlign.center);

            sheet.getCells(7, 3, 10, 3).font("bold 10pt Courier New").foreColor("rgb(64,64,64)").backColor("rgb(216,216,216)").vAlign(GcSpread.Sheets.VerticalAlign.center).hAlign(GcSpread.Sheets.HorizontalAlign.center);

            sheet.getCells(7, 5, 10, 5).font("bold 10pt Courier New").foreColor("rgb(64,64,64)").backColor("rgb(216,216,216)").vAlign(GcSpread.Sheets.VerticalAlign.center).hAlign(GcSpread.Sheets.HorizontalAlign.center);

            sheet.getCells(11, 1, 11, 6).backColor("rgb(182,134,218)");

            sheet.setValue(7, 1, "Name", GcSpread.Sheets.SheetArea.viewport);

            sheet.setValue(8, 1, "Line", GcSpread.Sheets.SheetArea.viewport);

            sheet.setValue(9, 1, "Color", GcSpread.Sheets.SheetArea.viewport);

            sheet.setValue(7, 3, "Price", GcSpread.Sheets.SheetArea.viewport);

            sheet.setValue(8, 3, "Cost", GcSpread.Sheets.SheetArea.viewport);

            sheet.setValue(9, 3, "Weight", GcSpread.Sheets.SheetArea.viewport);

            sheet.setValue(7, 5, "Discontinued", GcSpread.Sheets.SheetArea.viewport);

            sheet.setValue(8, 5, "Rating", GcSpread.Sheets.SheetArea.viewport);

            var dv1 = new GcSpread.Sheets.DefaultDataValidator.createNumberValidator(GcSpread.Sheets.ComparisonOperator.GreaterThan, 0);

            sheet.setDataValidator(7, 4, dv1);

            sheet.setDataValidator(8, 4, dv1);

            sheet.setDataValidator(9, 4, dv1);

            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);

            sheet.getCell(7, 2).bindingPath("name");

            sheet.getCell(8, 2).bindingPath("line").cellType(lineCellType);

            sheet.getCell(9, 2).bindingPath("color").cellType(colorCellType);

            sheet.getCell(7, 4).bindingPath("price");

            sheet.getCell(8, 4).bindingPath("cost");

            sheet.getCell(9, 4).bindingPath("weight");

            sheet.getCell(7, 6).bindingPath("discontinued").cellType(checkBoxCellType);

            sheet.getCell(8, 6).bindingPath("rating").cellType(ratingCellType);

            var updateCellType = new GcSpread.Sheets.ButtonCellType();

            updateCellType.text("Update");

            sheet.getCell(14, 6).cellType(updateCellType).hAlign(GcSpread.Sheets.HorizontalAlign.center).vAlign(GcSpread.Sheets.VerticalAlign.center);

            sheet.isPaintSuspended(false);

        }



 



运行截图：



2015-12-07_110618



2015-12-07_110626



示例下载：








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

    


                    

                    

                        
SpreadJS | 下载试用
纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。
如下资源列表，可以为您评估产品提供帮助：

                    

                

                

                
                    

                        

                            热门博客分类
                        

                        

                            

                                ComponentOne Enterprise
                                SpreadJS
                                ActiveReports
                                活字格
                                Wyn 商业智能
                                WijmoJS
                                GcExcel
                                ActiveReportsJS
                                行业动态
                            

                        

                    

                    

                        

                            

                                相关产品
                            

                            

                                

                                    

                                        

                                            
                                        

                                        

                                            

                                                SpreadJS
                                            

                                            

                                                可嵌入您系统的在线Excel的纯前端表格控件
                                            

                                            

                                                免费试用
                                                产品详情
                                            

                                        

                                    

                                

                            

                        

                        

                            

                                推荐相关案例
                            

                            

                                

                                    

                                        

                                            
                                        

                                        

                                            京东物流 - 表格技术在物流行业的敏捷应用实践
                                            
物流大促期间出库单量积压场景下，不同仓的生产操作人员需要在统一数据源基础上进行基于自身仓情况的个性化查询分析，从而能够实时监控客单情况，防止积压。要想实现这样的功能，对数据分析平台的要求就非常高。在引入SpreadJS之后，Udata平台可以为客户提供更高效的数据查询方案。

                                        

                                    

                                    

                                        

                                            
                                        

                                        

                                            网易 - 灵犀办公文档
                                            
为了在前端解析Excel文档，实现多人在线协同编辑，灵犀文档的数据集处理模块完全基于葡萄城的纯前端表格控件SpreadJS进行开发。通过嵌入SpreadJS，文档系统完美复刻了Excel的UI架构，并有效提升了系统多人协作和数据处理效率。

                                        

                                    

                                    

                                        

                                            
                                        

                                        

                                            用友 - 畅捷通 - 财务T-UFO报表
                                            
由畅捷通推出的财务T-UFO报表，是用友T+Cloud的两大功能模块之一，提供类Excel风格，用于制定个性化报表，并支持自定义取数，借助该报表，财务人员可按部门、个人、往来单位、存货、项目设置辅助核算，实现“人财货客”全链条闭环。

                                        

                                    

                                    

                                        

                                            
                                        

                                        

                                            航天信息软件 - 智慧统计平台
                                            
由航天信息软件研发的智慧统计平台，基于某统计局的报表填报系统项目而开发的，通过嵌入纯前端表格控件 SpreadJS，该平台实现了在线报表设计及分析功能，通过拖拽元数据（指标）可以快速设计各类报表样式，实现表内、表间审核公式和表内、表间计算公式等。

                                        

                                    

                                    

                                        

                                            
                                        

                                        

                                            立信会计师事务所：借助表格技术提升智能审计云平台应用体验
                                            
立信会计师事务所（特殊普通合伙）（简称“立信”）于 1927 年在上海创建，是中国建立最早和最有影响的会计师事务所之一。智能审计云平台（SACP）是立信自主研发的行业内第一款按风险导向审计模式要求，以重大报错风险识别、评估和应对作为工作主线，以数据为基础、以数据挖掘为核心、以数据共享为纽带，着眼于数据、立足于数据、集成大数据接口、以数据驱动审计计划的完全基于云的智慧型智能审计系统。

                                        

                                    

                                    查看更多精彩案例
                                

                            

                        

                        

                            

                                推荐相关资源
                            

                            

                                

                                    

                                        

                                            
                                        

                                        

                                            《精算与金融行业场景及技术应用》
                                            
本白皮书旨在深入探讨精算学在风险管理和财务分析两个关键领域中的应用。重点介绍如何利用类Excel纯前端表格技术进行数据分析和计算的有效性。通过精确的数据处理和准确的数值模型，帮助金融业企业提高运行效率、加强风险管理，增强公司的决策能力和竞争力。

                                        

                                    

                                    

                                        

                                            
                                        

                                        

                                            2023 葡萄城表格技术产品及应用白皮书
                                            
葡萄城基于40余年的专业控件技术积累和在电子表格应用领域的经验，推出《2023 葡萄城表格技术产品及应用白皮书》，通过本资料您可以详细了解到葡萄城表格产品的核心技术优势，领略典型应用场景与实践案例，还可获取丰富的技术资源。

                                        

                                    

                                    

                                        

                                            
                                        

                                        

                                            LIMS数字化系统方案白皮书
                                            
本白皮书旨在分享B/S架构下LIMS系统在数据填报、数据分析和生成报告等场景中的技术痛点及解决方案，帮助企业提升运行效能、质量管理水平，增强竞争力和科研能力。通过引入数字化系统，实验室能够实现更高效的管理和更准确的数据分析，为实验室的发展和创新提供了有力支持。

                                        

                                    

                                    

                                        

                                            
                                        

                                        

                                            《全面预算编制场景及技术应用》
                                            
本白皮书旨在深入探讨类Excel控件在全面预算编制中的应用，重点介绍如何借助类Excel控件在业务预算和财务预算场景中进行数据的填报和分析。通过提高预算编制的效率和准确性，帮助企业更好地理解和传达预算信息，增强公司的决策能力和竞争力。

                                        

                                    

                                    查看更多实用资源
                                

                            

                        

                        

                            

                                关注微信
                            

                            

                                

                                    

                                        葡萄城社区二维码
                                        
关注“葡萄城社区”

                                    

                                    

                                        活字格低代码二维码
                                        
关注“活字格低代码”

                                    

                                

                                
想了解更多信息，请联系我们, 随时掌握技术资源和产品动态

                            

                        

                    

                

            

            

                
葡萄城热门产品

                

                    

                        

                            活字格
                        

                        

                            打通现有软件，快速定制面向未来的个性化应用
                        

                        

                            免费试用
                            产品详情
                        

                        
                    

                    

                        

                            SpreadJS
                        

                        

                            可嵌入您系统的在线Excel的纯前端表格控件
                        

                        

                            免费试用
                            产品详情
                        

                        
                    

                    

                        

                            Wyn商业智能
                        

                        

                            可与企业自有系统深度集成，增强数据分析的 BI 工具
                        

                        

                            免费试用
                            产品详情