表单字段JS重构，使用Dcat.init()方法初始化

resources/views/form/captcha.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
@@ -20,8 +20,8 @@
     </div>
 </div>
 
-<script once>
-    $('.field-refresh-captcha').off('click').on('click', function () {
+<script init=".field-refresh-captcha" once>
+    $this.off('click').on('click', function () {
         $(this).attr('src', $(this).attr('data-url')+'?'+Math.random());
     });
 </script>

resources/views/form/checkbox.blade.php

@@ -1,8 +1,8 @@
 <div class="{{$viewClass['form-group']}}" >
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label pt-0">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label pt-0">{!! $label !!}</label>
 
-    <div class="{{$viewClass['field']}}" id="{{ $id }}">
+    <div class="{{$viewClass['field']}}">
 
         @if($checkAll)
             {!! $checkAll !!}
@@ -21,8 +21,8 @@
 </div>
 
 @if(! empty($canCheckAll))
-<script once>
-    $('[name="_check_all_"]').on('change', function () {
+<script init="[name='_check_all_']" once>
+    $this.on('change', function () {
         $(this).parents('.form-field').find('input[type="checkbox"]:not(:first)').prop('checked', this.checked).trigger('change');
     });
 </script>

resources/views/form/color.blade.php

@@ -3,7 +3,7 @@
 </style>
 
 <div class="{{$viewClass['form-group']}}">
-    <div for="{{ $id }}" class="{{$viewClass['label']}} control-label">
+    <div  class="{{$viewClass['label']}} control-label">
         <span>{!! $label !!}</span>
     </div>
 
@@ -25,8 +25,8 @@
     </div>
 </div>
 
-<script require="@color">
-    $('{{ $selector }}').colorpicker({!! admin_javascript_json($options) !!}).on('colorpickerChange', function(event) {
+<script require="@color" init="{!! $selector !!}">
+    $this.colorpicker({!! admin_javascript_json($options) !!}).on('colorpickerChange', function(event) {
         $(this).parents('.input-group').find('.input-group-prepend i').css('background-color', event.color.toString());
     });
 </script>

resources/views/form/daterange.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id['start']}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
@@ -31,15 +31,16 @@
     </div>
 </div>
 
-<script require="@moment,@bootstrap-datetimepicker">
+<script require="@moment,@bootstrap-datetimepicker" init="{!! $selector['start'] !!}">
     var options = {!! admin_javascript_json($options) !!};
+    var $end = $this.parents('.row').find('{!! $selector['end'] !!}');
 
-    $('{{ $selector['start'] }}').datetimepicker(options);
-    $('{{ $selector['end'] }}').datetimepicker($.extend(options, {useCurrent: false}));
-    $("{{ $selector['start'] }}").on("dp.change", function (e) {
+    $this.datetimepicker(options);
+    $end.datetimepicker($.extend(options, {useCurrent: false}));
+    $this.on("dp.change", function (e) {
         $('{{ $selector['end'] }}').data("DateTimePicker").minDate(e.date);
     });
-    $("{{ $selector['end'] }}").on("dp.change", function (e) {
-        $('{{ $selector['start'] }}').data("DateTimePicker").maxDate(e.date);
+    $end.on("dp.change", function (e) {
+        $this.data("DateTimePicker").maxDate(e.date);
     });
 </script>

resources/views/form/datetimerange.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id['start']}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
@@ -31,16 +31,17 @@
     </div>
 </div>
 
-<script require="@moment,@bootstrap-datetimepicker">
+<script require="@moment,@bootstrap-datetimepicker" init="{!! $selector['start'] !!}">
     var options = {!! admin_javascript_json($options) !!};
+    var $end = $this.parents('.row').find('{!! $selector['end'] !!}');
 
-    $('{{ $selector['start'] }}').datetimepicker(options);
-    $('{{ $selector['end'] }}').datetimepicker($.extend(options, {useCurrent: false}));
-    $("{{ $selector['start'] }}").on("dp.change", function (e) {
-        $('{{ $selector['end'] }}').data("DateTimePicker").minDate(e.date);
+    $this.datetimepicker(options);
+    $end.datetimepicker($.extend(options, {useCurrent: false}));
+    $this.on("dp.change", function (e) {
+        $end.data("DateTimePicker").minDate(e.date);
     });
-    $("{{ $selector['end'] }}").on("dp.change", function (e) {
-        $('{{ $selector['start'] }}').data("DateTimePicker").maxDate(e.date);
+    $end.on("dp.change", function (e) {
+        $this.data("DateTimePicker").maxDate(e.date);
     });
 </script>
 

resources/views/form/id.blade.php

@@ -1,8 +1,8 @@
 <div class="{{$viewClass['form-group']}}">
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
-        <input type="text" id="{{$id}}" name="{{$name}}" value="{{$value}}" class="form-control" readonly {!! $attributes !!} />
+        <input type="text" name="{{$name}}" value="{{$value}}" class="form-control" readonly {!! $attributes !!} />
 
         @include('admin::form.help-block')
 

resources/views/form/input.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <div for="{{ $id }}" class="{{$viewClass['label']}} control-label">
+    <div class="{{$viewClass['label']}} control-label">
         <span>{!! $label !!}</span>
     </div>
 

resources/views/form/keyvalue.blade.php

@@ -2,7 +2,7 @@
     td .form-group {margin-bottom: 0 !important;}
 </style>
 
-<div class="{{$viewClass['form-group']}}">
+<div class="{{$viewClass['form-group']}} {{ $class }}">
 
     <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
 
@@ -20,7 +20,7 @@
                 <th style="width: 85px;"></th>
             </tr>
             </thead>
-            <tbody class="kv-{{ $class }}-table">
+            <tbody class="kv-table">
 
             @foreach(($value ?: []) as $k => $v)
                 <tr>
@@ -45,7 +45,7 @@
 
                     <td class="form-group">
                         <div>
-                            <div class="{{ $class }}-remove btn btn-white btn-sm pull-right">
+                            <div class="kv-remove btn btn-white btn-sm pull-right">
                                 <i class="feather icon-trash">&nbsp;</i>{{ __('admin.remove') }}
                             </div>
                         </div>
@@ -58,7 +58,7 @@
                 <td></td>
                 <td></td>
                 <td>
-                    <div class="{{ $class }}-add btn btn-primary btn-outline btn-sm pull-right">
+                    <div class="kv-add btn btn-primary btn-outline btn-sm pull-right">
                         <i class="feather icon-save"></i>&nbsp;{{ __('admin.new') }}
                     </div>
                 </td>
@@ -66,10 +66,8 @@
             </tfoot>
         </table>
     </div>
-</div>
 
-<template>
-    <template class="{{$class}}-tpl">
+    <template>
         <tr>
             <td>
                 <div class="form-group  ">
@@ -90,25 +88,25 @@
 
             <td class="form-group">
                 <div>
-                    <div class="{{ $class }}-remove btn btn-white btn-sm pull-right">
+                    <div class="kv-remove btn btn-white btn-sm pull-right">
                         <i class="feather icon-trash">&nbsp;</i>{{ __('admin.remove') }}
                     </div>
                 </div>
             </td>
         </tr>
     </template>
-</template>
+</div>
 
-<script>
+<script init="{!! $selector !!}">
     var index = {{ $count }};
-    $('.{{ $class }}-add').on('click', function () {
-        var tpl = $('template.{{ $class }}-tpl').html().replace('{key}', index).replace('{key}', index);
-        $('tbody.kv-{{ $class }}-table').append(tpl);
+    $this.find('.kv-add').on('click', function () {
+        var tpl = $this.find('template').html().replace('{key}', index).replace('{key}', index);
+        $this.find('tbody.kv-table').append(tpl);
 
         index++;
     });
 
-    $('tbody').on('click', '.{{ $class }}-remove', function () {
+    $this.find('tbody.kv-table').on('click', '.kv-remove', function () {
         $(this).closest('tr').remove();
     });
 </script>

resources/views/form/listbox.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
@@ -18,6 +18,6 @@
     </div>
 </div>
 
-<script require="@jquery.bootstrap-duallistbox">
-    $("{{ $selector }}").bootstrapDualListbox({!! admin_javascript_json($settings) !!});
+<script require="@jquery.bootstrap-duallistbox" init="{!! $selector !!}">
+    $this.bootstrapDualListbox({!! admin_javascript_json($settings) !!});
 </script>

resources/views/form/listfield.blade.php

@@ -2,7 +2,7 @@
     td .form-group {margin-bottom: 0 !important;}
 </style>
 
-<div class="{{$viewClass['form-group']}}">
+<div class="{{$viewClass['form-group']}} {{$class}}">
 
     <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
 
@@ -11,14 +11,13 @@
         <div class="help-block with-errors"></div>
 
         <span name="{{$name}}"></span>
-        <input name="{{ $name }}[values][{{ \Dcat\Admin\Form\Field\ListField::DEFAULT_FLAG_NAME }}]" type="hidden" />
+        <input name="{{ $name }}[values][{{ Dcat\Admin\Form\Field\ListField::DEFAULT_FLAG_NAME }}]" type="hidden" />
 
         <table class="table table-hover">
 
-            <tbody class="list-{{$class}}-table">
+            <tbody class="list-table">
 
             @foreach(($value ?: []) as $k => $v)
-
                 <tr>
                     <td>
                         <div class="form-group">
@@ -41,7 +40,7 @@
             <tr>
                 <td></td>
                 <td>
-                    <div class="{{ $class }}-add btn btn-primary btn-outline btn-sm pull-right">
+                    <div class="list-add btn btn-primary btn-outline btn-sm pull-right">
                         <i class="feather icon-save"></i>&nbsp;{{ __('admin.new') }}
                     </div>
                 </td>
@@ -49,10 +48,8 @@
             </tfoot>
         </table>
     </div>
-</div>
 
-<template>
-    <template class="{{$class}}-tpl">
+    <template>
         <tr>
             <td>
                 <div class="form-group">
@@ -64,23 +61,23 @@
             </td>
 
             <td style="width: 85px;">
-                <div class="{{$class}}-remove btn btn-white btn-sm pull-right">
+                <div class="list-remove btn btn-white btn-sm pull-right">
                     <i class="feather icon-trash">&nbsp;</i>{{ __('admin.remove') }}
                 </div>
             </td>
         </tr>
     </template>
-</template>
+</div>
 
-<script>
+<script init="{!! $selector !!}">
     var index = {{ $count }};
-    $('.{{ $class }}-add').on('click', function () {
-        var tpl = $('template.{{ $class }}-tpl').html().replace('{key}', index);
-        $('tbody.list-{{ $class }}-table').append(tpl);
+    $this.find('.list-add').on('click', function () {
+        var tpl = $this.find('template').html().replace('{key}', index);
+        $this.find('tbody.list-table').append(tpl);
 
         index++;
     });
-    $('tbody').on('click', '.{{ $class }}-remove', function () {
+    $this.find('tbody.list-table').on('click', '.list-remove', function () {
         $(this).closest('tr').remove();
     });
 </script>

resources/views/form/markdown.blade.php

@@ -19,6 +19,6 @@
     </div>
 </div>
 
-<script require="@markdown" init=".form-field-markdown" id>
+<script require="@markdown" init=".form-field-markdown">
     editormd(id, {!! $options !!});
 </script>

resources/views/form/multipleselect.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <div for="{{ $id }}" class="{{$viewClass['label']}} control-label">
+    <div  class="{{$viewClass['label']}} control-label">
         <span>{!! $label !!}</span>
     </div>
 

resources/views/form/number.blade.php

@@ -4,7 +4,7 @@
 
 <div class="{{$viewClass['form-group']}}">
 
-    <div for="{{ $id }}" class="{{$viewClass['label']}} control-label">
+    <div  class="{{$viewClass['label']}} control-label">
         <span>{!! $label !!}</span>
     </div>
 
@@ -29,8 +29,6 @@
     </div>
 </div>
 
-<script require="@number-input">
-    $('{{ $selector }}:not(.initialized)')
-        .addClass('initialized')
-        .bootstrapNumber({!! admin_javascript_json($options) !!});
+<script require="@number-input" init="{!! $selector !!}">
+    $this.bootstrapNumber({!! admin_javascript_json($options) !!});
 </script>

resources/views/form/radio.blade.php

@@ -1,8 +1,8 @@
 <div class="{{$viewClass['form-group']}}" >
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
-    <div class="{{$viewClass['field']}}" id="{{ $id }}">
+    <div class="{{$viewClass['field']}}">
 
         @include('admin::form.error')
 

resources/views/form/range.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id['start']}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 

resources/views/form/rate.blade.php

@@ -1,13 +1,13 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
         @include('admin::form.error')
 
         <div class="input-group" style="width: 150px">
-            <input type="text" id="{{$id}}" name="{{$name}}" value="{{ $value }}" class="form-control {{ $class }}" placeholder="0" style="text-align:right;" {!! $attributes !!} />
+            <input type="text" name="{{$name}}" value="{{ $value }}" class="form-control {{ $class }}" placeholder="0" style="text-align:right;" {!! $attributes !!} />
             <span class="input-group-addon">%</span>
         </div>
 

resources/views/form/select-script.blade.php

@@ -1,7 +1,7 @@
 
 @include('admin::scripts.select')
 
-<script require="@select2">
+<script require="@select2" init="{!! $selector !!}">
     var configs = {!! admin_javascript_json($configs) !!};
 
     @yield('admin.select-ajax')
@@ -10,7 +10,7 @@
     $.ajax({!! admin_javascript_json($remoteOptions) !!}).done(function(data) {
         configs.data = data;
 
-        $("{!! $selector !!}").each(function (_, select) {
+        $this.each(function (_, select) {
             select = $(select);
 
             select.select2(configs);
@@ -23,7 +23,7 @@
         });
     });
     @else
-    $("{!! $selector !!}").select2(configs);
+    $this.select2(configs);
     @endif
 </script>
 

resources/views/form/select.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <div for="{{ $id }}" class="{{ $viewClass['label'] }} control-label">
+    <div  class="{{ $viewClass['label'] }} control-label">
         <span>{!! $label !!}</span>
     </div>
 

resources/views/form/selecttable.blade.php

@@ -7,11 +7,12 @@
             <div {!! $attributes !!}>
                 <span class="default-text" style="opacity:0.75">{{ $placeholder }}</span>
                 <span class="option d-none"></span>
+
+                @if(! $disabled)
+                    <input name="{{ $name }}" type="hidden" value="{{ implode(',', Dcat\Admin\Support\Helper::array($value)) }}" />
+                @endif
             </div>
 
-            @if(! $disabled)
-                <input name="{{ $name }}" type="hidden" id="hidden-{{ $id }}" value="{{ implode(',', \Dcat\Admin\Support\Helper::array($value)) }}" />
-            @endif
             <div class="input-group-append">
                 {!! $dialog !!}
             </div>
@@ -22,13 +23,13 @@
     </div>
 </div>
 
-<script require="@select-table">
-    {!! $dialogScript !!}
+<script require="@select-table" init="{!! $selector !!}">
+    var dialogId = $this.parent().find('{!! $dialogSelector !!}').attr('id');
 
     Dcat.grid.SelectTable({
-        dialog: replaceNestedFormIndex('#{{ $dialogId }}'),
-        container: replaceNestedFormIndex('#container-{{ $id }}'),
-        input: replaceNestedFormIndex('#hidden-{{ $id }}'),
+        dialog: '[data-id="' + dialogId + '"]',
+        container: $this,
+        input: $(this).find('input'),
         @if(isset($max))
         multiple: true,
         max: {{ $max }},

resources/views/form/slider.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
@@ -13,8 +13,8 @@
     </div>
 </div>
 
-<script require="@ionslider">
+<script require="@ionslider" init="{!! $selector !!}">
     setTimeout(function () {
-        $('{{ $selector }}').ionRangeSlider({!! admin_javascript_json($options) !!})
+        $this.ionRangeSlider({!! admin_javascript_json($options) !!})
     }, 400);
 </script>

resources/views/form/switchfield.blade.php

@@ -1,24 +1,22 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
         @include('admin::form.error')
         <input name="{{$name}}" type="hidden" value="0" />
-        <input type="checkbox" name="{{$name}}" class="{{$class}} la_checkbox" {{ $value == 1 ? 'checked' : '' }} {!! $attributes !!} />
+        <input type="checkbox" name="{{$name}}" class="{{ $class }}" {{ $value == 1 ? 'checked' : '' }} {!! $attributes !!} />
 
         @include('admin::form.help-block')
 
     </div>
 </div>
 
-<script require="@switchery">
-    var $input = $('[data-plugin="{{ $formId }}switchery"]');
+<script require="@switchery" init="{!! $selector !!}">
+    $this.parent().find('.switchery').remove();
 
-    $input.parent().find('.switchery').remove();
-
-    $input.each(function() {
+    $this.each(function() {
         new Switchery($(this)[0], $(this).data())
     })
 </script>

resources/views/form/tags.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
@@ -70,11 +70,10 @@
 </script>
 
 {{--解决输入中文后无法回车结束的问题。--}}
-<script once>
-    var selector = '.select2-selection--multiple .select2-search__field';
-    $(document).off('keyup', selector).on('keyup', selector, function (event) {
+<script init=".select2-selection--multiple .select2-search__field">
+    $this.on('keyup', function (e) {
         try {
-            if (event.keyCode == 13) {
+            if (e.keyCode == 13) {
                 var $this = $(this), optionText = $this.val();
                 if (optionText != "" && $this.find("option[value='" + optionText + "']").length === 0) {
                     var $select = $this.parents('.select2-container').prev("select");

resources/views/form/textarea.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 

resources/views/form/timerange.blade.php

@@ -1,6 +1,6 @@
 <div class="{{$viewClass['form-group']}}">
 
-    <label for="{{$id['start']}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+    <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
 
     <div class="{{$viewClass['field']}}">
 
@@ -30,3 +30,18 @@
 
     </div>
 </div>
+
+<script require="@moment,@bootstrap-datetimepicker" init="{!! $selector['start'] !!}">
+    var options = {!! admin_javascript_json($options) !!};
+    var $end = $this.parents('.row').find('{!! $selector['end'] !!}');
+
+    $this.datetimepicker(options);
+    $end.datetimepicker($.extend(options, {useCurrent: false}));
+    $this.on("dp.change", function (e) {
+        $('{{ $selector['end'] }}').data("DateTimePicker").minDate(e.date);
+    });
+    $end.on("dp.change", function (e) {
+        $this.data("DateTimePicker").maxDate(e.date);
+    });
+</script>
+

resources/views/widgets/dialogtable.blade.php

@@ -15,7 +15,8 @@
 <script init=".{{ $class }}">
     var area = screen.width <= 850 ? ['100%', '100%',] : '{{ $width }}',
         offset = screen.width <= 850 ? 0 : '70px',
-        _tb = '.async-table', _container = '.dialog-table',
+        _tb = '.async-table',
+        _container = '.dialog-table',
         _id, _temp, _btnId;
 
     setId(id);

src/Form/Field.php

@@ -29,13 +29,6 @@ class Field implements Renderable
 
     const FIELD_CLASS_PREFIX = 'field_';
 
-    /**
-     * Element id.
-     *
-     * @var array|string
-     */
-    protected $id;
-
     /**
      * Element value.
      *
@@ -223,11 +216,6 @@ class Field implements Renderable
      */
     protected $savingCallbacks = [];
 
-    /**
-     * @var bool
-     */
-    protected $runScript = true;
-
     /**
      * Field constructor.
      *
@@ -238,45 +226,10 @@ class Field implements Renderable
     {
         $this->column = $column;
         $this->label = $this->formatLabel($arguments);
-        $this->id = $this->formatId($column);
 
         $this->callResolving();
     }
 
-    /**
-     * Get the field element id.
-     *
-     * @return string|array
-     */
-    public function getElementId()
-    {
-        return $this->id;
-    }
-
-    /**
-     * Format the field element id.
-     *
-     * @param string|array $column
-     *
-     * @return string|array
-     */
-    protected function formatId($column)
-    {
-        $random = Str::random(5);
-
-        if (is_array($column)) {
-            $id = [];
-
-            foreach (str_replace('.', '-', $column) as $k => $v) {
-                $id[$k] = "{$v}-{$random}";
-            }
-
-            return $id;
-        }
-
-        return 'form-field-'.str_replace('.', '-', $column).'-'.$random;
-    }
-
     /**
      * @param array $options
      *
@@ -284,14 +237,6 @@ class Field implements Renderable
      */
     public function setNestedFormRelation(array $options = [])
     {
-        if (is_array($this->id)) {
-            $this->id = array_map(function ($v) {
-                return $v.NestedForm::DEFAULT_KEY_NAME;
-            }, $this->id);
-        } else {
-            $this->id .= NestedForm::DEFAULT_KEY_NAME;
-        }
-
         return $this;
     }
 
@@ -1158,7 +1103,6 @@ class Field implements Renderable
     public function defaultVariables()
     {
         return [
-            'id'          => $this->id,
             'name'        => $this->getElementName(),
             'help'        => $this->help,
             'class'       => $this->getElementClassString(),
@@ -1292,28 +1236,14 @@ class Field implements Renderable
 
         $this->callComposing();
 
-        $result = Admin::resolveHtml(
-            view($this->view(), $this->variables()),
-            ['runScript' => $this->runScript]
-        );
-
-        $this->script .= $result['script'];
-
         $this->withScript();
 
-        return $result['html'];
-    }
-
-    public function runScript(bool $value = true)
-    {
-        $this->runScript = $value;
-
-        return $this;
+        return Admin::view($this->view(), $this->variables());
     }
 
     protected function withScript()
     {
-        if ($this->script && $this->runScript) {
+        if ($this->script) {
             Admin::script($this->script);
         }
     }

src/Form/Field/DateRange.php

@@ -17,7 +17,6 @@ class DateRange extends Field
 
         array_shift($arguments);
         $this->label = $this->formatLabel($arguments);
-        $this->id = $this->formatId($this->column);
 
         $this->options(['format' => $this->format]);
     }

src/Form/Field/File.php

@@ -101,8 +101,6 @@ class File extends Field implements UploadFieldInterface
     {
         $this->options['formData']['_relation'] = [$options['relation'], $options['key']];
 
-        $this->id .= NestedForm::DEFAULT_KEY_NAME;
-
         return $this;
     }
 

src/Form/Field/Map.php

@@ -51,7 +51,6 @@ class Map extends Field
         array_shift($arguments);
 
         $this->label = $this->formatLabel($arguments);
-        $this->id = $this->formatId($this->column);
 
         /*
          * Google map is blocked in mainland China

src/Form/Field/Range.php

@@ -20,7 +20,6 @@ class Range extends Field
 
         array_shift($arguments);
         $this->label = $this->formatLabel($arguments);
-        $this->id = $this->formatId($this->column);
     }
 
     protected function prepareInputValue($value)

src/Form/Field/SelectTable.php

@@ -127,8 +127,6 @@ class SelectTable extends Field
     protected function setUpTable()
     {
         $this->dialog
-            ->id($this->getElementId())
-            ->runScript(false)
             ->footer($this->renderFooter())
             ->button($this->renderButton());
     }
@@ -141,17 +139,15 @@ class SelectTable extends Field
         $this->prepend('<i class="feather icon-arrow-up"></i>')
             ->defaultAttribute('class', 'form-control '.$this->getElementClassString())
             ->defaultAttribute('type', 'text')
-            ->defaultAttribute('name', $this->getElementName())
-            ->defaultAttribute('id', 'container-'.$this->getElementId());
+            ->defaultAttribute('name', $this->getElementName());
 
         $this->addVariables([
-            'prepend'      => $this->prepend,
-            'append'       => $this->append,
-            'style'        => $this->style,
-            'dialog'       => $this->dialog->render(),
-            'placeholder'  => $this->placeholder(),
-            'dialogId'     => $this->dialog->id(),
-            'dialogScript' => $this->dialog->getScript(),
+            'prepend'        => $this->prepend,
+            'append'         => $this->append,
+            'style'          => $this->style,
+            'dialog'         => $this->dialog->render(),
+            'placeholder'    => $this->placeholder(),
+            'dialogSelector' => $this->dialog->getElementSelector(),
         ]);
 
         return parent::render();

src/Form/Field/Text.php

@@ -4,6 +4,7 @@ namespace Dcat\Admin\Form\Field;
 
 use Dcat\Admin\Admin;
 use Dcat\Admin\Form\Field;
+use Illuminate\Support\Str;
 
 class Text extends Field
 {
@@ -28,7 +29,6 @@ class Text extends Field
         $this->initPlainInput();
 
         $this->defaultAttribute('type', 'text')
-            ->defaultAttribute('id', $this->id)
             ->defaultAttribute('name', $this->getElementName())
             ->defaultAttribute('value', $this->value())
             ->defaultAttribute('class', 'form-control '.$this->getElementClassString())
@@ -76,7 +76,7 @@ class Text extends Field
         }
 
         $attributes = [
-            'data-match'       => '#'.$field->getElementId(),
+            'data-match'       => $field->getElementClassSelector(),
             'data-match-error' => str_replace(
                 [':attribute', ':other'],
                 [$field->label(), $this->label()],
@@ -188,9 +188,11 @@ JS
      */
     public function datalist($entries = [])
     {
-        $this->defaultAttribute('list', "list-{$this->id}");
+        $id = Str::random(8);
 
-        $datalist = "<datalist id=\"list-{$this->id}\">";
+        $this->defaultAttribute('list', "list-{$id}");
+
+        $datalist = "<datalist id=\"list-{$id}\">";
         foreach ($entries as $k => $v) {
             $value = is_string($k) ? "value=\"{$k}\"" : '';
 
@@ -198,7 +200,7 @@ JS
         }
         $datalist .= '</datalist>';
 
-        Admin::script("$('#list-{$this->id}').parent().hide()");
+        Admin::script("$('#list-{$id}').parent().hide()");
 
         return $this->append($datalist);
     }

src/Http/Controllers/UserController.php

@@ -129,8 +129,6 @@ class UserController extends AdminController
 
             $form->display('id', 'ID');
 
-            $form->editor('test');
-
             $form->text('username', trans('admin.username'))
                 ->required()
                 ->creationRules(['required', "unique:{$connection}.{$userTable}"])

src/Traits/HasHtml.php

@@ -8,7 +8,7 @@ use DOMElement;
 
 trait HasHtml
 {
-    protected static $shouldResolveTags = ['style', 'script', 'template'];
+    protected static $shouldResolveTags = ['style', 'script'];
 
     /**
      * @param string|array $content
@@ -32,14 +32,15 @@ trait HasHtml
     /**
      * @param string $view
      * @param array  $data
+     * @param array  $data
      *
      * @return string
      *
      * @throws \Throwable
      */
-    public static function view(string $view, array $data = [])
+    public static function view(string $view, array $data = [], array $options = [])
     {
-        return static::resolveHtml(view($view, $data))['html'];
+        return static::resolveHtml(view($view, $data), $options)['html'];
     }
 
     /**
@@ -147,21 +148,6 @@ trait HasHtml
         }
     }
 
-    /**
-     * @param DOMElement $element
-     *
-     * @return void
-     */
-    protected static function resolveTemplate(DOMElement $element)
-    {
-        $html = '';
-        foreach ($element->childNodes as $childNode) {
-            $html .= $element->ownerDocument->saveHTML($childNode);
-        }
-
-        $html && static::html($html);
-    }
-
     protected static function resolveElement(?DOMElement $element)
     {
         $html = $script = '';

src/Widgets/DialogTable.php

@@ -187,7 +187,6 @@ class DialogTable extends Widget
     public function render()
     {
         $this->addVariables([
-            'id'     => $this->id(),
             'title'  => $this->title,
             'width'  => $this->width,
             'button' => $this->renderButton(),