复选框样式并使其选中 [英] checkbox styling and making it checked
问题描述
- 从数据库中取出的checkbox太长了往下走，有什么办法可以做成四层
- 当点击所有字段"复选框时，必须选中所有复选框.
如何做到这一点?
我的代码:-
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'),
),
),
);
}
推荐答案
管理表单使用 /adminXXX/themes/default/template/helpers/form/form.tpl 模板文件呈现.>
在类 /classes/helper/Helper.php 中有一个方法 createTemplate():
Admin forms are rendered using /adminXXX/themes/default/template/helpers/form/form.tpl template file.
In classes /classes/helper/Helper.php there's a method createTemplate():正如您在此方法中看到的，您可以通过创建此文件来覆盖模块内的默认管理模板 /modules/my_module/views/templates/admin/_configure/helpers/form/form.htmltpl:
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:{/foreach}{别的}{$smarty.block.parent}{/如果}{/堵塞}{* 在这里，我们定义了 JAVASCRIPT 将动画检查所有复选框 *}<script type="text/javascript">$("#check_all").on('change', function() {$("input[name=" + $(this).data('name') + "]").prop('checked', true);$(this).prop('checked', false);});
{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.
这篇关于复选框样式并使其选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
