如何从 forge 查看器创建数据表

问题描述 投票:0回答:1

我想创建一个表来表示我在 forge 查看器中加载的模型中的数据。

我希望表格位于停靠面板中,并显示模型中元素的属性(每个元素的级别、名称、注释、区域、类型名称 --> [如果它具有该属性])。

我尝试使用API参考,并创建一个DataTable,但我没有找到如何实际实现它的示例。

我需要在何时何地设置数据表? (在创建对接面板之后还是之前?)

我应该在构造函数中传递的数组内容是什么? (根据文档:行数组的数组,列数组。是行数组,只是包含列数组的数组?)

这是我当前的扩展代码,显示了我想要调整的每个属性的模型中实例的数量:

class testTest extends Autodesk.Viewing.Extension {
constructor(viewer, options) {
    super(viewer, options);
    this._group = null;
    this._button = null;
}

load() {
    console.log('testTest has been loaded');
    return true;
}

unload() {
    // Clean our UI elements if we added any
    if (this._group) {
        this._group.removeControl(this._button);
        if (this._group.getNumberOfControls() === 0) {
            this.viewer.toolbar.removeControl(this._group);
        }
    }
    console.log('testTest has been unloaded');
    return true;
}


   // The Viewer contains all elements on the model, including categories (e.g. families or part definition), 
//so we need to enumerate the leaf nodes, meaning actual instances on the model.
getAllLeafComponents(callback) {
    this.viewer.getObjectTree(function (tree) {
        let leaves = [];// an empty 'leaf' list that we want to fill wiith the objects that has no mo children
        //dbId== object id
        // for each child that we enumerate from a root, call a code , and finally a true /false flag parameter  that run the function recursivly for all the children of a child.
        tree.enumNodeChildren(tree.getRootId(), function (dbId) {
            if (tree.getChildCount(dbId) === 0) {
                leaves.push(dbId);// if the object has no children--> add it to the list.
            }
        }, true);// the last argument we past ("true") will make sure that the function in the seccond argument ("function (dbId)(...)" ")will run recursively not only for the children of the roots, 
        //but for all the children and childrtn's children.
      

        callback(leaves);//return the leaves 
    });
}

onToolbarCreated() {
    // Create a new toolbar group if it doesn't exist
    this._group = this.viewer.toolbar.getControl('allMyAwesomeExtensionsToolbar');//if there is no controller named "allMyAwesomeExtensionsToolbar" create one
    if (!this._group) {
        this._group = new Autodesk.Viewing.UI.ControlGroup('allMyAwesomeExtensionsToolbar');
        this.viewer.toolbar.addControl(this._group);// add the control to tool bar
    }

  

    // Add a new button to the toolbar group

    this._button = new Autodesk.Viewing.UI.Button('testTest');
    this._button.onClick = (ev) => {
     
                           // Check if the panel is created or not
                           if (this._panel == null) {//check if there is an instance of our pannel. if not- create one
                            this._panel = new ModelSummaryPanel(this.viewer, this.viewer.container, 'modelSummaryPanel', 'Model Summary');
                        }
                        // Show/hide docking panel
                        this._panel.setVisible(!this._panel.isVisible());//cal a method from the parent to show/ hide the panel -->use this to toggle from visible to invisible
                        this._panel.set
                        // If panel is NOT visible, exit the function
                        if (!this._panel.isVisible())
                            return;

                        // First, the viewer contains all elements on the model, including
                        // categories (e.g. families or part definition), so we need to enumerate
                        // the leaf nodes, meaning actual instances of the model. The following
                        // getAllLeafComponents function is defined at the bottom
                        this.getAllLeafComponents((dbIds) => {// now we have the list of the Id's of all the leaves
                       
                            // Now for leaf components, let's get some properties and count occurrences of each value
                            debugger;
                            const filteredProps = ['Level','Name','Comments','Area','Type Name'];
                            // Get only the properties we need for the leaf dbIds
                            this.viewer.model.getBulkProperties(dbIds,filteredProps , (items) => {
                                // Iterate through the elements we found
                                
                                items.forEach((item) => {
                                    
                                    // and iterate through each property
                                    item.properties.forEach(function (prop) {
                                        // Use the filteredProps to store the count as a subarray
                                        if (filteredProps[prop.displayName] === undefined)
                                            filteredProps[prop.displayName] = {};
                                        // Start counting: if first time finding it, set as 1, else +1
                                        if (filteredProps[prop.displayName][prop.displayValue] === undefined)
                                            filteredProps[prop.displayName][prop.displayValue] = 1;
                                        else
                                            filteredProps[prop.displayName][prop.displayValue] += 1;
                                    });
                                });
                                // Now ready to show!
                                // The PropertyPanel has the .addProperty that receives the name, value
                                // and category, that simple! So just iterate through the list and add them
                                filteredProps.forEach((prop) => {
                                    if (filteredProps[prop] === undefined) return;
                                    Object.keys(filteredProps[prop]).forEach((val) => {
                                        this._panel.addProperty(val, filteredProps[prop][val], prop);
                                        this.dt = new DataTabe(this._panel);
                                        this.dt.setData()
                                    });
                                });
                            });
                        });
   


    };
    this._button.setToolTip('Or Levis extenssion');
    this._button.addClass('testTest');
    this._group.addControl(this._button);
}

Autodesk.Viewing.theExtensionManager.registerExtension('testTest', testTest);
datatable autodesk-forge viewer
1个回答
1
投票

我们有一个逐步指导如何操作的教程。

请参阅仪表板教程,特别是数据网格部分。 在本例中,本教程使用外部库 (Tabulator) 来显示数据。

© www.soinside.com 2019 - 2024. All rights reserved.