找回密码
 立即注册

QQ登录

只需一步,快速开始

liqiang4j

金牌服务用户

14

主题

39

帖子

105

积分

金牌服务用户

积分
105

微信认证勋章

[已处理] 手机端显示问题

liqiang4j
金牌服务用户   /  发表于:2017-3-11 23:43  /   查看:4038  /  回复:7
我的表格在PC端使用浏览器访问没问题,在手机上显示的时候报以下错误:
Uncaught TypeError: Cannot read property 'style' of undefined at gc.spread.sheets.all.10.0.1.min.js : 31

这是什么原因?

7 个回复

倒序浏览
dexteryao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-3-13 11:21:59
沙发
根据这个错误还看不出问题。可否提供下可以重现的代码或者Demo
回复 使用道具 举报
liqiang4j
金牌服务用户   /  发表于:2017-3-13 21:51:31
板凳
服务器端报表页面代码:
<!DOCTYPE html>
<html>
<head>
    ${load("Include.html")}
    <link rel="stylesheet" type="text/css" href="/scripts/Spread.Sheets/css/gc.spread.sheets.excel2013white.10.0.1.css" />
    <script type="text/javascript" src="/scripts/Spread.Sheets/scripts/gc.spread.sheets.all.10.0.1.min.js"></script>
    <script type="text/javascript" src="/scripts/Spread.Sheets/scripts/interop/gc.spread.excelio.10.0.1.min.js"></script>
    <script type="text/javascript" src="/scripts/Spread.Sheets/scripts/FileSaver.js"></script>
    <script type="text/javascript" src="/Pages/Views/TJBB/SpreadLicense.js"></script>
    <script type="text/javascript" src="/Pages/Views/TJBB/Spread.FYTJ_Report.js"></script>
    <title>付油统计页面</title>
    <script type="text/javascript">
        var spread;
        var sheet;
        $(function ($) {
            spread = new GC.Spread.Sheets.Workbook(document.getElementById("SpreadGrid"), {
                sheetCount: 1
            });

            initDate();
            initSpread(spread);
        });
        //初始化Spread
        function initSpread(spread) {
            //加载模板
            spread.fromJSON(_Spread_FYTJ_Report);
            //激活Sheet
            sheet = spread.getActiveSheet();
            //设置表单保护
            sheet.options.isProtected = true;
            sheet.options.tabNavigationVisible = false;
            sheet.options.protectionOptions = {
                allowSelectLockedCells: true,
                allowSelectUnlockedCells: true,
                allowSort: false,
                allowEditObjects: false,
                allowResizeRows: true,
                allowResizeColumns: true
            };
        }
        //初始化付油日期组件
        function initDate() {
            var date = new Date();
            $("#CreateTime").datebox("setValue", date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
        }
        //查询数据
        function SearchData() {
            $.messager.progress({
                title: '请等待',
                msg: '正在查询数据......'

            });
            var model = { CreateTime: $("#CreateTime").datebox("getValue") };
            AjaxPost("/Handlers/TJBB/TJBBHandler.ashx?Action=GetFYTJReportData", function (data) {
                if (data) {
                    var bindData = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
                    sheet = spread.getActiveSheet();

                    sheet.suspendPaint();

                    sheet.setDataSource(bindData);

                    var style = new GC.Spread.Sheets.Style();
                    style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
                    style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
                    style.font = "10pt 微软雅黑";
                    style.backColor = "white";
                    style.borderLeft = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
                    style.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
                    style.borderRight = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
                    style.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);

                    for (var i = 3; i <= data.FYTJ_List.length + 3; i++) {
                        sheet.setRowHeight(i, 32);
                        for (var j = 1; j < 13; j++) {
                            sheet.setStyle(i, j, style, GC.Spread.Sheets.SheetArea.viewport);
                        }

                    }

                    //合并采油队列的行
                    window.setTimeout(function () {
                        var start = 5, end = 5;
                        var spanValue = sheet.getValue(5, 1);//采油队
                        for (var i = 6; i < sheet.getRowCount() ; i++) {
                            var newRowValue = sheet.getValue(i, 1);
                            end = i;
                            if (spanValue !== newRowValue) {
                                if (end - start > 1) {
                                    sheet.addSpan(start, 1, end - start, 1);
                                }

                                start = end;
                                spanValue = newRowValue;
                            }

                            if (!newRowValue) {
                                break;
                            }
                        }

                    }, 1000);

                    sheet.resumePaint();
                    $.messager.progress("close");
                }

            }, model, true);
        }
        //导出到Excel
        function ExportData() {
            var fileName = $("#CreateTime").datebox("getValue") + "付油统计表.xlsx";
            var excelIO = new GC.Spread.Excel.IO();
            var json = spread.toJSON({ includeBindingSource: true });
            excelIO.save(json, function (blob) {
                saveAs(blob, fileName);
            }, function (e) {
                console.log(e);
            });
        }
    </script>
</head>
<body class="easyui-layout">
    <div style="padding:2px;" data-options="region:'north',height:34,collapsible:false">
        <div id="toolbar">
            <div class="datagrid-btn-separator"></div>
            <label>付油日期:</label>
            <input id="CreateTime" name="CreateTime" class="easyui-datebox" data-options="required:true,missingMessage:'不能为空',width:120" />
            <a id="SearchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
            <a id="ExcelBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-excel',plain:true">导出Excel</a>
        </div>
    </div>
    <div style="padding:1px;" data-options="region:'center',collapsible:false">
        <div id="SpreadGrid" style="height:100%;"></div>
    </div>
</body>
</html>


手机端使用的APICloud框架实现,代码如下:
<!doctype html>
<html>

        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
                <title>报表窗口</title>
                <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
        </head>

        <body>
                <header class="aui-bar aui-bar-nav aui-bar-dark" id="aui-header">
                        <a class="aui-pull-left" tapmode>
                                <span class="aui-iconfont aui-icon-left"></span>返回
                        </a>
                        <div id="titleDiv" class="aui-title"></div>
                        <a class="aui-iconfont aui-icon-menu aui-pull-right"></a>
                </header>
        </body>
        <script type="text/javascript" src="../script/aui/api.js"></script>
        <script type="text/javascript">
                function closeWin() {
                        api.setScreenOrientation({
                                orientation: 'portrait_up'
                        });
                        api.closeWin();
                }
                apiready = function() {
                        api.parseTapmode();
                        $api.text($api.byId('titleDiv'),api.pageParam.name);
                        var header = $api.byId('aui-header');
                        $api.fixStatusBar(header);
                        var headerPos = $api.offset(header);
                        api.openFrame({
                                name: api.pageParam.name,
                                url: api.pageParam.url,
                                bounces: true,
                                rect: {
                                        x: 0,
                                        y: headerPos.h,
                                        w: headerPos.w,
                                        h: 'auto'
                                }
                        })
                };
        </script>

</html>


其中红色文字是服务器端报表页面请求地址。

回复 使用道具 举报
dexteryao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-3-14 09:15:11
地板
现在从代码上看不出什么问题。由于手机端也不好调试,建议您通过注释代码的方法先找到有问题的代码
回复 使用道具 举报
liqiang4j
金牌服务用户   /  发表于:2017-3-14 09:30:25
5#
是不是因为授权的问题?我是开发环境,用其他电脑访问的时候会显示黑屏,提示无效的Linense Key,是不是这个原因导致无法加载表格造成的。
回复 使用道具 举报
dexteryao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-3-14 12:10:14
6#
授权问题的话手机端也是会报授权错误的。
您现在用的是哪个版本?10.0.1还是10.0.2 如果 是10.0.1的话您给support.xa@grapecity.com 发邮件,我给您下新版的。
回复 使用道具 举报
liqiang4j
金牌服务用户   /  发表于:2017-3-14 12:25:48
7#
手机端就是报了授权错误,然后报了js错误。我用的是10.0.1
回复 使用道具 举报
Alice
社区贡献组   /  发表于:2017-3-14 16:57:36
8#
liqiang4j 发表于 2017-3-14 12:25
手机端就是报了授权错误,然后报了js错误。我用的是10.0.1

麻烦您给我们售后发邮件,我们给你提供最新版的spreadjs.
请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部