找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › WijmoJS专区 › 求助中心 › 查看内容
发新帖

mtkj

金牌服务用户

61

主题

134

帖子

481

积分

金牌服务用户

积分
481
最新发帖

[已处理] 在指定位置上添加多行

mtkj
金牌服务用户   /  发表于：2020-7-28 14:15  /   查看：4310  /  回复：7
在已经搜索的页面上 在指定行位置插入多行

7 个回复

倒序浏览
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2020-7-28 15:50:12
沙发
你好，FlexGrid中行对应的对象是Row，FlexGrid对象里有个rows属性，对应了RowCollection类，这个类用来管理flexGrid的row，可以用来insert空行。
回复 使用道具 举报
mtkj
金牌服务用户   /  发表于：2020-7-28 16:28:16
板凳
页面上如何刷新出来呢？
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2020-7-28 19:18:05
地板
你好，经测试，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

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2020-7-29 11:33:17
5#
你好，插入新行的逻辑请参考以下代码：


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.     });

  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.     });

  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">

  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

回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2020-7-29 15:34:18
6#
刷新flexGrid的接口请参考：
https://demo.grapecity.com.cn/wi ... exgrid.html#refresh
以及下方的：
https://demo.grapecity.com.cn/wi ... d.html#refreshcells
回复 使用道具 举报
mtkj
金牌服务用户   /  发表于：2020-7-30 11:11:42
7#
十分感谢 本贴问题已经解决
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2020-7-30 11:34:24
8#
感谢反馈，帖子结贴了~
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部