找回密码
 立即注册

QQ登录

只需一步，快速开始

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

Fishborne

金牌服务用户

33

主题

98

帖子

301

积分

金牌服务用户

积分
301
最新发帖

[已处理] wijmo grid 内嵌表格 Grids in Row Details

Fishborne
金牌服务用户   /  发表于：2020-6-8 16:10  /   查看：5002  /  回复：6
1金币

wijmo grid 内嵌表格 Grids in Row Details
可否多个主行的详情表都打开？

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

最佳答案

KevinChen

查看完整内容

FlexGrid的viewRange属性可以拿到当前可见的区域Range对象，参考API： https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#viewrange FlexGrid的updatedView事件可以在Grid界面变更后触发，参考： https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#updatedview 配合isDetailAvailable和isDetailVisible就可以先判断，再执行showDetail https://demo.grapecity.com.cn/ ...

6 个回复

倒序浏览
最佳答案
最佳答案
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2020-6-8 16:10:58
来自 7#
FlexGrid的viewRange属性可以拿到当前可见的区域Range对象，参考API：
https://demo.grapecity.com.cn/wi ... grid.html#viewrange

FlexGrid的updatedView事件可以在Grid界面变更后触发，参考：
https://demo.grapecity.com.cn/wi ... id.html#updatedview

配合isDetailAvailable和isDetailVisible就可以先判断，再执行showDetail
https://demo.grapecity.com.cn/wi ... l#isdetailavailable
https://demo.grapecity.com.cn/wi ... tml#isdetailvisible
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2020-6-8 18:19:06
2#
你好，可以支持，参考API：

https://www.grapecity.com/wijmo/ ... de.html#expandmulti

用法：



完整代码：

  1. import 'bootstrap.css';
  2. import '@grapecity/wijmo.styles/wijmo.css';
  3. import './styles.css';
  4. import * as wjOdata from '@grapecity/wijmo.odata';
  5. import * as wjGrid from '@grapecity/wijmo.grid';
  6. import * as wjGridDetail from '@grapecity/wijmo.grid.detail';
  7. //
  8. document.readyState === 'complete' ? init() : window.onload = init;
  9. //
  10. function init() {
  11.     //
  12.     // get OData categories and products
  13.     var url = 'https://services.odata.org/Northwind/Northwind.svc';
  14.     var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
  15.         fields: ['CategoryID', 'CategoryName', 'Description']
  16.     });
  17.     var products = new wjOdata.ODataCollectionView(url, 'Products');
  18.     //
  19.     // shared column definitions
  20.     var categoryColumns = [
  21.         { binding: 'CategoryName', header: 'Category Name', width: '*' },
  22.         { binding: 'Description', header: 'Description', width: '2*' }
  23.     ];
  24.     //
  25.     // get products for a given category
  26.     function getProducts(categoryID) {
  27.         var arr = [];
  28.         products.items.forEach(function (product) {
  29.             if (product.CategoryID == categoryID) {
  30.                 arr.push(product);
  31.             }
  32.         });
  33.         return arr;
  34.     }
  35.     //
  36.     // grid with HTML detail
  37.     var htmlDetail = new wjGrid.FlexGrid('#htmlDetail', {
  38.         autoGenerateColumns: false,
  39.         columns: categoryColumns,
  40.         itemsSource: categories,
  41.         isReadOnly: true
  42.     });
  43.     //
  44.     // html detail provider
  45.     var dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, {
  46.         //
  47.         // use animation when showing details
  48.         isAnimated: true,
  49.         //
  50.         // create detail cells for a given row
  51.         createDetailCell: function (row) {
  52.             //
  53.             // build detail content for the current category
  54.             var cat = row.dataItem;
  55.             var prods = getProducts(cat.CategoryID);
  56.             var html = 'ID: <b>' + cat.CategoryID + '</b><br/>';
  57.             html += 'Name: <b>' + cat.CategoryName + '</b><br/>';
  58.             html += 'Description: <b>' + cat.Description + '</b><br/>';
  59.             html += 'Products: <b>' + prods.length + ' items</b><br/>';
  60.             html += '<ol>';
  61.             prods.forEach(function (product) {
  62.                 html += '<li>' + product.ProductName + '</li>';
  63.             });
  64.             html += '</ol>';
  65.             //
  66.             // create and return detail cell
  67.             var cell = document.createElement('div');
  68.             cell.innerHTML = html;
  69.             return cell;
  70.         }
  71.     });
  72.     //
  73.     // grid with grid detail
  74.     var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
  75.         autoGenerateColumns: false,
  76.         columns: categoryColumns,
  77.         itemsSource: categories,
  78.         isReadOnly: true
  79.     });
  80.     //
  81.     // grid detail provider
  82.     var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {
  83.         //
  84.         // use animation when showing details
  85.         isAnimated: true,
  86.         //
  87.         // limit height of detail rows
  88.         maxHeight: 150,

  90.         detailVisibilityMode: wjGridDetail.DetailVisibilityMode.ExpandMulti,
  91.         //
  92.         // create detail cells for a given row
  93.         createDetailCell: function (row) {
  94.             var cell = document.createElement('div');
  95.             var detailGrid = new wjGrid.FlexGrid(cell, {
  96.                 headersVisibility: wjGrid.HeadersVisibility.Column,
  97.                 isReadOnly: true,
  98.                 autoGenerateColumns: false,
  99.                 itemsSource: getProducts(row.dataItem.CategoryID),
  100.                 columns: [
  101.                     { header: 'ID', binding: 'ProductID' },
  102.                     { header: 'Name', binding: 'ProductName' },
  103.                     { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
  104.                     { header: 'Unit Price', binding: 'UnitPrice' },
  105.                     { header: 'Discontinued', binding: 'Discontinued' }
  106.                 ]
  107.             });
  108.             return cell;
  109.         }
  110.     });
  111.     //
  112. }
复制代码


示例地址：

https://www.grapecity.com/wijmo/ ... -Detail/NestedGrids(RowDetail)/purejs

本帖子中包含更多资源

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

x
回复 使用道具 举报
Fishborne
金牌服务用户   /  发表于：2020-6-9 14:09:03
3#
直接复制您上述代码， 还是不能自动展开，
（目前只是在展开其中一个后，不会自动收起已经展开的）
是否可以执行一个方法 自动展开全部？  

本帖子中包含更多资源

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

x
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2020-6-9 16:46:56
4#
抱歉我理解有误，有个接口可以实现，参考：

https://demo.grapecity.com.cn/wi ... der.html#showdetail
回复 使用道具 举报
Fishborne
金牌服务用户   /  发表于：2020-6-9 23:18:43
5#
这个需要 “主row” 或者 row Index 来展开， 那如何获取 当前窗口(可视范围内) 的row 和 row index ?  如何监测 垂直滚动条的滚动， 以便获取当前可以看到的行 和 row Index ?
回复 使用道具 举报
Fishborne
金牌服务用户   /  发表于：2020-6-9 23:19:16
6#
showDetail(row: any, hideOthers?: boolean): void

这个需要 “主row” 或者 row Index 来展开， 那如何获取 当前窗口(可视范围内) 的row 和 row index ?  如何监测 垂直滚动条的滚动， 以便获取当前可以看到的行 和 row Index ?
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

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

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

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

Archiver| 手机版| 小黑屋|

返回顶部