Setting Properties of the Table Widget

Data Binding

Table Column

• Merge: In existing columns, you can select multiple columns and click merge to merge the columns to a large column. The selected columns are displayed as sub-columns under the large column.
• Decompose: In existing columns, you can select a large column containing multiple sub-columns and click decompose to decompose the large column.
• Add fields: Column in the table. After a table widget is bound to a data model, you can select fields in the bound model as columns of the table and query conditions of the table.
• Add an operation column: Column in the table. When you add an operation column to the table, you need to add icons to the operation column and add onclick event code for the icons to implement functions such as delete and edit operations.
• Add empty column: Column in the table. You can add a blank column to the table.

Table Block

• A toolbar is used to extend table capabilities, you can add a toolbar to the table and the add, delete, modify, query, and save buttons are provided.
  Figure 4 Adding a toolbar
  

• After the table widget is bound to data, you can add a data table query bar based on the fields in the table.
  Figure 5 Adding query conditions
  
  Figure 6 Effect
  

Extended Property

• Auto LoadData: If this property is enabled, data is automatically loaded for page previewing or loading, and the data loading does not need to be triggered by an event. This function is valid only when the model is an object model.
• Editable: If this property is enabled, the content in each row of the table is editable; if this property is not enabled, the content can be read only.
• Single Select: If this property is enabled, the option button is displayed.
• Mutil Select: If this property is enabled, the multi-choice button is displayed.
• Row Index: If this property is enabled, the current row number is displayed in the first column of the table. The row number starts from 1 and does not increase during pagination.
• Row Numbering: For Row Index and Row Numbering, only one property can be enabled. After Row Numbering is enabled, the current row number is displayed in the first column of the table. When the table is displayed in multiple pages, the row number is accumulated based on the previous page
• Min. Column Width: minimum column width.
• Loading Status: whether to display the table loading status.
• Empty Data Prompt: indicates the prompt displayed when the data is empty.
• Empty Filter Prompt: indicates the prompt displayed when the filtering data is empty. This parameter takes effect only when the column is filtered.
• Tree Data: If data in a table has a parent-child relationship, you can enable the tree data function and specify associated fields to display the tree structure.
  • Expanded by default: indicates whether sub-data is expanded by default when the tree data function is enabled.
  • Optional: Whether to enable parent-child association when tree data is enabled.
  • Icon display field: field displayed in the position where the icon is located when the tree data function is enabled. If this field is not configured, it is the field in the first column.
  • Parent Field: associated parent node field when the tree data function is enabled.
  • Subnode field: associated subnode field when the tree data function is enabled.
  • Root node field value: field value of the root node when the tree data function is enabled. If this parameter is not set, the default value is empty.
  • Subnode Indentation: indentation of a subnode. Unit: pixel.
  • Drag Row: Whether to enable row dragging when tree data is enabled. You can drag rows to change the parent-child structure of data.
• Style
  • Size: size of the table.
  • Show Header: If this property is enabled, the table header is displayed.
  • Stripe: If this property is enabled, different colors are displayed in the table to distinguish different rows of data.
  • Border: If this property is enabled, a vertical selection box is displayed.
  • The height varies with the content: If this property is enabled, the row height changes with the content.
  • AUI Style: whether to enable the AUI style.
  • Header Style Class: fixed class name of the table header.
  • Data Row Style Class: The callback method of the class name of a table data row. You can customize different class names for different rows of data.
  • Combined row or column: The calculation method for merging rows or columns. You can customize the rules for merging rows, columns, and cells.
    Figure 7 Merging rows or columns
    

Common

• Name: name of the current widget.
• Hid: indicates whether to hide the widget. In this mode, the widget is statically hidden. You can also set the attribute value of the widget to a model field of the Boolean type. In this way, you can control the value of the model field in the customized JavaScript code to determine whether to hide the widget. This dynamic setting has the highest priority.

Style

For users with rich frontend development experience, you can use the style panel to customize the page layout.

• Table Height & Width: Set the width and height of the table.
• Layout: You can directly configure the CSS attributes of the page, for example, setting the width and height of a widget. You can also directly compile CSS code in Advance for further layout customization.
  • Display: You can quickly set the current element layout to block, inline-block, inline, or flex.
  • The box model diagram of the current element is displayed below Display. You can click the corresponding number and change the value to quickly change the inner and outer margins of the element.
  • The width and height of the current element are displayed below the current element box model diagram. By default, the width and height are adapted based on the current layout. You can manually enter values to configure the width and height of the current element.
  • When configuring the box model, width, and height, you can select multiple units, such as px, em, %, and auto.
    Figure 8 Style attribute configuration panel
    
• Font: Set the font size, style, and color.
• Background: Set the background color and transparency.
• Shadow: Set the shadow color and style. The units px, em, and % are supported.
• Advance: Directly write CSS code to apply to the current element.
  • Style Code: Style code of the widget. After the widget style is set, the style code is automatically displayed in this area. You can also customize the style code to configure the widget in detail. The customized code can be entered in multiple lines and the style parameters are highlighted.
  • Style Class: Name of the CSS style class of the widget, which can be referenced in the CSS code.
  • Inheritance Style: If this property is enabled, the configured style is transparently transferred to component sub nodes.

Binding a Data Model, Adding Search Criteria, and Adding the Toolbar

Set the data model bound to the widget. Available data model types are Custom, Objects, Services, and Events. This section describes how to bind a model.

1. Choose Properties > Data Binding and click . The model selection page is displayed.
2. On the Select Model page, click New.
3. Set the metadata model of the table. Set Model Name to equipmentInstance and Source to Objects. Click Next.
   Figure 9 Creating an object data model
   

4. Set Select Object to the object created in advance, such as Namespace__Equipment__CST, select fields to be displayed in the table from Select Fields, and click Next.
5. Return to the model selection page, select the created metadata model, and click the confirm button.

   After the object model is bound, the following figure is displayed. To add a row sequence number to each row, enable Row Index in Extend of the table.

   Figure 10 Result column after the data model is bound
   

6. Select any item in Added Column, and click to adjust the display sequence of the column content.
7. Click behind each field to modify the properties of the fields such as the column title.

   When configuring a column title, you can choose Select Multiple Language, Create/Update. The multiple languages created here are saved in your multi-language library.

8. Add an operation column to the table.
   1. In Designer View, select Table. Click in Properties > Table Columns on the right.
      Figure 11 Clicking +
      
   2. Click the button for creating a table column, that is, next to Operation1.
      Figure 12 Creating a column
      
   3. In the Property Settings page, change the column title to "Operation".
   4. Click Add Operation Button in the Operation Button area and set the style of the "Edit" button.
      Figure 13 Adding a modification icon to the operation column
      
   5. Click and click + next to the action list. In the code editing area on the right of the event orchestrator that is displayed, add the following event code and click the create button.

      //Obtain the current widget (that is, Table).
      let _component = context.$component.current;
      //Obtain the current row and the id attribute of the object.
      let rowId = _component.$attrs.row.id;
      //Go to the device details page with the ID.
      context.$page.load('/besBaas/page#/Namespace__editEquipment?id='+rowId);

   6. Return to the standard page development page and click in the upper part of the page to save the page.
   7. Click the button for adding operations, and then set the style of the delete button.

      Set the button type to primary and icon to android-delete by referring to Figure 13.

   8. Click . In the code editing area on the right of the event orchestrator that is displayed, add the following event code and click the create button.

      //Obtain the current widget (that is, Table).
      let _component = context.$component.current;
      //Obtain the current row.
      let row = _component.$attrs.row;
      // Table widget
      let _table = this.$component.table;
      // Delete the current row.
      this.$dialog.confirm({
          title: 'Confirmation box',
          content: 'Are you sure you want to delete?',
          okText: "OK",
          cancelText: "Cancel",
          onOk: () => {
              _table.doDelete([row]).then(()=>{_table.doQuery();})
          }
      })

   9. Return to the standard page development page and click in the upper part of the page to save the page.

9. Set the toolbar area.
   1. In Designer View, select Table. Then, choose Properties > Table Block > Toolbar on the right, and click Add.
   2. Delete redundant buttons on the toolbar and retain only the Add Row, Save, and Delete buttons.
   3. Click in the upper part of the page to save the page.

Tree Data Functions

If the data in the table has a parent-child relationship, you can enable the tree data function in the table attributes and specify the associated fields to display the tree structure.

For example, if the data shown in Figure 14 exists and the data has a parent-child relationship, the data needs to be displayed in a tree structure, as shown in Figure 15.

Figure 14 Data source

Figure 15 Tree data

Related Documents

• Adding Links to Data in Standard Page Tables
• Adding Computing Capabilities, Such as Summation, to Standard Page Tables
• Displaying Images in Standard Page Tables