Dcat Admin 后台系统构建工具--表单组件自定义（按钮联动和选择框三级地址联动）

FirstBlood 的个人博客 / 4558 / 0 / 创建于 3年前 / 更新于 3年前

刚入坑时遇到的一些问题，希望能提供帮助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
        );