Shulou(Shulou.com)05/31 Report--

Today Xiaobian to share with you how to use React automatic data table components in the relevant knowledge, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you read this article after some harvest, let's take a look at it.

Add and edit

Design ideas:

1. Set the type of each column, such as text, number, picture, time, Bool value, drop-down selection box, and so on.

2. Provide different operation components for different types, such as input component of text and file component of picture. In this way, when adding and editing, the corresponding form is generated based on the column and its type.

3. Save the user input and submit to the configured url address.

Query, sort, paging

Query, sorting and paging are almost necessary functions for every table page, and there are a variety of ways to implement them. This paper introduces the design ideas of table universal query and sorting:

1. Whether each column can be queried should be configurable.

2. Query conditions should be different for different data types, such as "include" conditions for text, "greater than" conditions for numbers, and so on.

3. The processing of the back end should be unified, and it is a thankless task to write query logic for each query condition.

4. Whether each column can be sorted or not can be configured, which is divided into positive order and reverse order.

Finally, the request body of the table is designed as follows:

{"pageIndex": 1, "pageSize": 15, "sortConditions": [{"sortField": "name", "listSortDirection": 1}], "filterGroup": {"rules": [{"field": "displayName", "operate": "contains", "value": "a"}]}}

The source code of the whole component is still quite complex, so we won't go any further here. Interested students can check the bode-grid.js source code in react-demo, address: https://github.com/liuxx001/react-demo.git

However, it is easy to use, as follows:

GetInitialState:function () {let gridOptions= {ref:this, title: "role list", url: {read:ApiPrefix+ "zero/role/GetRolePagedList", add:ApiPrefix+ "zero/role/CreateRole", edit:ApiPrefix+ "zero/role/UpdateRole", delete:ApiPrefix+ "zero/role/DeleteRole"}, columns: [{title: "role name", data: "name", type: "text", editor: {}, query:true}, {title: "display name" Data: "displayName", type: "text", editor: {}, query:true}, {title: "static role", data: "isStatic", type: "switch", editor: {}, query:true}, {title: "default role", data: "isDefault", type: "switch", editor: {}, query:true}, {title: "Action options", type: "command", actions: [{name: "set permissions" OnClick:showPermissionModel}]}]} Return {gridOptions: gridOptions};}

With very little code, the display, addition, editing, sorting, query, paging and other functions of the table can be fully realized.

BodeGrid form api:

Parameters.

Types

Description

Default value

Ref

Object

Ref points to itself and is used for inline buttons to bind data

Ref:this, fixed writing method

Title

String

Table title

Url

Object

Remote api interface configuration

Columns

Array [object]

Table column property configuration

Actions

Array [object]

Custom button in the upper right corner of the table

PageSize

Number

Quantity displayed per page

fifteen

PageSizeOptions

Array [string]

Optional display quantity

["10", "15", "20", "30", "50", "100"]

SortField

String

Initial sort field

First column

SortDirection

String

Initial sorting mode

Desc

The columns attribute is detailed:

These are all the contents of the article "how to use the BodeGrid automatic data Table component in React". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.