实用，修改Ecshop后台商品管理中的商品品牌项为可分组和搜索的下拉框

公司项目中遇到这样的问题，ecshop后台商品管理的过程中，特别是在后期商品品牌数量越来越多的时候，我们在添加或修改商品时，会遇到为某个商品添加指定一个品牌需要很费劲的去品牌选择的下拉框中去一个个找，这给产品发布人员造成了很大的不便，工作效率大大降低！在实际运用场景中，我们的产品发布人员希望能够通过搜索的方式直接指定已有的商品品牌，这时候这篇blog就诞生了，实现这一功能，我选择了使用Chosen这一小巧的JQuery插件。

Chosen 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。摘自Chosen介绍

闲话少叙，我们先来看下完成后的效果图：



这个时候我们再来添加商品品牌的时候就easy太多了。Chosen这一插件还能美化ecshop默认较丑陋的下拉框，实际项目中我们还有很多地方可以用到这样的功能，毕竟ecshop的后台真的太不友好了。是不是觉得美美哒呢！


由于ecshop默认是不兼容JQuery的，所以我们需要先对后台进行JQuery兼容处理，方法大家百度应该能有发现，这里我就不介绍了。

1、pageheader.htm中引入JQuery.js、Chosen.jquery.js、transport_jq.js

2、找到文件admin/templates/goods_info.htm 搜索如下代码

<tr>
<td class="label">{$lang.lab_goods_brand}</td>
<td><select name="brand_id" onchange="hideBrandDiv()" ><option value="0">{$lang.select_please}{html_options options=$brand_list selected=$goods.brand_id}</select>
{if $is_add}
<a href="javascript:void(0)" title="{$lang.rapid_add_brand}" onclick="rapidBrandAdd()" class="special" >{$lang.rapid_add_brand}</a>
<span id="brand_add" style="display:none;">
<input class="text" size="15" name="addedBrandName" />
<a href="javascript:void(0)" onclick="addBrand()" class="special" >{$lang.button_submit}</a>
<a href="javascript:void(0)" onclick="return goBrandPage()" title="{$lang.brand_manage}" class="special" >{$lang.brand_manage}</a>
<a href="javascript:void(0)" onclick="hideBrandDiv()" title="{$lang.hide}" class="special" ><<</a>
</span>
{/if}
</td>
</tr>

将其修改为

<tr>
<td class="label">{$lang.lab_goods_brand}</td>
<td><select name="brand_id" data-placeholder="选择品牌" class="chosen-select" style="width:350px;" onchange="hideBrandDiv()" ><option value="0">{$lang.select_please}{html_options options=$brand_list selected=$goods.brand_id}</select>
<script type="text/javascript">
var config = {
'.chosen-select'           : {},
'.chosen-select-deselect'  : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width'     : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
{if $is_add}
<a href="javascript:void(0)" title="{$lang.rapid_add_brand}" onclick="rapidBrandAdd()" class="special" style="margin-top:-20px">{$lang.rapid_add_brand}</a>
<span id="brand_add" style="display:none;">
<input class="text" size="15" name="addedBrandName" style="border:1px solid #ccc;height:29px" />
<a href="javascript:void(0)" onclick="addBrand()" class="special" >{$lang.button_submit}</a>
<a href="javascript:void(0)" onclick="return goBrandPage()" title="{$lang.brand_manage}" class="special" >{$lang.brand_manage}</a>
<a href="javascript:void(0)" onclick="hideBrandDiv()" title="{$lang.hide}" class="special" ><<</a>
</span>
{/if}
</td>
</tr>

就这么简单即可实现我们想要的效果了！

附件已上传网盘，链接：http://share.weiyun.com/ca30c924d2977a94c7291ce48a148223 （密码：bHvd）