Bootstrap Intelligent Form Combat Series (eight) Form configuration json detailed _javascript tips

This chapter is part of the Advanced section of the series that describes the configuration of some of the columns in the form

1, config column configuration:

Mainly used for control layout: config:{autolayout:true| ' 1,2,2,4 '}

True: Automatic use of different grids based on the innermost number of configuration items.

' 1,2,2,4 ': layout using the specified grid, the first item (N,N) is used if the number of columns configured is insufficient

2, hides configuration items

Hides:[{id: ' xxx ', Value: '}]

This item is optional and is used primarily for editing with some columns that are not visible (such as the value of the primary key ID)

3, Eles form element configuration (emphasis)

The Eles configuration supports the situation in 2, one is the case of grouping, the other is the case of non grouping,

Eles:[[],[]]//non-grouping, using a crossover array to store the configuration columns, I would refer to the inner array as group configuration items, the configuration items inside the group called element configuration items

eles:{' groupname ': []}//grouped case, using JSON object to store

The inner layer of a group configuration item is a single element configuration item, [{ele:{id: ', Name: '}}]

Careful Bo find out why to add a ele in the element configuration items, and then ele inside the attributes of elements, rather than directly placed in the element configuration items inside

Of course, considering the future extensibility, in fact, the complete formulation of element configuration items is: {label:{},ele:{}}

A, Label: That is, the prompt character in front of the expression element, the configuration item inside the label: {target: ' #contain. Id ', className: ' Col-sm-2 ', text: ' #contain. Title '}

Target:for elements, default to Ele ID, className: Change the label on the application of class, text: Displayed in the label text, default to Ele in the title, if Ele configured Required:true It will also generate a <span> a hint for validation in the label layer

B, Ele: The configuration of the real expression element

{ 
type: ', ID: ', Name: ', Value: ', ClassName: ' col-sm-4 ',
readonly:false,disable:false,extendattr:{key: Value},required:false,
render: ',
prev:{type: ' button ', Iconclassname: ', Ele{render: '},
next:{ Iconclassname: ', Ele{render: '},

Type: currently supports text (default), select, Radio, checkbox, TEXTAREA, datetime, search

Note: When you select, Radio, checkbox, you need to set the data source for the item, Items:[{text: ', Value: ', select: ' Optional '}

　　Select:withnull:true will add more on the basis of the data source--Please select--Blank Item

　　checkbox: The configuration items inside the items can have IDs, and name and select

Render: ", HTML tag, highest priority, when other configuration is not valid for this item, such as: Render: ' <input type=" file "name=" "id=" "/>"

The same applies for pre and Next, Pre:{ele:{render: '}}

Pre: Used to configure attribute options for elements,

such as {ele:{pre:{text: ' <input type= ' radio ' > '},type: ' text ', Name: ' DisplayName ', title: ' Display Name: '}} This configuration item is configured with a single radio box before the element

Effect Chart:

can support both before and after the same configuration, please refer to: The first chapter of the supported simple types

className: Change the form element to apply class, ClassName: ' Col-sm-4 '

Readonly:false,disable:false is used to set the state of an element disable, readonly

Value: Sets the default value for an element

Extendattr:{key:value} a key-value pair form that only supports HTML5 data-generates a data-prefix on the element

Demo:extendattr:{select:true} will generate a Data-select=true extended property on the element

Group form configuration: ' Group name ': []

Demo: ' Personal information ': [{},{}]

The above is a small set to introduce the Bootstrap intelligent Form Combat Series (eight) Form configuration JSON detailed description of all, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!