add multi columns form option for Create dialog and Edit Dialog

README.md

@@ -1,29 +1,68 @@
-What is jTable
+What is msjTable
 ======
 
-http://www.jtable.org
+
 
 [![A screenshot of jTable](https://raw.githubusercontent.com/hikalkan/jtable/master/screenshot.png)](http://jtable.org/)
 
-jTable is a jQuery plugin used to create AJAX based CRUD tables without coding HTML or Javascript. It has several features including:
-
-* Automatically creates HTML table and loads records from server using AJAX.
-* Creates 'create new record' jQueryUI dialog form. When user creates a record, it sends data to server using AJAX and adds the same record to the table in the page.
-* Creates 'edit record' jQueryUI dialog form. When user edits a record, it updates server using AJAX and updates all cells on the table in the page.
-* Allow user to 'delete a record' by jQueryUI dialog based confirmation. When user deletes a record, it deletes the record from server using AJAX and deletes the record from the table in the page.
-* Shows animations for create/delete/edit operations on the table.
-* Supports server side paging using AJAX.
-* Supports server side sorting using AJAX.
-* Supports master/child tables.
-* Allows user to select rows.
-* Allows user to resize columns.
-* Allows user to show/hide columns.
-* Exposes some events to enable validation with forms.
-* It can be localized easily.
-* All styling of table and forms are defined in a CSS file, so you can easily change style of everything to use plugin in your pages. CSS file is well defined and commented.
-* It comes with pre-defined color themes.
-* It is not depended on any server side technology.
-* It is platform independed and works on all common browsers.
+#### msjTable is a jQuery plugin forked from jTable, to create AJAX based CRUD tables without coding HTML or Javascript.
+
+#### Additional features of msjTable :
+
+* Record Preview feature :
+```javascript
+$("#myjtable").jtable({
+...,
+recordPreview : true,  // setting recordPreview to true, a view icon will appeare beside edit icon in each row
+...,
+fields : {
+    ...,
+    first_name : {
+               title : 'First name',
+               edit : true,
+               create : true,
+               preview : true, // specify which field you want to be shown in preview dialog
+               type : 'text'
+                },
+    ...
+});
+
+```
+
+* Multi columns form for Create, Edit and Preview dialogs.
+```javascript
+$("#myjtable").jtable({
+...,
+createFormColumns : 2,  // set the number of columns in new record dialog
+editFormColumns : 2,  // set the number of columns in edit record dialog
+viewFormColumns : 2,  // set the number of columns in record preview dialog
+...
+
+});
+```
+
+* You can send any required fields to row-delete-request as POST data (jTable only sends single key field)
+```javascript
+$("#myjtable").jtable({
+...,
+fields : {
+    ...,
+    first_name : {
+               title : 'First name',
+               edit : true,
+               create : true,
+               delete : true, // setting delete option of field to true, sends this field beside key field as parameters to delete request.
+               type : 'text'
+                },
+    ...
+});
+
+```
+
+
+
+
+Read More about additional features and its usage [here](https://m-shaeri.ir/blog/jquery-jtable-awesome-full-featured-plugin-for-crud-table/)
 
 Notes
 ======

dev/jquery.jtable.build.txt

@@ -5,9 +5,10 @@ add jquery.jtable.utils.js
 add jquery.jtable.forms.js
 add jquery.jtable.creation.js
 add jquery.jtable.editing.js
+add jquery.jtable.preview.js
 add jquery.jtable.deletion.js
 add jquery.jtable.selecting.js
 add jquery.jtable.paging.js
 add jquery.jtable.sorting.js
 add jquery.jtable.dynamiccolumns.js
-add jquery.jtable.masterchild.js
+add jquery.jtable.masterchild.js

dev/jquery.jtable.creation.js

@@ -225,7 +225,10 @@
 
             //Create add new record form
             var $addRecordForm = $('<form id="jtable-create-form" class="jtable-dialog-form jtable-create-form"></form>');
-
+			var ColumnCount=self.options.createFormColumns ? self.options.createFormColumns : 1;
+			var CurrentColumnCount=0;
+			var $CreateFormTable = $('<table class="jtable-input-field-container-grid"/>').appendTo($addRecordForm);
+			var $RowContainer = $('<tr class="jtable-input-field-container-row" />').appendTo($CreateFormTable);
             //Create input elements
             for (var i = 0; i < self._fieldList.length; i++) {
 
@@ -247,10 +250,16 @@
                     continue;
                 }
 
-                //Create a container div for this input field and add to form
-                var $fieldContainer = $('<div />')
+                //Create a container table cell for this input field and add to form
+                var $fieldContainer = $('<td />')
                     .addClass('jtable-input-field-container')
-                    .appendTo($addRecordForm);
+                    .appendTo($RowContainer);
+
+                CurrentColumnCount++;
+				if(CurrentColumnCount==ColumnCount)	{
+						$RowContainer=$('<tr class="jtable-input-field-container-row" />').appendTo($CreateFormTable);
+						CurrentColumnCount=0;
+				}
 
                 //Create a label for input
                 $fieldContainer.append(self._createInputLabelForRecordField(fieldName));

dev/jquery.jtable.deletion.js

@@ -364,6 +364,25 @@
             var postData = {};
             postData[self._keyField] = self._getKeyValueOfRecord($row.data('record'));
 
+            //Add additional field to delete request POST 
+            for (var i = 0; i < this._fieldList.length; i++) {
+                var fieldName = this._fieldList[i];
+                var field = this.options.fields[fieldName];
+
+                //Do not send this field to server if field delete option is not explicitly set to true
+                if (!field.delete) {
+                    continue;
+                }
+
+                //Key field is already added to postData
+                if (self._keyField == fieldName) {
+                    continue;
+                } 
+
+                //Add field to postData to be sent to server
+                postData[fieldName] = $row.data('record')[fieldName];
+            }
+
             //deleteAction may be a function, check if it is
             if (!url && $.isFunction(self.options.actions.deleteAction)) {
 

dev/jquery.jtable.editing.js

@@ -258,7 +258,10 @@
 
             //Create edit form
             var $editForm = $('<form id="jtable-edit-form" class="jtable-dialog-form jtable-edit-form"></form>');
-
+            var ColumnCount=self.options.editFormColumns ? self.options.editFormColumns : 1;
+            var CurrentColumnCount=0;
+            var $EditFormTable = $('<table class="jtable-input-field-container-grid"/>').appendTo($editForm);
+            var $RowContainer = $('<tr class="jtable-input-field-container-row" />').appendTo($EditFormTable);
             //Create input fields
             for (var i = 0; i < self._fieldList.length; i++) {
 
@@ -289,7 +292,15 @@
                 }
 
                 //Create a container div for this input field and add to form
-                var $fieldContainer = $('<div class="jtable-input-field-container"></div>').appendTo($editForm);
+                var $fieldContainer = $('<td />')
+                    .addClass('jtable-input-field-container')
+                    .appendTo($RowContainer);
+
+                CurrentColumnCount++;
+				if(CurrentColumnCount==ColumnCount)	{
+						$RowContainer=$('<tr class="jtable-input-field-container-row" />').appendTo($EditFormTable);
+						CurrentColumnCount=0;
+				}
 
                 //Create a label for input
                 $fieldContainer.append(self._createInputLabelForRecordField(fieldName));