提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件( 二 )


var sheet = spread.getActiveSheet();var colInfos = [                {name: "帖子标题", displayName: "帖子标题", size: 300},                {                    name: "发帖时间",                    displayName: "发帖时间",                    size: 100,                    formatter: "MM-dd hh:mm",              },{                name: "city",                displayName: "地区",                cellType: ColorArea              },     ];     sheet.autoGenerateColumns = false;     sheet.bindColumns(colInfos);

  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列为其绑定筛选条件 。
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. 【提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件】根据条件规则设置样式
sheet.conditionalFormats.addSpecificTextRule(        GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,        "未处理",style1,ranges);sheet.conditionalFormats.addSpecificTextRule(        GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,        "处理中", style2,ranges);以上代码分别为"未处理"与"处理中"赋值不同样式 。这样子可以很醒目看到论坛帖子处理状态 。其结果如下所示:
提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件

经验总结扩展阅读