There is a hierarchical structure of fields ( select,input ), with the possibility for the user to combine and nest each other. In other words, the tree of logical expressions, where each vertex-value is several input forms.

Since this tree must be saved in a certain structure and restored back (build HTML) from it. They advised to use JSON + any JS library to avoid code changes in case of minor changes in the form.

HTML looks like this (generated for an example, extra components like buttons are removed from HTML):

  <div class="conditions-group logical-or"> <div class="conditions"> <div class="conditions-group logical-and"> <div class="conditions"> <div class="condition row"> <div class="metric"> <select class="form-control"></select> </div> <div class="operator"> <select class="form-control "></select> </div> <div class="value"> <input value="" class="form-control"> </div> </div> <div class="condition row"> <div class="metric"> <select class="form-control"></select> </div> <div class="operator"> <select class="form-control "></select> </div> <div class="value"> <input value="" class="form-control"> </div> </div> </div> <div class="condition row"> <div class="metric"> <select class="form-control"></select> </div> <div class="operator"> <select class="form-control "></select> </div> <div class="value"> <input value="" class="form-control"> </div> </div> </div> </div> 

Blocks are built using current jQuery.

Please help: What can you advise on the implementation of this type of task? If JS-library, what?

Thanks a lot in advance.

  • First, provide an example (of the logical expression tree) in HTML and JS - qwabra

0