1. 首頁 > 生活百科 > >

提高工作效率的神器：基于前端表格實現Chrome Excel擴展插件( 二 )

生活百科

  1. 其次通過XMLHttpRequest獲取任務列表數據，獲取數據后，可以進行表單數據綁定 。
var xhr = new XMLHttpRequest();xhr.open("GET",url,true);xhr.onreadystatechange = function () {if (xhr.readyState == 4) {var resp = JSON.parse(xhr.responseText);if (resp instanceof Array) {sheet.setDataSource(resp);}}}xhr.send();
  1. 綁定數據后還可以為其添加篩選、排序等功能 。如為其篩選區域 。如想查看北方區所有的論壇帖子，就可以在sheet表單第9列為其綁定篩選條件 。
【提高工作效率的神器：基于前端表格實現Chrome Excel擴展插件】var condition =new GC.Spread.Sheets.ConditionalFormatting.Condition(                  GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition,{compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType .contains,expected: "*北方區*",} );sheet.rowFilter().addFilterItem(9, condition);sheet.rowFilter().filter(9);sheet.rowFilter().filterButtonVisible(true);其結果如下圖所示：
提高工作效率的神器：基于前端表格實現Chrome Excel擴展插件

文章插圖
  1. 根據條件規則設置樣式
sheet.conditionalFormats.addSpecificTextRule(        GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,        "未處理",style1,ranges);sheet.conditionalFormats.addSpecificTextRule(        GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,        "處理中", style2,ranges);以上代碼分別為"未處理"與"處理中"賦值不同樣式 。這樣子可以很醒目看到論壇帖子處理狀態 。其結果如下所示：
提高工作效率的神器：基于前端表格實現Chrome Excel擴展插件

文章插圖
  1. 利用SpreadJS 可以導出Excel的特性，可以將當前sheet導出到Excel中 。在導出Excel前，要通過toJSON獲取其序列化數據 。這時候要注意序列化選項：將includeBindingSource設置為true, columnHeadersAsFrozenRows設置為true 。
var serializationOption = {        includeBindingSource: true,        columnHeadersAsFrozenRows: true,};var json = spread.toJSON(serializationOption);在序列化成功后，就可以導出到Excel文件啦 。var excelIo = new GC.Spread.Excel.IO();excelIo.save( json,function (blob) {    saveAs(blob, fileName);},function (e) {    console.log(e);});在manifest.json文件中進行基礎配置，如icons可以配置插件圖標，我們的插件安裝后 ， popup頁面也運行了；但是我們也發現了，popup頁面只能做臨時性的交互操作，用完就關了，不能存儲信息或者和其他標簽頁進行交互等等；這時就需要用到background（后臺） ， 它是一個常駐的頁面 ， 它的生命周期是插件中所有類型頁面中最長的；這里設置background.js 用來作為后臺管理 ， 處理通知等、刷新、徽章等數據 。至于action配置之前也提到了，可以配置彈出頁面，最后的permissions可以配置權限 。
提高工作效率的神器：基于前端表格實現Chrome Excel擴展插件

文章插圖
基礎配置之后，就可以在background.js中來進行我們的處理啦 。在插件安裝成功后，可以通過chrome.alarms這個api創建刷新時間與通知時間 。
chrome.runtime.onInstalled.addListener(function () {console.log("插件已被安裝");chrome.storage.sync.get(["notiTime", "updateTime"], function (result) {    if (result && result.notiTime) {      var notiTime = parseFloat(result.notiTime);      if (notiTime > 0) {        chrome.alarms.create("UserReplyTimer", { periodInMinutes: notiTime });      }    }    if (result && result.updateTime) {      var updateTime = parseFloat(result.updateTime);      if (updateTime > 0) {        chrome.alarms.create("UpdateCountTimer", {          periodInMinutes: updateTime,        });      }    }  });});

推薦閱讀