首页 › 求助中心 › 内嵌表格，报错

mtkj 发表于 2020-7-28 10:28:56

内嵌表格，报错

内嵌表格，wijmo.grid.detail 报错

KevinChen 发表于 2020-7-28 10:28:57

mtkj 发表于 2020-8-13 11:49


你好，这个需求可以用动态列宽实现，参考这个示例：
https://demo.grapecity.com.cn/wijmo/demos/Grid/Columns/ColumnWidth/purejs

mtkj 发表于 2020-7-28 10:32:40

这个内嵌表格能有多级的吗，现在我们需要无限级的内嵌，一层接一层的，每层的内嵌字段都不一致

KevinChen 发表于 2020-7-28 11:08:12

你好，支持多级嵌套，参考代码如下：

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOdata from '@grapecity/wijmo.odata';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjGridDetail from '@grapecity/wijmo.grid.detail';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    //
    // get OData categories and products
    var url = 'https://services.odata.org/Northwind/Northwind.svc';
    var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
      fields: ['CategoryID', 'CategoryName', 'Description']
    });
    var products = new wjOdata.ODataCollectionView(url, 'Products');
    //
    // shared column definitions
    var categoryColumns = [
      { binding: 'CategoryName', header: 'Category Name', width: '*' },
      { binding: 'Description', header: 'Description', width: '2*' }
    ];
    //
    // get products for a given category
    function getProducts(categoryID) {
      var arr = [];
      products.items.forEach(function (product) {
            if (product.CategoryID == categoryID) {
                arr.push(product);
            }
      });
      return arr;
    }
    //
    // grid with HTML detail
    var htmlDetail = new wjGrid.FlexGrid('#htmlDetail', {
      autoGenerateColumns: false,
      columns: categoryColumns,
      itemsSource: categories,
      isReadOnly: true
    });
    //
    // html detail provider
    var dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, {
      //
      // use animation when showing details
      isAnimated: true,
      //
      // create detail cells for a given row
      createDetailCell: function (row) {
            //
            // build detail content for the current category
            var cat = row.dataItem;
            var prods = getProducts(cat.CategoryID);
            var html = 'ID: <b>' + cat.CategoryID + '</b><br/>';
            html += 'Name: <b>' + cat.CategoryName + '</b><br/>';
            html += 'Description: <b>' + cat.Description + '</b><br/>';
            html += 'Products: <b>' + prods.length + ' items</b><br/>';
            html += '<ol>';
            prods.forEach(function (product) {
                html += '<li>' + product.ProductName + '</li>';
            });
            html += '</ol>';
            //
            // create and return detail cell
            var cell = document.createElement('div');
            cell.innerHTML = html;
            return cell;
      }
    });
    //
    // grid with grid detail
    var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
      autoGenerateColumns: false,
      columns: categoryColumns,
      itemsSource: categories,
      isReadOnly: true
    });
    //
    // grid detail provider
    var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {
      //
      // use animation when showing details
      isAnimated: true,
      //
      // limit height of detail rows
      maxHeight: 150,
      //
      // create detail cells for a given row
      createDetailCell: function (row) {
            var cell = document.createElement('div');
            var detailGrid = new wjGrid.FlexGrid(cell, {
                isReadOnly: true,
                autoGenerateColumns: false,
                itemsSource: getProducts(row.dataItem.CategoryID),
                columns: [
                  { header: 'ID', binding: 'ProductID' },
                  { header: 'Name', binding: 'ProductName' },
                  { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
                  { header: 'Unit Price', binding: 'UnitPrice' },
                  { header: 'Discontinued', binding: 'Discontinued' }
                ]
            });

            console.log(1);
            new wjGridDetail.FlexGridDetailProvider(detailGrid, {
                //
                // use animation when showing details
                isAnimated: true,
                //
                // limit height of detail rows
                maxHeight: 150,
                //
                // create detail cells for a given row
                createDetailCell: function (row) {
                  var cell = document.createElement('div');
                  var detailGrid = new wjGrid.FlexGrid(cell, {
                        isReadOnly: true,
                        autoGenerateColumns: false,
                        itemsSource: getProducts(row.dataItem.CategoryID),
                        columns: [
                            { header: 'ID', binding: 'ProductID' },
                            { header: 'Name', binding: 'ProductName' },
                            { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
                            { header: 'Unit Price', binding: 'UnitPrice' },
                            { header: 'Discontinued', binding: 'Discontinued' }
                        ]
                  });
                  return cell;
                }
            });

            return cell;
      }
    });
    //
}


将在线示例的app.js完整替换可以看到，第二张表。
https://demo.grapecity.com.cn/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/purejs

mtkj 发表于 2020-7-28 11:22:18

KevinChen 发表于 2020-7-28 15:32:44

你好，这里需要引入一个detail的包，如图：

mtkj 发表于 2020-7-29 16:55:27

KevinChen 发表于 2020-7-29 18:39:20

您好，这个问题还在调研，预计明天中午前回复。

mtkj 发表于 2020-8-10 16:04:25

KevinChen 发表于 2020-7-29 18:39
您好，这个问题还在调研，预计明天中午前回复。

了解下调研进度

KevinChen 发表于 2020-8-10 18:23:20

您好，这里的逻辑是默认的，如果需要上滚显示主row，需要调用父表的方法，参考代码：


import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOdata from '@grapecity/wijmo.odata';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjGridDetail from '@grapecity/wijmo.grid.detail';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    //
    // get OData categories and products
    var url = 'https://services.odata.org/Northwind/Northwind.svc';
    var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
      fields: ['CategoryID', 'CategoryName', 'Description']
    });
    var products = new wjOdata.ODataCollectionView(url, 'Products');
    //
    // shared column definitions
    var categoryColumns = [
      { binding: 'CategoryName', header: 'Category Name', width: '*' },
      { binding: 'Description', header: 'Description', width: '2*' }
    ];
    //
    // get products for a given category
    function getProducts(categoryID) {
      var arr = [];
      products.items.forEach(function (product) {
            if (product.CategoryID == categoryID) {
                arr.push(product);
            }
      });
      return arr;
    }
    //
    // grid with HTML detail
    var htmlDetail = new wjGrid.FlexGrid('#htmlDetail', {
      autoGenerateColumns: false,
      columns: categoryColumns,
      itemsSource: categories,
      isReadOnly: true
    });
    //
    // html detail provider
    var dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, {
      //
      // use animation when showing details
      isAnimated: true,
      //
      // create detail cells for a given row
      createDetailCell: function (row) {
            //
            // build detail content for the current category
            var cat = row.dataItem;
            var prods = getProducts(cat.CategoryID);
            var html = 'ID: <b>' + cat.CategoryID + '</b><br/>';
            html += 'Name: <b>' + cat.CategoryName + '</b><br/>';
            html += 'Description: <b>' + cat.Description + '</b><br/>';
            html += 'Products: <b>' + prods.length + ' items</b><br/>';
            html += '<ol>';
            prods.forEach(function (product) {
                html += '<li>' + product.ProductName + '</li>';
            });
            html += '</ol>';
            //
            // create and return detail cell
            var cell = document.createElement('div');
            cell.innerHTML = html;
            return cell;
      }
    });
    //
    // grid with grid detail
    var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
      autoGenerateColumns: false,
      columns: categoryColumns,
      itemsSource: categories,
      isReadOnly: true
    });
    //
    // grid detail provider
    var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {
      //
      // use animation when showing details
      isAnimated: false,
      //
      // limit height of detail rows
      maxHeight: 150,
      //
      // create detail cells for a given row
      createDetailCell: function (row) {
            var cell = document.createElement('div');
            var detailGrid = new wjGrid.FlexGrid(cell, {
                isReadOnly: true,
                autoGenerateColumns: false,
                itemsSource: getProducts(row.dataItem.CategoryID),
                columns: [
                  { header: 'ID', binding: 'ProductID' },
                  { header: 'Name', binding: 'ProductName' },
                  { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
                  { header: 'Unit Price', binding: 'UnitPrice' },
                  { header: 'Discontinued', binding: 'Discontinued' }
                ]
            });

            console.log(1);
            var dpGrid2 = new wjGridDetail.FlexGridDetailProvider(detailGrid, {
                //
                // use animation when showing details
                isAnimated: false,
                //
                // limit height of detail rows
                maxHeight: 550,
                //
                // create detail cells for a given row
                createDetailCell: function (row) {
                  var cell = document.createElement('div');
                  new wjGrid.FlexGrid(cell, {
                        isReadOnly: true,
                        autoGenerateColumns: false,
                        itemsSource: getProducts(row.dataItem.CategoryID),
                        columns: [
                            { header: 'ID', binding: 'ProductID' },
                            { header: 'Name', binding: 'ProductName' },
                            { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
                            { header: 'Unit Price', binding: 'UnitPrice' },
                            { header: 'Discontinued', binding: 'Discontinued' }
                        ]
                  });
                  setTimeout(function(){
                        detailGrid.scrollIntoView(0,0)
                  }, 100);
                  return cell;
                }
            });

            return cell;
      }
    });
    //
}


示例地址：

https://demo.grapecity.com.cn/wi ... s(RowDetail)/purejs

查看完整版本: 内嵌表格，报错