[React] Automatic data table component--bodegrid

Source: Internet
Author: User


Tables are one of the most frequently used components in a back-office management system, and the related features include data additions and edits, queries, sorting, paging, custom displays, and some action buttons. We explore and introduce my design ideas in detail: New and editedThink about the first thing we wrote about how the new edit page was done, whether a page was written on a page, and then either the form was submitted or the Ajax was submitted. There are countless new and edited view pages in the background, and now it's scary to think about it and look tired. I was excited to see that the grid component behind the Kendoui was able to automatically complete the new and editing functions by simply configuring the properties of the column and saving the address. Unfortunately, I've looked all over the react all the component libraries and found no such component, but I did it myself. Design ideas:


1, set the type of each column, such as text, numbers, pictures, time, bool value, drop-down selection box and so on.



2. Provide different operation components for different types, such as input component of text, file component of picture. This will generate the corresponding form based on the column and its type when adding and editing.


3, save the user input, submit to the configured URL address. querying, sorting, pagingquery, sorting and paging almost every table page must function, the implementation of a variety of ways, here is the table universal query and sorting design ideas: 1, each column can be queried should be configurable. 2, for different data type query conditions should be differentiated, such as text has "contains" the condition, the number has "greater than" condition. 3, the back end of the processing should be unified, for each query condition to write query logic is very thankless work. 4, each column can be ordered can be configured, sorted by the positive and reverse order. The request body of the final table is designed as follows:
 
{ "pageIndex":1, "pageSize":15, "sortConditions":[
        { "sortField":"name", "listSortDirection":1 }
    ], "filterGroup":{ "rules":[
            { "field":"displayName", "operate":"contains", "value":"a" }
        ]
    }
}




The whole component of the source code is still relatively complex, here is not in-depth, interested students can view React-demo in the Bode-grid.js source code, address: Https://github.com/liuxx001/react-demo.git But it is very simple to use, as follows:
getInitialState: function () {
     let gridOptions = {
         ref: this,
         title: "List of Roles",
         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: "is static role", data: "isStatic", type: "switch", editor: {}, query: true},
             {title: "is the default role", data: "isDefault", type: "switch", editor: {}, query: true},
             {title: "Action options", type: "command", actions: [{name: "Set permissions", onClick: showPermissionModel}]}
         ]
     };
     return {
         gridOptions: gridOptions
     };
} 
Very few code can fully realize the table display, add, edit, sort, query, paging and other functions, display the effect: Bodegrid Table API:
Parameters Type Description Default value
Ref Object Ref points to itself, for inline button binding data Ref:this, fixed notation
Title String Table title
Url Object Remote API Interface Configuration
Columns Array[object] Table Column Property Configuration
Actions Array[object] Customize button in upper right corner of table
PageSize Number Display quantity per page 15
Pagesizeoptions Array[string] Selectable Display Quantity ["10", "15", "20", "30", "50", "100"]
SortField String Initial sort Field First column
SortDirection String Initial sort mode Desc

The columns properties are described in detail:
Parameters Type Description Default value
Title String Table Header Display Title
Data String Get the corresponding field name from the data source
Type String The type of the column. Types are: text, textarea, number, switch, Dropdown, IMG, DatePicker, DateTimePicker, Timepicker, hide, command
Query Boolean Whether you can query False
Render function (V,D) The column renders the event. V: Data at the forefront; D: Data for the current row
Sortdisable
Boolean Whether to prohibit sorting False
Source Array[object] Dropdown Type drop-down data source, format: [{value: ' xx ', text: ' VV '}], when type= "dropdown" must be
Actions Array[object] Command type Custom action options, format: [{name: ' xx ', onclick:function (data) {}}]. Data: Current row


[React] Automatic data table component--bodegrid


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.