提高工作效率的神器：ChromeExcel扩展插件

容器创建完成后，就可以初始化SpreadJS了。在GC.Spread.Sheets.Workbook构造函数中，有两个参数。第一个参数是主机dom元素或id，这里是“ss”。第二个参数是初始化选项。这里设置了三个值：sheetCount、scrollbarMaxAlign、newTabVisible；分别代表表单的个数，滚动条与活动表单的最后一行和最后一列对齐，不显示新的表单选项。window.onload=function(){varspread=newGC.Spread.Sheets.Workbook("ss",{sheetCount:1,scrollbarMaxAlign:true,newTabVisible:false});};获取到SpreadJS对象后，就可以为其绑定设置数据，展示数据。首先，你可以给它绑定列，自定义表头，根据列名设置宽度，根据内容设置数据格式或单元格类型等，这时候你可以定义帖子的标题、发帖时间、是否是金牌用户、地区等。varsheet=spread.getActiveSheet();varcolInfos=[{name:"posttitle",displayName:"posttitle",size:300},{name:"posttime",displayName:"posttime",size:100，格式化程序：“MM-ddhh：mm”，}，{名称：“城市”，displayName：“区域”，cellType：ColorArea}，];sheet.autoGenerateColumns=false;sheet.bindColumns(colInfos);接着XMLHttpRequest获取任务列表数据，获取到数据后就可以进行表单数据绑定了。varxhr=newXMLHttpRequest();xhr.open("GET",url,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){varresp=JSON.parse(xhr.responseText);if(respinstanceofArray){sheet.setDataSource(resp);}}}xhr.send();你也可以在绑定数据后为其添加过滤、排序等功能。比如过滤面积之类的。如果想查看北区的所有论坛帖子，可以在sheet的第9栏绑定过滤条件。varcondition=newGC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition,{compareType:GC.Spread.Sheets.ConditionalFormatting.TextCompareType.contains,expected:"*北部地区*",});sheet.rowFilter().addFilterItem(9,条件);sheet.rowFilter().filter(9);sheet.rowFilter().filterButtonVisible(true);结果如下图：根据条件规则设置样式sheet.conditionalFormats.addSpecificTextRule(GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,"Unprocessed",style1,ranges);sheet.conditionalFormats.addSpecificTextRule(GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,"Processing",style2,ranges);上述代码为“未处理”和“处理”分配了不同的样式。这样您就可以清楚地看到论坛帖子的处理状态。结果如下：SpreadJS可以导出Excel的特性，可以将当前sheet导出到Excel。在导出Excel之前，需要通过toJSON获取其序列化后的数据。这时候注意序列化选项：设置includeBindingSource为true，columnHeadersAsFrozenRows为true。varserializationOption={includeBindingSource:true,columnHeadersAsFrozenRows:true,};varjson=spread.toJSON(serializationOption);序列化成功后，可以导出为Excel文件。varexcelIo=newGC.Spread.Excel.IO();excelIo.save(json,function(blob){saveAs(blob,fileName);},function(e){console.log(e);});在manifest.json文件中进行基本配置。例如，图标可以配置插件图标。我们的插件安装后，弹窗也运行起来了；但我们也发现弹出页面只能用于临时的交互操作，用完就会关闭，无法存储信息或与其他选项卡交互等；这时候就需要用到后台（background），它是一个常驻页面，它的生命周期是插件中所有类型页面中最长的；这里设置的background.js用于后台管理，处理通知、刷新、徽章等数据。前面说到action配置，可以配置弹出页面，最后一个权限可以配置权限。基本配置完成后，我们就可以在background.js中进行我们的处理了。插件安装成功后，您可以通过chrome.alarmsAPI创建刷新时间和通知时间。chrome.runtime.onInstalled.addListener(function(){console.log("插件已安装");chrome.storage.sync.get(["notiTime","updateTime"],function(result){if(result&&result.notiTime){varnotiTime=parseFloat(result.notiTime);if(notiTime>0){chrome.alarms.create("UserReplyTimer",{periodInMinutes:notiTime});}}if(result&&结果.updateTime){varupdateTime=parseFloat(result.updateTime);if(updateTime>0){chrome.alarms.create("UpdateCountTimer",{periodInMinutes:updateTime,});}}});});当刷新时间到时，您可以更改插件图标徽章中的待处理帖子数。使用chrome.actionAPI控制GoogleChrome工具栏中的扩展程序图标。chrome.action.setBadgeBackgroundColor({color:"#CCCCFF"});chrome.action.setBadgeText({text:unreadTopicCount>0?""+unreadTopicCount:"",});结果如下图，还有17个Post需要处理，提醒自己加油！当通知时间到了，电脑右下角会弹出浏览器通知，告知我们待处理任务的数量。使用chrome.notificationsAPI使用模板创建丰富的通知，并在系统托盘中向用户显示这些通知。当你的桌面不再停留在浏览器中时，也许你正在处理电子邮件，也许你正在编辑Excel。这时，系统发送的通知将大大提高您的工作效率。varoptions={type:"basic",iconUrl:"img/icon.png",title:"GCDNReminder",message:"你关注的版块有"+unreadTopicCount+"postsneedtobeprocessed",};chrome.notifications.clear("UserReplyNotification");chrome.notifications.create("UserReplyNotification",options);结果如下图所示：此外，您可以选择在浏览器选项卡中打开任务列表。您可以更清楚地查看待办事项列表。chrome.tabs.create({url:window.location.href});至此基本的Google插件的纯前端表格控件应用就介绍到这里了，快来开发自己的插件吧。更多纯前端表格在线demo示例：https://demo.grapecity.com.cn...移动端示例（扫码体验）：http://demo.grapecity.com.cn/...