关于AngularJS中表格列展示的问题

收藏

1. AngularJS中设置表格只展示前5列：
<gc-spread-sheets id="spread-sheets" newtabvisible="false" style="width:100%;height:800px;margin-top:-3rem;padding-right:3.5rem;padding-left:3.5rem">
<worksheets>
      <worksheet datasource="spreadSrcData" name="Data">
         <columns>
            <column ng-repeat="col in spreadTableColumns.slice(0,5)" datafield="col.name" headertext="col.displayName"></column>
         </columns>
      </worksheet>
</worksheets>
</gc-spread-sheets

其中 spreadSrcData为绑定的表格数据， spreadTableColumns为表头，格式如下
$scope.spreadTableColumns = [{
            name: '0',
            displayName: "test",
         },
...
];

但是表格列过滤没有生效，还是展示的全量的列。

chrome里面看渲染出来的DOM结果是正确的，但是为什么实际展示的表格没有实现过滤列？
<worksheets class="ng-scope">
<worksheet datasource="spreadSrcData" name="Data">
      <columns>
         
         <column ng-repeat="col in spreadTableColumns.slice(0,5)" datafield="col.name" headertext="col.displayName"
            class="ng-scope" style=""></column>
         <column ng-repeat="col in spreadTableColumns.slice(0,5)" datafield="col.name" headertext="col.displayName"
            class="ng-scope"></column>
         <column ng-repeat="col in spreadTableColumns.slice(0,5)" datafield="col.name" headertext="col.displayName"
            class="ng-scope"></column>
         <column ng-repeat="col in spreadTableColumns.slice(0,5)" datafield="col.name" headertext="col.displayName"
            class="ng-scope"></column>
         <column ng-repeat="col in spreadTableColumns.slice(0,5)" datafield="col.name" headertext="col.displayName"
            class="ng-scope"></column>
      </columns>
</worksheet>
</worksheets>

KevinChen · KevinChen

您好，SpreadJS 整个都是用canvas 绘制的，您说的DOM是哪里的？

您用的是Spread JS 还是Spread Views ？具体想实现什么需求?

WangChangsong · WangChangsong

KevinChen 发表于 2018-12-12 09:11
您好，SpreadJS 整个都是用canvas 绘制的，您说的DOM是哪里的？

您用的是Spread JS 还是Spread Views ？ ...

用的是Spread.Sheet
想实现的需求是：列过滤。  通过绑定angularjs中可展示列的列表来实现列过滤
实现方案和给的samples/AngularJSSample/AngularJSExplorer/default.html#/spreadjs/databinding里的Part Data页签一样，通过html里面定义column 标签规定显示哪些列，
<gc-spread-sheets id="ssdb" newtabvisible="false">
<worksheets>
      <worksheet datasource="testData" name="All Data"></worksheet>
      <worksheet datasource="airports" name="Part Data">
         <columns>
            
            <column ng-repeat="col in showColumns" datafield="{{getColName($index)}}" headertext="{{getColName($index)}}"></column>
         </columns>
      </worksheet>
      <worksheet datasource="testData" name="Test"></worksheet>
</worksheets>
</gc-spread-sheets>

与样例里面的区别在于column 标签通过ng-repeat生成，与$scope.showColumns绑定，想要通过变更$scope.showColumns实现动态刷新可展示列的能力。但是发现bug,通过ng-repeat生成的column 标签无法起到表格列过滤的作用，推测是gc-spread-sheets是在ng-repeat完成加载之前渲染完成的，所以gc-spread-sheets页签无法取到column 标签内容。

请问如何解决这个问题？

KevinChen · KevinChen

您好，我这边没有重现问题，

麻烦您上传一个能重现问题的工程，或者把配置方法和代码打包上传到附件，

我们为您排查一下问题出在哪里。

WangChangsong · WangChangsong

KevinChen 发表于 2018-12-12 18:13
您好，我这边没有重现问题，

麻烦您上传一个能重现问题的工程，或者把配置方法和代码打包上传到附件，

公司里面不能上传代码和图片，我在我们的demo工程里面试了一下也是不行的。你可以按照我的步骤修改一下demo工程就能重现了：
1. samples/AngularJSSample/AngularJSExplorer/default.html增加chart的js
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.charts.12.0.2.min.js"></script>
2. databinding.html文件里column 标签改为ng-repeat生成
<gc-spread-sheets id="ssdb" newtabvisible="false">
<worksheets>
      <worksheet datasource="airports" name="All Data"></worksheet>
      <worksheet datasource="airports" name="Part Data">
         <columns>
            <column ng-repeat="col in showColumns" datafield="col.name" headertext="col.displayName"></column>
         </columns>
      </worksheet>
</worksheets>
</gc-spread-sheets>

3. waxCtrl.js里面绑定数据：
$scope.showColumns = [{
      name: "name",
      displayName: "NAME__",
      size: 40,
      resizable: false,
},{
      name: "city",
      displayName: "CITY__",
      size: 100,
      resizable: false,
},{
      name: "lon",
      displayName: "LON__",
      size: 10,
      resizable: false,
},]

这样在http://localhost:8098/lib/spread-sheets/samples/AngularJSSample/AngularJSExplorer/default.html#/spreadjs/databinding页面的Part Data页签并没有实现列过滤的功能

KevinChen · KevinChen

好的，我这边搭建环境测试一下，

本帖状态暂时设置为“未处理”，

后续进展我会继续在本帖回复您。

		自动登录	找回密码
密码			立即注册

[已处理] 关于AngularJS中表格列展示的问题

5 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章