Doc update - data structures

yangxin1994 · Apr 16, 2021 · eb199dc · eb199dc
1 parent a0d8d60
commit eb199dc
Show file tree

Hide file tree

Showing 10 changed files with 207 additions and 3,853 deletions.
diff --git a/dist/w2ui-1.5.min.css b/dist/w2ui-1.5.min.css
diff --git a/docs/details/w2utils.settings.html b/docs/details/w2utils.settings.html
@@ -36,19 +36,101 @@
 
 <h4>Data Types</h4>
 
-The dataType setting has 5 possible options. Below is explanation what they mean:
+w2utils.settings<span class="property">.dataType</span> can be one of the following.
 <div style="height: 20px"></div>
 
-HTTP - will submit GET or POST where it makes more sense by the size of the data submitted in w2grid, w2form and in autocomplete field (enum and list)
+<b>HTTPJSON</b> (default) - will encode params as a JSON string and will submit GET request
+<textarea class="javascript">
+request: {
+    "limit":100,
+    "offset":0,
+    "searchLogic":"AND",
+    "search":[
+        {"field":"age", "type":"int", "operator":"between", "value":[10,20]},
+        {"field":"fname", "type":"text", "operator":"begins", "value":"vitali"}
+    ],
+    "sort":[
+        {"field":"fname", "direction":"asc"},
+        {"field":"lname", "direction":"asc"}
+    ]
+}
+</textarea>
 <div style="height: 20px"></div>
 
-HTTPJSON - is the default one and will submit GET or POST, similar to HTTP, but will submit all params as JSON string
+<b>HTTP</b> - will encode params as HTTP string and will submit GET request
+<textarea class="javascript">
+limit: 100
+&offset: 0
+&searchLogic: AND
+&search[0][field]: age
+&search[0][type]: int
+&search[0][operator]: between
+&search[0][value][]: 10
+&search[0][value][]: 20
+&search[1][field]: fname
+&search[1][type]: text
+&search[1][operator]: begins
+&search[1][value]: vitali
+&sort[0][field]: fname
+&sort[0][direction]: asc
+&sort[1][field]: lname
+&sort[1][direction]: asc
+</textarea>
 <div style="height: 20px"></div>
 
-RESTFULL - will fully comply with REST standard and will submit GET or POST or PUT or DELETE actions where needed. Note that often PUT and DELETE are disabled by various hosting services.
+<b>RESTFULL</b> - will encode params as HTTP string and will submit GET for list, PUT for save, DELETE for delete, POST for update actions in w2grid and w2forms. For w2grid the request will look like this:
+<textarea  class="javascript">
+limit: 100
+&offset: 0
+&searchLogic: AND
+&search[0][field]: age
+&search[0][type]: int
+&search[0][operator]: between
+&search[0][value][]: 10
+&search[0][value][]: 20
+&search[1][field]: fname
+&search[1][type]: text
+&search[1][operator]: begins
+&search[1][value]: vitali
+&sort[0][field]: fname
+&sort[0][direction]: asc
+&sort[1][field]: lname
+&sort[1][direction]: asc
+</textarea>
 <div style="height: 20px"></div>
 
-RESTFULLJSON - will fully comply with REST standard and will submit GET or POST or PUT or DELETE actions where needed. Note that often PUT and DELETE are disabled by various hosting services. But will submit all params as JSON payload
+<b>RESTFULLJSON</b> - will encode params as JSON and will submit GET for list, PUT for save, DELETE for delete, POST for update actions in w2grid and w2forms. Note that often PUT and DELETE are disabled by various hosting services. For w2grid the request will look like this:
+<textarea class="javascript">
+{
+    "limit":100,
+    "offset":0,
+    "searchLogic":"AND",
+    "search":[
+        {"field":"age", "type":"int", "operator":"between", "value":[10,20]},
+        {"field":"fname", "type":"text", "operator":"begins", "value":"vitali"}
+    ],
+    "sort":[
+        {"field":"fname", "direction":"asc"},
+        {"field":"lname", "direction":"asc"}
+    ]
+}
+</textarea>
+
 <div style="height: 20px"></div>
 
-JSON - will submit all variables as JSON payload (not HTTP POST). On the server it needs to be parse differently.
+<b>JSON</b> - will encode params as JSON and submit POST request. The parameters will be submitted as HTTP payload (not HTTP POST), on the server it needs to be parsed differently.
+<textarea class="javascript">
+{
+    "limit":100,
+    "offset":0,
+    "searchLogic":"AND",
+    "search":[
+        {"field":"age", "type":"int", "operator":"between", "value":[10,20]},
+        {"field":"fname", "type":"text", "operator":"begins", "value":"vitali"}
+    ],
+    "sort":[
+        {"field":"fname", "direction":"asc"},
+        {"field":"lname", "direction":"asc"}
+    ]
+}
+</textarea>
diff --git a/docs/overview/form.html b/docs/overview/form.html
@@ -6,23 +6,23 @@ <h3>Form Overview</h3>
 
 <h4>Example 1</h4>
 
-Below is a simple example how to use forms. It shows the minimum HTML and JavaScript you need to have a simple form. There is no form HTML as 
+Below is a simple example how to use forms. It shows the minimum HTML and JavaScript you need to have a simple form. There is no form HTML as
 it get generated by the form.
 
 <textarea class="html">
 <!DOCTYPE html>
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" />
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
 </head>
 <body>
     <div id="myForm" style="width: 600px"></div>
 </body>
 <script>
 $(function () {
-    $('#myForm').w2form({ 
+    $('#myForm').w2form({
         name   : 'myForm',
         fields : [
             { name: 'first_name', type: 'text', required: true },
@@ -55,9 +55,9 @@ <h4>Example 2</h4>
 <!DOCTYPE html>
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" />
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
 </head>
 <body>
     <div id="myForm" style="width: 600px">
@@ -89,7 +89,7 @@ <h4>Example 2</h4>
 </body>
 <script>
 $(function () {
-    $('#myForm').w2form({ 
+    $('#myForm').w2form({
         name   : 'myForm',
         fields : [
             { name: 'first_name', type: 'text', required: true },
@@ -110,12 +110,12 @@ <h4>Example 2</h4>
 </html>
 </textarea>
 
-A form template can be loaded from the server or it can already be in the page. In the HTML above, the form uses some standard classes to 
+A form template can be loaded from the server or it can already be in the page. In the HTML above, the form uses some standard classes to
 layout field names and fields, however, there is no requirement for this. The form can also be multi-page. If it has only one page it still
 needs to have proper classes to define it.
 
 <h4>Binding</h4>
 
 When you initiate form, it is going to bind all fields described in the form to the actual controls on the page. The binding is done by name
-attribute. For each field in <span class="method">w2form.fields</span> there must be a corresponding control on the page. In a similar way it 
+attribute. For each field in <span class="method">w2form.fields</span> there must be a corresponding control on the page. In a similar way it
 is going to bind actions to buttons. For each <span class="method">w2form.actions</span> there must be a corresponding button.