在指定位置上添加多行
在已经搜索的页面上 在指定行位置插入多行你好，FlexGrid中行对应的对象是Row，FlexGrid对象里有个rows属性，对应了RowCollection类，这个类用来管理flexGrid的row，可以用来insert空行。 页面上如何刷新出来呢？ 你好，经测试，insert方法可以直接显示出新插入的行，如代码所示：
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries,
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
//
// grid with extra fixed row and a footer row
var theGrid = new wjGrid.FlexGrid('#theGrid');
var row = new wjGrid.Row();
console.log(row.visible);
theGrid.itemsSource = data; // bind the grid
theGrid.rows.insert(2,new wjGrid.Row());
theGrid.rows.insert(2,new wjGrid.Row());
theGrid.rows.insert(2,new wjGrid.Row());
theGrid.rows.insert(2,new wjGrid.Row());
}
测试地址：
https://demo.grapecity.com.cn/wijmo/demos/Grid/Rows/Collections/purejs
请注意，插入新行的操作需要放到绑定数据源之后，如果之前插入新行，绑定数据源后会导致重新生成行。如图：
你好，插入新行的逻辑请参考以下代码：
app.js
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import { SortDescription, format } from '@grapecity/wijmo';
import { FlexGrid } from '@grapecity/wijmo.grid';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries,
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
// bind a grid to the raw data
var theGrid = new FlexGrid('#theGrid', {
allowSorting: false,
showSort: false,
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'Country', width: '2*' },
{ binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
{ binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' }
],
itemsSource: data
});
document.getElementById("insertRows").addEventListener("click",function(){
console.log(1);
theGrid.itemsSource.splice(2,0,{
id: 0,
country: "",
sales: "",
expenses: ""
})
theGrid.itemsSource.splice(2,0,{
id: 0,
country: "",
sales: "",
expenses: ""
})
theGrid.itemsSource.splice(2,0,{
id: 0,
country: "",
sales: "",
expenses: ""
})
theGrid.itemsSource.splice(2,0,{
id: 0,
country: "",
sales: "",
expenses: ""
})
theGrid.itemsSource.splice(2,0,{
id: 0,
country: "",
sales: "",
expenses: ""
})
theGrid.collectionView.refresh();
});
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexGrid Arrays and CollectionViews Binding</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<p id="selectedItem"></p>
<button id="insertRows">插入5行</button>
<div id="theGrid"></div>
</div>
</body>
</html>
测试地址：
https://demo.grapecity.com.cn/wijmo/demos/Grid/Data-binding/Basics/purejs
刷新flexGrid的接口请参考：
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#refresh
以及下方的：
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#refreshcells 十分感谢 本贴问题已经解决:loveliness: 感谢反馈，帖子结贴了~
页:
[1]