在指定位置上添加多行

在已经搜索的页面上 在指定行位置插入多行

你好，FlexGrid中行对应的对象是Row，FlexGrid对象里有个rows属性，对应了RowCollection类，这个类用来管理flexGrid的row，可以用来insert空行。

页面上如何刷新出来呢？

你好，经测试，insert方法可以直接显示出新插入的行，如代码所示：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as wjGrid from '@grapecity/wijmo.grid';
   
5. //
   
6. document.readyState === 'complete' ? init() : window.onload = init;
   
7. //
   
8. function init() {
   
9.     //
   
10.     // generate some random data
    
11.     var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
    
12.     for (var i = 0; i < countries.length; i++) {
    
13.         data.push({
    
14.             country: countries[i],
    
15.             downloads: Math.round(Math.random() * 20000),
    
16.             sales: Math.random() * 10000,
    
17.             expenses: Math.random() * 5000
    
18.         });
    
19.     }
    
20.     //
    
21.     // grid with extra fixed row and a footer row
    
22.     var theGrid = new wjGrid.FlexGrid('#theGrid');
    
23.     var row = new wjGrid.Row();
    
24.     console.log(row.visible);
    
25.     theGrid.itemsSource = data; // bind the grid
    
26.     theGrid.rows.insert(2,new wjGrid.Row());
    
27.     theGrid.rows.insert(2,new wjGrid.Row());
    
28.     theGrid.rows.insert(2,new wjGrid.Row());
    
29.     theGrid.rows.insert(2,new wjGrid.Row());
    
30. }
    

复制代码

测试地址：
https://demo.grapecity.com.cn/wi ... /Collections/purejs

请注意，插入新行的操作需要放到绑定数据源之后，如果之前插入新行，绑定数据源后会导致重新生成行。如图：

你好，插入新行的逻辑请参考以下代码：


app.js

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import { SortDescription, format } from '@grapecity/wijmo';
   
4. import { FlexGrid } from '@grapecity/wijmo.grid';
   
5. document.readyState === 'complete' ? init() : window.onload = init;
   
6. function init() {
   
7.     // create some random data
   
8.     var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
   
9.     var data = [];
   
10.     for (var i = 0; i < countries.length; i++) {
    
11.         data.push({
    
12.             id: i,
    
13.             country: countries[i],
    
14.             sales: Math.random() * 10000,
    
15.             expenses: Math.random() * 5000
    
16.         });
    
17.     }
    
18.     // bind a grid to the raw data
    
19.     var theGrid = new FlexGrid('#theGrid', {
    
20.         allowSorting: false,
    
21.         showSort: false,
    
22.         autoGenerateColumns: false,
    
23.         columns: [
    
24.             { binding: 'country', header: 'Country', width: '2*' },
    
25.             { binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
    
26.             { binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' }
    
27.         ],
    
28.         itemsSource: data
    
29.     });
    
30. 
    
31.     document.getElementById("insertRows").addEventListener("click",function(){
    
32.         console.log(1);
    
33.         theGrid.itemsSource.splice(2,0,{
    
34.             id: 0,
    
35.             country: "",
    
36.             sales: "",
    
37.             expenses: ""
    
38.         })
    
39.         theGrid.itemsSource.splice(2,0,{
    
40.             id: 0,
    
41.             country: "",
    
42.             sales: "",
    
43.             expenses: ""
    
44.         })
    
45.         theGrid.itemsSource.splice(2,0,{
    
46.             id: 0,
    
47.             country: "",
    
48.             sales: "",
    
49.             expenses: ""
    
50.         })
    
51.         theGrid.itemsSource.splice(2,0,{
    
52.             id: 0,
    
53.             country: "",
    
54.             sales: "",
    
55.             expenses: ""
    
56.         })
    
57.         theGrid.itemsSource.splice(2,0,{
    
58.             id: 0,
    
59.             country: "",
    
60.             sales: "",
    
61.             expenses: ""
    
62.         })
    
63.         theGrid.collectionView.refresh();
    
64.     });
    
65. 
    
66. }
    

复制代码

index.html

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. <head>
   
4.     <meta charset="utf-8">
   
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   
6.     <title>GrapeCity Wijmo FlexGrid Arrays and CollectionViews Binding</title>
   
7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
8. 
   
9.     <!-- SystemJS -->
   
10.     <script src="node_modules/systemjs/dist/system.src.js"></script>
    
11.     <script src="systemjs.config.js"></script>
    
12.     <script>
    
13.         System.import('./src/app');
    
14.     </script>
    
15. </head>
    
16. <body>
    
17. <div class="container-fluid">
    
18.     <p id="selectedItem"></p>
    
19.     <button id="insertRows">插入5行</button>
    
20.     <div id="theGrid"></div>
    
21. </div>
    
22. </body>
    
23. </html>

复制代码

测试地址：
https://demo.grapecity.com.cn/wi ... nding/Basics/purejs

刷新flexGrid的接口请参考：
https://demo.grapecity.com.cn/wi ... exgrid.html#refresh
以及下方的：
https://demo.grapecity.com.cn/wi ... d.html#refreshcells

十分感谢 本贴问题已经解决

感谢反馈，帖子结贴了~