Dcat Admin 後臺系統構建工具--表單元件自定義（按鈕聯動和選擇框三級地址聯動）

FirstBlood發表於2020-05-17
元件

剛入坑時遇到的一些問題，希望能提供幫助Dcat Admin 後臺系統構建工具 使用爬坑記錄 –簡單高效，開箱即用

        //自定義表單元件聯動 radio
        $form->radio('state')->options(['1' => '1', '2' => '2', '3' => '3', '4' => '4', '5' => '5']);
        $form->file('file');
        $form->textarea('content2');
        $form->datetime('created_at');
        $form->datetime('updated_at');
        $form->editor('content1');
        Admin::script(
            <<<JS
(function () {
    var fileGroup = $('input[name="file"]').parents('.form-group');//透過js獲取標籤名透過在前臺頁面進行檢查發現所有表單框的父class選擇器都是 form-group,
    // 獲取表單框的命名並向上遍歷查詢父類選擇器名字進行篩選

    var contentGroup = $('textarea[name="content2"]').parents('.form-group');

    var created_atGroup = $('input[name="created_at"]').parents('.form-group');

    var updated_atGroup = $('input[name="updated_at"]').parents('.form-group');

    var editorGroup = $('textarea[name="content1"]').parents('.form-group');
    fileGroup.hide();   //隱藏檔案提交框
    contentGroup.hide();//隱藏內容輸入框
    created_atGroup.hide();//隱藏建立時間
    updated_atGroup.hide();//隱藏更新時間
    editorGroup.hide();//隱藏編輯器

    $('input[name="state"]').on('change', function () {//透過點選radio獲取radio的值 來判斷哪個輸入框進行展示

        if ($(this).val() == 1) {
            fileGroup.show();
            contentGroup.hide();
            created_atGroup.hide();
            updated_atGroup.hide();
            editorGroup.hide();
        }
        if ($(this).val() == 2) {
            contentGroup.show();
            fileGroup.hide();
            created_atGroup.hide();
            updated_atGroup.hide();
            editorGroup.hide();
        }
         if ($(this).val() == 3) {
            created_atGroup.show();
            fileGroup.hide();
            contentGroup.hide();
            updated_atGroup.hide();
            editorGroup.hide();
        }
         if ($(this).val() == 4) {
            updated_atGroup.show();
            fileGroup.hide();
            contentGroup.hide();
            created_atGroup.hide();
            editorGroup.hide();
        }
         if ($(this).val() == 5) {
            editorGroup.show();
            fileGroup.hide();
            contentGroup.hide();
            created_atGroup.hide();
            updated_atGroup.hide();
        }
    })
})();
JS
        );
  //自定義表單元件三級聯動（地址聯動，省市縣聯動）
        $form->select('provinces')->options(['1' => '1', '2' => '2', '3' => '3', '4' => '4', '5' => '5']);
        $form->select('city')->options(['1' => '1', '2' => '2', '3' => '3', '4' => '4', '5' => '5']);
        $form->select('counties')->options(['1' => '1', '2' => '2', '3' => '3', '4' => '4', '5' => '5']);
        Admin::script(
            <<<JS
(function () {
    var cityGroup = $('select[name="city"]').parents('.form-group');//透過js獲取標籤名透過在前臺頁面進行檢查發現所有表單框的父class選擇器都是 form-group,
    var countiesGroup = $('select[name="counties"]').parents('.form-group');//透過js獲取標籤名透過在前臺頁面進行檢查發現所有表單框的父class選擇器都是 form-group,
    // 獲取表單框的命名並向上遍歷查詢父類選擇器名字進行篩選
    cityGroup.hide();  //隱藏
    countiesGroup.hide();

    $('select[name="provinces"]').on('change', function () {//透過點選獲取的值
      if($(this).val){
     cityGroup.show();   
      }
    })
       $('select[name="city"]').on('change', function () {//透過點選radio獲取radio的值 來判斷哪個輸入框進行展示
      if($(this).val){
     countiesGroup.show();   
      }
    })
})();   
JS
        );
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章