Pre Merge pull request !157 from Oo小刚oO/master

extend/fast/Form.php

@@ -666,10 +666,27 @@ EOD;
         if (is_null($title)) {
             $title = [__('Key'), __('Value')];
         }
+        $value = is_array($value) ? json_encode($value) : $value;
+        if (isset($options['data-layout']) && $options['data-layout'] == 'table') {
+            $th = implode("\n", array_map(function ($value) {
+                return "<th>{$value}</th>";
+            }, $title));
+            $html = <<<EOD
+<dl class="fieldlist" data-name="{$name}" {$template} {$attributes}>
+    <table class="table table-bordered table-condensed">
+        <tr>
+        {$th}
+        <th>操作</th>
+        </tr>
+    </table>
+    <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {$append}</a>
+    <textarea name="{$name}" class="form-control hide" cols="30" rows="5">{$value}</textarea>
+</dl>
+EOD;
+        }else{
             $ins = implode("\n", array_map(function ($value) {
                 return "<ins>{$value}</ins>";
             }, $title));
-        $value = is_array($value) ? json_encode($value) : $value;
             $html = <<<EOD
 <dl class="fieldlist" data-name="{$name}" {$template} {$attributes}>
     <dd>
@@ -679,6 +696,7 @@ EOD;
     <textarea name="{$name}" class="form-control hide" cols="30" rows="5">{$value}</textarea>
 </dl>
 EOD;
+        }
         return $html;
     }
 

public/assets/js/require-form.js

@@ -1,12 +1,15 @@
 define(['jquery', 'bootstrap', 'upload', 'validator'], function($, undefined, Upload, Validator) {
     var Form = {
         config: {
-            fieldlisttpl: '<dd class="form-inline"><input type="text" name="<%=name%>[<%=index%>][key]" class="form-control" value="<%=row.key%>" size="10" /> <input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=row.value%>" /> <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></dd>'
+            fieldlisttpl: '<dd class="form-inline"><input type="text" name="<%=name%>[<%=index%>][key]" class="form-control" value="<%=row.key%>" size="10" /> <input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=row.value%>" /> <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></dd>',
+            tablelisttpl: '<tr><td><input type="text" name="<%=name%>[<%=index%>][key]" class="form-control" value="<%=row.key%>" size="10" /></td><td><input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=row.value%>" /></td><td><span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></td></tr>'
         },
         events: {
             validator: function(form, success, error, submit) {
                 if (!form.is("form"))
                     return;
+                let options = form.data("validator-options");
+                options = options && options.charAt(0) === '{' ? (new Function('return ' + options))() : {};
                 //绑定表单事件
                 form.validator($.extend({
                     validClass: 'has-success',
@@ -38,7 +41,8 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
                         return $msgbox;
                     },
                     valid: function(ret) {
-                        var that = this, submitBtn = $(".layer-footer [type=submit]", form);
+                        var that = this,
+                            submitBtn = $(".layer-footer [type=submit]", form);
                         that.holdSubmit(true);
                         submitBtn.addClass("disabled");
                         //验证通过提交表单
@@ -79,7 +83,7 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
                         }
                         return false;
                     }
-                }, form.data("validator-options") || {}));
+                }, options || {}));
 
                 //移除提交按钮的disabled类
                 $(".layer-footer [type=submit],.fixed-footer [type=submit],.normal-footer [type=submit]", form).removeClass("disabled");
@@ -298,12 +302,13 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
                             textarea.val(JSON.stringify(result));
                         };
                         //监听文本框改变事件
-                        $(document).on('change keyup', ".fieldlist input,.fieldlist textarea,.fieldlist select", function () {
+                        $(document).on('blur change keyup', ".fieldlist input,.fieldlist textarea,.fieldlist select", function() {
                             refresh($(this).closest("dl").data("name"));
                         });
                         //追加控制
                         $(".fieldlist", form).on("click", ".btn-append,.append", function(e, row) {
                             var container = $(this).closest("dl");
+                            var layout = container.data("layout");
                             var index = container.data("index");
                             var name = container.data("name");
                             var template = container.data("template");
@@ -312,25 +317,48 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
                             container.data("index", index + 1);
                             var row = row ? row : {};
                             var vars = { index: index, name: name, data: data, row: row };
+                            if (layout == 'table') {
+                                var table = $(container).children('table');
+                                var html = template ? Template(template, vars) : Template.render(Form.config.tablelisttpl, vars);
+                                $(html).insertAfter($(table).find("tr:last"));
+                                $(this).trigger("fa.event.appendfieldlist", $(table).find("tr:last"));
+                            } else {
                                 var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
                                 $(html).insertBefore($(this).closest("dd"));
                                 $(this).trigger("fa.event.appendfieldlist", $(this).closest("dd").prev());
+                            }
                         });
                         //移除控制
-                        $(".fieldlist", form).on("click", "dd .btn-remove", function () {
+                        $(".fieldlist", form).on("click", "dd .btn-remove,tr .btn-remove", function() {
                             var container = $(this).closest("dl");
+                            var layout = container.data("layout");
+                            if (layout == 'table') {
+                                $(this).closest("tr").remove();
+                            }else{
                                 $(this).closest("dd").remove();
+                            } 
                             refresh(container.data("name"));
                         });
                         //拖拽排序
-                        $("dl.fieldlist", form).dragsort({
+                        $("dl.fieldlist", form).each(function(index, element) {
-                            itemSelector: 'dd',
+                            var layout = $(this).data("layout");
+                            var itemSelector = 'dd';
+                            var placeHolderTemplate = "<dd></dd>";
+                            if (layout == 'table') {
+                                itemSelector = 'tr';
+                                placeHolderTemplate = "<tr></tr>";
+                                element = $(element).children('table')
+                            }
+                            $(element).dragsort({
+                                itemSelector: itemSelector,
                                 dragSelector: ".btn-dragsort",
                                 dragEnd: function() {
                                     refresh($(this).closest("dl").data("name"));
                                 },
-                            placeHolderTemplate: "<dd></dd>"
+                                placeHolderTemplate: placeHolderTemplate
                             });
+                        });
+
                         //渲染数据
                         $(".fieldlist", form).each(function() {
                             var container = this;
@@ -342,8 +370,7 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
                             var json = {};
                             try {
                                 json = JSON.parse(textarea.val());
-                            } catch (e) {
+                            } catch (e) {}
-                            }
                             $.each(json, function(i, j) {
                                 $(".btn-append,.append", container).trigger('click', template ? j : {
                                     key: i,