简体   繁体   English

复选框样式并使其检查

[英]checkbox styling and making it checked

  1. The checkbox retrieved from database is so long that it is going downwards, is there any way to make it as four layers 从数据库中检索的复选框太长,以至于它向下,有没有办法将它作为四层
  2. when clicked on "all fields" checkbox all checkbox must be checked. 单击“所有字段”复选框时,必须选中所有复选框。

How this to be done? 怎么做?
My code :- 我的代码: -

 protected function getConfigForm()
    {         
        $sql = 'SELECT id_order_state,name  FROM '._DB_PREFIX_.'order_state_lang';
        $results = Db::getInstance()->ExecuteS($sql);

        $values_query = array(array(
            'id' => 'AllFields',
            'name' => $this->l('All Fields'),
            'val' => 'All',
        ));
        foreach ($results as $row) {
            $values_query[] = array(
                'id' => 'OrderID',
                'name' => $this->l($row['name']),
                'val' => $row['id_order_state'],
                'required' => true,
            );
        }

        return array(
            'form' => array(
                'legend' => array(
                    'title' => $this->l('Settings'),
                    'icon' => 'icon-cogs',
                ),
                'input' => array(                   
                    array(
                        'type' => 'checkbox',
                        'label' => $this->l('Select Required Status'),
                        'required' => true,
                        'values' => array(
                            'query' => $values_query,
                            'id' => 'id',
                            'name' => 'name'
                        ),
                    ),
                ),
                'submit' => array(
                    'title' => $this->l('Save'),
                ),
            ),
        );
    }

Admin forms are rendered using /adminXXX/themes/default/template/helpers/form/form.tpl template file. 使用/adminXXX/themes/default/template/helpers/form/form.tpl模板文件呈现管理表单。

In classes /classes/helper/Helper.php there's a method createTemplate() : 在类/classes/helper/Helper.php有一个方法createTemplate()

public function createTemplate($tpl_name)
{
    if ($this->override_folder) {
        if ($this->context->controller instanceof ModuleAdminController) {
            $override_tpl_path = $this->context->controller->getTemplatePath().$this->override_folder.$this->base_folder.$tpl_name;
        } elseif ($this->module) {
            $override_tpl_path = _PS_MODULE_DIR_.$this->module->name.'/views/templates/admin/_configure/'.$this->override_folder.$this->base_folder.$tpl_name;
        } else {
            if (file_exists($this->context->smarty->getTemplateDir(1).$this->override_folder.$this->base_folder.$tpl_name)) {
                $override_tpl_path = $this->context->smarty->getTemplateDir(1).$this->override_folder.$this->base_folder.$tpl_name;
            } elseif (file_exists($this->context->smarty->getTemplateDir(0).'controllers'.DIRECTORY_SEPARATOR.$this->override_folder.$this->base_folder.$tpl_name)) {
                $override_tpl_path = $this->context->smarty->getTemplateDir(0).'controllers'.DIRECTORY_SEPARATOR.$this->override_folder.$this->base_folder.$tpl_name;
            }
        }
    } elseif ($this->module) {
        $override_tpl_path = _PS_MODULE_DIR_.$this->module->name.'/views/templates/admin/_configure/'.$this->base_folder.$tpl_name;
    }

    if (isset($override_tpl_path) && file_exists($override_tpl_path)) {
        return $this->context->smarty->createTemplate($override_tpl_path, $this->context->smarty);
    } else {
        return $this->context->smarty->createTemplate($this->base_folder.$tpl_name, $this->context->smarty);
    }
}

As you can see in this method, you have the possibility to override a default admin template inside your module by creating this file /modules/my_module/views/templates/admin/_configure/helpers/form/form.tpl : 正如您在此方法中所看到的,您可以通过创建此文件/modules/my_module/views/templates/admin/_configure/helpers/form/form.tpl来覆盖模块中的默认管理模板:

{extends file="helpers/form/form.tpl"}
{block name="input"}
    {if $input.type == 'checkbox'}
        {if isset($input.expand)}
            <a class="btn btn-default show_checkbox{if strtolower($input.expand.default) == 'hide'} hidden{/if}" href="#">
                <i class="icon-{$input.expand.show.icon}"></i>
                {$input.expand.show.text}
                {if isset($input.expand.print_total) && $input.expand.print_total > 0}
                    <span class="badge">{$input.expand.print_total}</span>
                {/if}
            </a>
            <a class="btn btn-default hide_checkbox{if strtolower($input.expand.default) == 'show'} hidden{/if}" href="#">
                <i class="icon-{$input.expand.hide.icon}"></i>
                {$input.expand.hide.text}
                {if isset($input.expand.print_total) && $input.expand.print_total > 0}
                    <span class="badge">{$input.expand.print_total}</span>
                {/if}
            </a>
        {/if}

        {* HERE WE DEFINE A CHECKBOX CHECK_ALL *}
        <input type="checkbox" id="check_all" name="check_all" data-name="{$input.name}" value="1" />

        {foreach $input.values.query as $value}
            {assign var=id_checkbox value=$input.name|cat:'_'|cat:$value[$input.values.id]}

            {* HERE YOU CAN REARRANGE THE CHECKBOXES AS YOU WANT *}
            <div class="checkbox{if isset($input.expand) && strtolower($input.expand.default) == 'show'} hidden{/if}">
                {strip}
                    <label for="{$id_checkbox}">
                        <input type="checkbox" name="{$id_checkbox}" id="{$id_checkbox}" class="{if isset($input.class)}{$input.class}{/if}"{if isset($value.val)} value="{$value.val|escape:'html':'UTF-8'}"{/if}{if isset($fields_value[$id_checkbox]) && $fields_value[$id_checkbox]} checked="checked"{/if} />
                        {$value[$input.values.name]}
                    </label>
                {/strip}
            </div>
        {/foreach}
    {else}
        {$smarty.block.parent}
    {/if}
{/block}

{* HERE WE DEFINE THE JAVASCRIPT THAT WILL ANIMATE THE CHECK ALL CHECKBOX *}
<script type="text/javascript">
    $("#check_all").on('change', function() {
        $("input[name=" + $(this).data('name') + "]").prop('checked', true);
        $(this).prop('checked', false);
    });
</script>

This template will be used for every admin controller defined in your module. 此模板将用于模块中定义的每个管理控制器。

I didn't test this code, you'll have to adapt it to your needs but the overall concept is here. 我没有测试这段代码,你必须根据自己的需要进行调整,但整体概念就在这里。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM