CN108280049A - A kind of rapid generation of nested tables - Google Patents
A kind of rapid generation of nested tables Download PDFInfo
- Publication number
- CN108280049A CN108280049A CN201711010098.9A CN201711010098A CN108280049A CN 108280049 A CN108280049 A CN 108280049A CN 201711010098 A CN201711010098 A CN 201711010098A CN 108280049 A CN108280049 A CN 108280049A
- Authority
- CN
- China
- Prior art keywords
- data
- json
- daughter element
- css
- head
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Withdrawn
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/151—Transformation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The present invention relates to WEB front-end development technique field, especially a kind of rapid generation of nested tables.Method of the present invention is that data source is converted into JSON from XML using data source conversion module；Then JSON parsings are carried out using JSON parsing modules；Theme CSS handover modules establish the CSS files of a special storage topic style；Custom feature interface module, self-defined pattern interface module custom feature and pattern.The present invention realizes the nesting of table view by JS codes；The element that can be used in code development is nested.
Description
Technical field
The present invention relates to WEB front-end development technique field, especially a kind of rapid generation of nested tables.
Background technology
At present in code development element nesting phenomenon generally existing, solution be individually be each data carry out generation
Code is write, parses, and view is ultimately generated.Ideal table view can be nested but be difficult to be realized by JS codes.
Invention content
Present invention solves the technical problem that being to provide a kind of rapid generation of nested tables, realized by JS codes
The nesting of table view.
The present invention solve above-mentioned technical problem technical solution be：
The method is that data source is turned JSON from XML using data source conversion module；Then JSON is utilized to parse mould
Block carries out JSON parsings；Theme CSS handover modules establish the CSS files of a special storage topic style；Custom feature connects
Mouth mold block, self-defined pattern interface module custom feature and pattern.
Since parent, tag name is converted into Property Name, label substance is converted into attribute value, then searching loop
Daughter element jumps out traversal from level to level when no daughter element；To the last without element；The JSON of dump faces according to default form
When be stored in a variable.
JSON is read by AJAX methods；URL is directed toward JSON data sources, and is set as synchronous execution；It will obtain first
The parent element of Data data reads the daughter element of each father's element with each function；Then judge currentElement whether there is or not
Daughter element executes Rule of judgment with a while function at this time；The global variable of currentElement is set in while functions, together
When with if functions divide two kinds of situations：It is sky one is daughter element, a kind of is not sky；When daughter element is not empty, assigned using variable
Value, traverses all daughter element situations with each function again；Not allow while to become endless loop, become in time to global
Amount encloses new value, and the judgement in while is made to update.
The CSS files of foundation, each section of the inside content represent the style set of a theme；Each segment prefix is different；Work as plug-in unit
When initialization, according to the selection of theme, all style names are initialized, to relate to corresponding topic style collection.
Custom feature includes mainly：Whether add head of form, whether fill empty data cells；
Head of form adding method is：The attribute of the row of each row of data, including title, width are concentrated by traversing result, from
And data source is provided for setting head of form, in addition increase a nested table when adding head of form newly, which only retains
thead；
The empty data cells method of filling：Add a judgement in searching loop, if being sky without daughter element/daughter element,
Mentioned null cell is generated in daughter element position, forms unified pattern；With Kong Ge ＆nbsp fillings inside mentioned null cell.
Self-defined form attributes include：Width, height, unit table rows height, Horizontal Alignment, vertical alignment mode；When
After these parameter options are arranged, then according to the parameter group of setting at corresponding CSS sentences, building form is the logical groups according to JS
At then CSS is added on the style attributes of corresponding target.
The present invention is solved as a JQ plug-in unit after XML/JSON reads data, automatic raw according to the parameter of offer
At nested tables, completely without big modification, it is only necessary to configure custom parameter, so that it may to realize the displaying of data, to open
Hair personnel have saved the plenty of time.The JQ plug-in units of the present invention, it is only necessary to JQ files and this JS files are quoted, it is then initial with a line
Change code and the realization from arbitrary source to nested tables can be completed.
Description of the drawings
The following further describes the present invention with reference to the drawings：
Fig. 1 is the flow chart of the present invention.
Specific implementation mode
Below in conjunction with attached drawing, technical solution in the embodiment of the present invention carries out clear, complete description, it is clear that institute
The embodiment of description is only a part of the embodiment of the present invention, instead of all the embodiments.Based on the embodiments of the present invention,
Those of ordinary skill in the art are not making the substantive scheme created and obtained, and shall fall within the protection scope of the present invention.
As shown in Figure 1, be below the present invention about a kind of quick-speed generation system of nested tables and the important work(of method
Implementation method can be put：
1：XML turns JSON modules.According to the label feature of XML, since parent, tag name is converted into Property Name,
Label substance is converted into attribute value, then searching loop daughter element, when no daughter element, jumps out traversal from level to level；Until most
Afterwards without element；The JSON of dump is temporarily stored according to the default form of this plug-in unit in a variable；
2：JSON parsing modules.JSON is read by AJAX methods；URL is directed toward JSON data sources, is set as synchronous execution,
Mode POST reads the daughter element of each father's element with each function first by the parent element of obtained Data data,
Then judging currentElement, whether there is or not daughter elements, execute Rule of judgment with a while function at this time；It is arranged in while functions
The global variable of currentElement, while dividing two kinds of situations with if functions：It is sky one is daughter element, a kind of is not sky；Sub- member
When element is not empty, using variable assignments, all daughter element situations have been traversed with each function again；In order not to allow
While becomes endless loop, it is necessary to enclose new value to global variable in time, the judgement in such while can just update；
3：Theme CSS handover modules.Establish the CSS files of a special storage topic style, each section of content generation of the inside
The style set of one theme of table；Difference lies in prefixes；Therefore, when plug-in initialization, according to the selection of theme, so that it may with initial
Change all style names, to relate to corresponding topic style collection, changes the pattern of table, this plug-in unit supports User Defined
Theme；
4：Custom feature interface module.Custom feature includes mainly：Whether add head of form, whether fill dummy cell
Lattice etc.；Head of form adding method：By traversing result concentrate each row of data the attribute, including title, width of row etc., to for
Head of form is set, data source is provided, addition head of form needs in addition to increase a nested table newly, which only retains
thead；The automatic empty data cells method of filling：Add a judgement in searching loop, if being sky without daughter element/daughter element,
Mentioned null cell then is generated in daughter element position, forms unified pattern；Kong Ge ＆nbsp is used inside mentioned null cell；Filling；
5：Self-defined pattern interface module.There are many kinds of the patterns of table, and attribute includes：Width, height, unit table rows
Height, Horizontal Alignment, vertical alignment mode etc.；It is after provided with these parameter options, then pairs of according to the parameter group of setting
The CSS sentences answered, building form are formed according to the logic of JS, and then CSS is added on the style attributes of corresponding target；
The present invention method be：
1：From specified data source/format, reads or inquiry obtains data Data；
2：Specified data source includes database data, data file data；Wherein, document format data includes JSON texts
Part, XML file etc.；
3：After obtaining data Data, plug-in unit of the present invention is parsed and is analyzed to data Data, is found wherein nested/non-embedding
Logic is covered, interface View is shown for generating front end；
4：Plug-in unit of the present invention provides multiple generation options, including：
a：Whether head of form (Y/N) is set；
b：Data source format selects (JSON or XML)；
c：Whether empty data cells (Y/N) are filled automatically；
d：Table theme style selects (black/slight)；
e：Self-defined width, height, unit table rows height, Horizontal Alignment, vertical alignment mode etc.；
5：The present invention parsed using JQ functions/analyze data；By carrying out cycle criterion to row data, if there is daughter element,
Then daughter element is read out and is judged, when not having daughter element, jumps out cycle step by step；
6：Head of form adding method：The attribute, including title, width of row etc. of each row of data are concentrated by traversing result,
To provide data source for setting head of form；
7：Data source format switches：XML built in plug-in unit of the present invention turns the method function of JSON, therefore the present invention is finally
Data are read from JSON；
8：The automatic empty data cells method of filling：Add a judgement in searching loop, if no data/data are sky,
Mentioned null cell is then generated, unified pattern is formed；It is filled with space inside mentioned null cell；
9：Theme style switching method：Dynamic adds unified pattern prefix, only needs to switch prefix when theme switches；
And the CSS style code of all themes all uniformly writes in a theme CSS；
10：Custom parameter implementation method：Dynamic addition CSS, is called in unified parameter CSS files；Addition/switching
CSS judges according to option parameter.
Claims (9)
1. a kind of rapid generation of nested tables, it is characterised in that：The method is to utilize data source conversion module will
Data source is converted into JSON from XML；Then JSON parsings are carried out using JSON parsing modules；Theme CSS handover modules establish one
The CSS files of a special storage topic style；Custom feature interface module, self-defined pattern interface module custom feature and
Pattern.
2. according to the method described in claim 1, it is characterized in that：
Since parent, tag name is converted into Property Name, label substance is converted into attribute value, then searching loop member
Element jumps out traversal from level to level when no daughter element；To the last without element；The JSON of dump is deposited temporarily according to default form
It is placed in a variable.
3. according to the method described in claim 1, it is characterized in that：
JSON is read by AJAX methods；URL is directed toward JSON data sources, and is set as synchronous execution；The Data that will be obtained first
The parent element of data reads the daughter element of each father's element with each function；Then judge that currentElement has s.m.p first
Element executes Rule of judgment with a while function at this time；The global variable of currentElement is set in while functions, is used simultaneously
If functions divide two kinds of situations：It is sky one is daughter element, a kind of is not sky；When daughter element is not empty, using variable assignments, then
It is secondary that all daughter element situations are traversed with each function；Not allow while to become endless loop, enclosed in time to global variable
New value, makes the judgement in while update.
4. according to the method described in claim 2, it is characterized in that：
JSON is read by AJAX methods；URL is directed toward JSON data sources, and is set as synchronous execution；The Data that will be obtained first
The parent element of data reads the daughter element of each father's element with each function；Then judge that currentElement has s.m.p first
Element executes Rule of judgment with a while function at this time；The global variable of currentElement is set in while functions, is used simultaneously
If functions divide two kinds of situations：It is sky one is daughter element, a kind of is not sky；When daughter element is not empty, using variable assignments, then
It is secondary that all daughter element situations are traversed with each function；Not allow while to become endless loop, enclosed in time to global variable
New value, makes the judgement in while update.
5. method according to any one of claims 1 to 4, it is characterised in that：
The CSS files of foundation, each section of the inside content represent the style set of a theme；Each segment prefix is different；When plug-in unit is initial
When change, according to the selection of theme, all style names are initialized, to relate to corresponding topic style collection.
6. method according to any one of claims 1 to 4, it is characterised in that：
Custom feature includes mainly：Whether add head of form, whether fill empty data cells；
Head of form adding method is：Concentrate the attribute of the row of each row of data by traversing result, including title, width, to for
Head of form is set, data source is provided, in addition increases a nested table newly when adding head of form, which only retains thead；
The empty data cells method of filling：Add a judgement in searching loop, if being sky without daughter element/daughter element, in son
Element position generates mentioned null cell, forms unified pattern；With Kong Ge ＆nbsp fillings inside mentioned null cell.
7. according to the method described in claim 5, it is characterized in that：
Custom feature includes mainly：Whether add head of form, whether fill empty data cells；
Head of form adding method is：Concentrate the attribute of the row of each row of data by traversing result, including title, width, to for
Head of form is set, data source is provided, in addition increases a nested table newly when adding head of form, which only retains thead；
The empty data cells method of filling：Add a judgement in searching loop, if being sky without daughter element/daughter element, in son
Element position generates mentioned null cell, forms unified pattern；With Kong Ge ＆nbsp fillings inside mentioned null cell.
8. method according to any one of claims 1 to 4, it is characterised in that：Self-defined form attributes include：Width, height
Degree, unit table rows height, Horizontal Alignment, vertical alignment mode；After these parameter options are arranged, then according to the parameter of setting
Corresponding CSS sentences are formed, building form is formed according to the logic of JS, and then style that CSS is added to corresponding target belongs to
In property.
9. according to the method described in claim 7, it is characterized in that：Self-defined form attributes include：Width, height, cell
Row height, Horizontal Alignment, vertical alignment mode；After these parameter options are arranged, then according to the parameter group of setting at correspondence
CSS sentences, building form be according to JS logic form, then CSS is added on the style attributes of corresponding target.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711010098.9A CN108280049A (en) | 2017-10-25 | 2017-10-25 | A kind of rapid generation of nested tables |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711010098.9A CN108280049A (en) | 2017-10-25 | 2017-10-25 | A kind of rapid generation of nested tables |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108280049A true CN108280049A (en) | 2018-07-13 |
Family
ID=62801315
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711010098.9A Withdrawn CN108280049A (en) | 2017-10-25 | 2017-10-25 | A kind of rapid generation of nested tables |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108280049A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103345522A (en) * | 2013-07-18 | 2013-10-09 | 北京润通丰华科技有限公司 | Method and device for showing and processing and showing data |
| US20150074140A1 (en) * | 2013-09-06 | 2015-03-12 | Sap Ag | Sql extended with transient fields for calculation expressions in enhanced data models |
| CN105868374A (en) * | 2016-04-01 | 2016-08-17 | 浪潮电子信息产业股份有限公司 | Method for converting xml data into json data based on javascript |
| CN106202013A (en) * | 2016-06-25 | 2016-12-07 | 国云科技股份有限公司 | A kind of implementation method of webpage version EXCEL |
-
2017
- 2017-10-25 CN CN201711010098.9A patent/CN108280049A/en not_active Withdrawn
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103345522A (en) * | 2013-07-18 | 2013-10-09 | 北京润通丰华科技有限公司 | Method and device for showing and processing and showing data |
| US20150074140A1 (en) * | 2013-09-06 | 2015-03-12 | Sap Ag | Sql extended with transient fields for calculation expressions in enhanced data models |
| CN105868374A (en) * | 2016-04-01 | 2016-08-17 | 浪潮电子信息产业股份有限公司 | Method for converting xml data into json data based on javascript |
| CN106202013A (en) * | 2016-06-25 | 2016-12-07 | 国云科技股份有限公司 | A kind of implementation method of webpage version EXCEL |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103838933B (en) | Three-dimensional model integrating and labeling method based on digital technology | |
| CN107273117A (en) | A kind of quick Code automatic build system for programming friendly | |
| CN103823793B (en) | Dynamic statement implementation method based on Excel template | |
| CN104298836B (en) | A kind of reactor core Iterative Design system based on Monte Carlo Calculation | |
| US5557787A (en) | Table generating apparatus employing heading, layout, and table script data | |
| CN101464799A (en) | MPI parallel programming system based on visual modeling and automatic skeleton code generation method | |
| CN108307235A (en) | A kind of screen parameter configuration system | |
| CN102799592B (en) | The parsing method and system of rich text document | |
| CN105631113B (en) | Nuclear power engineering pipeline ISO (International standards organization) diagram customizing method | |
| CN105447253A (en) | Integration method of three-dimensional process data | |
| CN110109658A (en) | A kind of ROS code generator and code generating method based on formalized model | |
| CN102707945A (en) | Implementation method of form designer based on layout template in Eclipse | |
| CN106204715A (en) | The method and system shown based on the house colour changing of 3D family's assembling platform on line and render | |
| CN102541540A (en) | Starry telemetry parameter imaging configuration system | |
| CN1987772A (en) | General interface design interface system and interface developing method using said system | |
| CN109542438A (en) | One kind being based on visual chart development approach | |
| CN104394024A (en) | Method for incrementally configuring AP (Access Point) wireless parameters based on template | |
| CN104656543A (en) | PLC gradient diagram matrix editing display method | |
| CN108280049A (en) | A kind of rapid generation of nested tables | |
| CN103123646A (en) | Conversion method for automatically converting XML document into OML document and device | |
| CN105488052B (en) | Structural data is switched to the method and system of format formfile | |
| CN109634610A (en) | A kind of generation method and device of interface labeled data | |
| CN110531968B (en) | Method for automatically extracting web front-end function code to generate independent template | |
| CN102130737B (en) | Method and device for acquiring network topology | |
| CN108460055B (en) | Method, system, equipment and storage medium for exporting excel data table |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20180713 |
|
| WW01 | Invention patent application withdrawn after publication |