select-2 插件使用(个人总结简易使用)

首先看看index页面,可通用

{extend name="layout" /}

{block name="plugins-css"}
<link href="__LIBS__/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css" />
<link href="__LIBS__/select2/select2.min.css" rel="stylesheet" type="text/css" />
{/block}

{block name="content"}
     {notempty name="page_tips"}
    <div class="alert alert-{$tips_type} alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <p>{$page_tips}</p>
    </div>
    {/notempty}
    <div class="row">
        <div class="col-md-12">
            <div class="block">
                {notempty name="tab_nav"}
                <ul class="nav nav-tabs">
                    {volist name="tab_nav['tab_list']" id="tab"}
                    <li {eq name="tab_nav.curr_tab" value="$key"}class="active"{/eq}>
                    <a href="{$tab.url}{$_pop ?= '?_pop=1'}">{$tab.title|htmlspecialchars}</a>
                    </li>
                    {/volist}
                    <li class="pull-right">
                        <ul class="block-options push-10-t push-10-r">
                            <li>
                                <button type="button" data-toggle="block-option" data-action="refresh_toggle" data-action-mode="demo"><i class="si si-refresh"></i></button>
                            </li>
                            <li>
                                <button type="button" data-toggle="block-option" data-action="fullscreen_toggle"></button>
                            </li>
                        </ul>
                    </li>
                </ul>
                {else/}
                {empty name="_pop"}
                <div class="block-header bg-gray-lighter">
                    <ul class="block-options">
                        <li>
                            <button type="button" data-toggle="block-option" data-action="refresh_toggle" data-action-mode="demo"><i class="si si-refresh"></i></button>
                        </li>
                        <li>
                            <button type="button" data-toggle="block-option" data-action="fullscreen_toggle"></button>
                        </li>
                    </ul>
                    <h3 class="block-title">{$page_title|default=""|htmlspecialchars}</h3>
                </div>
                {/empty}
                {/notempty}
                <div class="block-content tab-content">
                    <div class="tab-pane active">
                        {// 顶部筛选及搜索 }
                        {$extra_html_toolbar_top|default=''}
                        <div class="row data-table-toolbar">
                            <div class="col-sm-12">
                                {// 搜索框 }
                                {notempty name="search"}
                                <div class="pull-right search-bar">
                                    <input type="hidden" name="search_field" id="search-field" value="{php}echo input('param.search_field', '') == '' ? $search['field_all'] : input('param.search_field');{/php}">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <button class="btn btn-default" id="search-btn" data-toggle="dropdown" type="button" aria-expanded="false">
                                                搜索 <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a tabindex="-1" href="javascript:void(0)" data-field="{$search.field_all}">搜索</a>
                                                </li>
                                                {volist name="search.fields" id="field"}
                                                <li>
                                                    <a tabindex="-1" href="javascript:void(0)" data-field="{$key}">{$field|htmlspecialchars}</a>
                                                </li>
                                                {/volist}
                                            </ul>
                                        </div>
                                        <input type="text" class="form-control" value="{:input('param.keyword', '')}" data-url="{$search.url}" id="search-input" name="keyword" placeholder="{$search.placeholder}">
                                    </div>
                                </div>
                                {/notempty}

                                {// 顶部按钮 }
                                <div class="toolbar-btn-action">
                                    {if (!empty($top_buttons))}
                                        {volist name="top_buttons" id="button"}
                                            {$button}
                                        {/volist}
                                    {/if}

                                    {// 下拉菜单}
                                    {notempty name="_select_list"}
                                    <div class="form-inline" style="display: inline-block;">
                                        {volist name="_select_list" id="item"}
                                        <select class="form-control select-change select-search" id="select-{$item.name}">
                                            {notempty name="item.title"}
                                            <option value="" data-url="{$item.default_url}">{$item.title|default=''}</option>
                                            {/notempty}
                                            {volist name="item['options']" id="option"}
                                            <option value="{$key}" {php}if($item['current'] != '' && $item['current'] == $key){echo 'selected';}{/php}
                                            {php}if(is_array($item['url'])):{/php}
                                            data-url='{$item['url'][$key]}'
                                            {php}endif;{/php}
                                            >{$option}</option>
                                            {/volist}
                                        </select>
                                        {/volist}
                                    </div>
                                    {/notempty}
                                     <div class="form-inline" style="display: inline-block;">
										<select class="js-select2 form-control" id="mall_id" name="mall_id" data-allow-clear="true" data-placeholder="请选择归属卖场" style="width: 248px;" >
                    					 {if condition="input('get.mall_id')"}
                                        <option value="{:input('get.mall_id')}" selected>{:input('get.mall_name')}</option>
                                         {/if}
                    					</select>
                    				 </div>

                                    {// 时间段搜索}
                                    {notempty name="_filter_time"}
                                    <div class="form-inline time-filter">
                                        <div class="time-filter">
                                            <div class="input-daterange input-group" data-date-format="yyyy-mm-dd">
                                                <input class="form-control" type="text" id="_filter_time_from" name="_filter_time_from" value="{$Request.get._filter_time_from ? $Request.get._filter_time_from : $_filter_time.date_start}" placeholder="{$_filter_time.tips_start}">
                                                <span class="input-group-addon"><i class="fa fa-chevron-right"></i></span>
                                                <input class="form-control" type="text" id="_filter_time_to" name="_filter_time_to" value="{$Request.get._filter_time_to ? $Request.get._filter_time_to : $_filter_time.date_end}" placeholder="{$_filter_time.tips_end}">
                                            </div>
                                            <input type="hidden" id="_filter_time" name="_filter_time" value="{$_filter_time.field}">
                                            <button type="button" id="btn-filter-time" class="btn btn-default">确定</button>
                                        </div>
                                    </div>
                                    {/notempty}
                                </div>
                            </div>
                        </div>
                        {$extra_html_toolbar_bottom|default=''}
                        <div class="table-responsive">
                            {$extra_html_table_top|default=''}
                            <table class="table table-builder table-hover table-bordered table-striped js-table-checkable">
                                <thead>
                                    <tr>
                                        {if (!$hide_checkbox)}
                                        <th class="text-center">
                                            <label class="css-input css-checkbox css-checkbox-primary remove-margin-t remove-margin-b">
                                                <input type="checkbox" id="check-all"><span></span>
                                            </label>
                                        </th>
                                        {/if}

                                        {volist name="columns" id="column"}
                                        <th class="column-{$column['name']} {$column.class|default=''}">
                                            <span class="pull-right">
                                            {// 排序功能}
                                            {php}if (isset($order_columns[$column['name']])): {/php}
                                                {php}
                                                    $_by = input('param._by') == 'asc' ? 'desc' : 'asc';
                                                    $_param = array_merge(input('get.'), ['_by' => $_by, '_order' => $order_columns[$column['name']]]);
                                                    if ($_param) {
                                                        $_get = [];
                                                        foreach ($_param as $key => $value) {
                                                            $_get[] = $key. '=' .$value;
                                                        }
                                                        $_get = '?'.implode('&', $_get);
                                                    }
                                                {/php}
                                                <a href="{$Request.baseUrl}{$_get}" data-toggle="tooltip" data-original-title="排序">
                                                    {php}
                                                        if (input('param._order') == $order_columns[$column['name']]) {
                                                            echo input('param._by') == 'asc' ? '<i class="fa fa-caret-up"></i>' : '<i class="fa fa-caret-down"></i>';
                                                        } else {
                                                            echo '<i class="fa fa-sort text-muted"></i>';
                                                        }
                                                    {/php}
                                                </a>
                                            {php}endif;{/php}

                                            {// 筛选功能}
                                            {php}if (isset($filter_columns[$column['name']])): {/php}
                                            {php}
                                                if (!empty(request()->param('_field_display'))) {
                                                    $_field_display = request()->param('_field_display');
                                                }
                                            {/php}
                                            <a href="javascript:void(0);" class="field-filter" data-filter="{$filter_columns[$column['name']]['filter']}" data-list="{$filter_columns[$column['name']]['list']}" data-type="{$filter_columns[$column['name']]['type']}" data-options='{$filter_columns[$column["name"]]["options"]|default=""}' data-map='{$filter_columns[$column["name"]]["map"]|default=""}' data-field-display="{$column['name']}" data-field="{$filter_columns[$column['name']]['field']}" data-table="{$filter_columns[$column['name']]['table']}" data-toggle="tooltip" data-original-title="筛选"><i class="fa fa-filter {notin name='column.name' value='$_field_display'}text-muted{/notin}"></i></a>
                                            {php}endif;{/php}
                                            </span>

                                            {// 字段标题}
                                            {$column.title|default=''|htmlspecialchars}
                                        </th>
                                        {/volist}
                                    </tr>
                                </thead>
                                <tbody>
                                    {volist name="row_list" id="row"}
                                    <tr class="{$row['_tr_class']|default=''}">
                                        {if (!$hide_checkbox)}
                                        <td class="text-center">
                                            <label class="css-input css-checkbox css-checkbox-primary">
                                                <input class="ids" type="checkbox" name="ids[]" value="{$row['_primary_key_value']|default='123'}"><span></span>
                                            </label>
                                        </td>
                                        {/if}

                                        {volist name="columns" id="column"}
                                        <td class="{$column['class']|default=''}">
                                            {$row[$column['name']]|default=''}
                                        </td>
                                        {/volist}
                                    </tr>
                                    {/volist}

                                    {empty name="row_list"}
                                    <tr class="table-empty">
                                        {php}$colspan = count($columns)+1{/php}
                                        <td class="text-center empty-info" colspan="{$colspan}">
                                            <i class="fa fa-database"></i> 暂无数据<br>
                                        </td>
                                    </tr>
                                    {/empty}
                                </tbody>
                            </table>
                            {$extra_html_table_bottom|default=''}
                        </div>
                        <div class="data-table-toolbar">
                            <div class="row">
                                <div class="col-sm-12">
                                    {// 分页 }
                                    {notempty name="pages"}
                                        {$pages}
                                    {/notempty}
                                    {notempty name="_page_info"}
                                    <div class="pagination-info pull-right">
                                        <div>
                                            <input type="text" class="form-control input-sm go-page" id="go-page" name="page" value="{:input('param.page', '1')}">
                                            <input type="text" class="form-control input-sm nums" id="list-rows" name="list_rows" value="{php}echo input('param.list_rows', '') == '' ? config('list_rows') : input('param.list_rows');{/php}">
                                            / <strong>{$_page_info->lastPage()}</strong> 页,共 <strong>{$_page_info->total()}</strong> 条数据,每页显示数量
                                        </div>
                                    </div>
                                    {/notempty}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{/block}

{block name="script"}

<script src="__LIBS__/select2/select2.full.min.js"></script> 

<script> 
         $(function () {
	    //远程筛选
	    $("#mall_id").select2({
	    	ajax: {
	            url: "{:url('admin/activityshop/inputcheck')}",
	            dataType: 'json',
	            delay: 250,
	            data: function (params) {
	                return {
	                    q: params.term, // search term
	                    pagesize: 10,//页面大小
	                    page: params.page//当前页
	                };
	            },
	            processResults: function (data, params) {
	                params.page = params.page || 1;
	                return {
	                    results: data.list,
	                    pagination: {
	                        more: (params.page * 10) < data.total_count
	                    }
	                };
	            },
	            cache: true
	        },
	        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
	        minimumInputLength: 0,
	    
	    });
	    $("#mall_id").on("select2:select",function(e){
	    	
	    	window.location.href="{:url('admin/activityshop/index')}"+"?mall_id="+e.params.data.id+"&mall_name="+e.params.data.text;
	    })
	   // 选中事件
	});
</script>

{/block}

根据index页面,我们只需要关注一个地方

<script> 
         $(function () {
	    //远程筛选
	    $("#mall_id").select2({
	    	ajax: {
	            url: "{:url('admin/activityshop/inputcheck')}",
	            dataType: 'json',
	            delay: 250,
	            data: function (params) {
	                return {
	                    q: params.term, // search term
	                    pagesize: 10,//页面大小
	                    page: params.page//当前页
	                };
	            },
	            processResults: function (data, params) {
	                params.page = params.page || 1;
	                return {
	                    results: data.list,
	                    pagination: {
	                        more: (params.page * 10) < data.total_count
	                    }
	                };
	            },
	            cache: true
	        },
	        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
	        minimumInputLength: 0,
	    
	    });
	    $("#mall_id").on("select2:select",function(e){
	    	
	    	window.location.href="{:url('admin/activityshop/index')}"+"?mall_id="+e.params.data.id+"&mall_name="+e.params.data.text;
	    })
	   // 选中事件
	});
</script>

我们只需要更改上面代码的ajax的路径为自己的就可以了,还有点击后的跳转页面的href的值
核心部分还是我们在后端的处理程序

后端的代码如下:

 /**
     * 输入值查询的ajax
     * @return \think\response\Json
     */
    public function inputCheck(){
        if($this->request->isAjax()){
            $check = trim( input('q','','htmlspecialchars') );
            $list   = Db::name('activity')->where('act_name','like','%'.$check.'%')->field('act_name,act_id')->paginate(10);
            $_list  = array();
            foreach( $list as $r ){
                $row['id']   = $r['act_id'];
                $row['text'] = "[{$r['act_id']}]".$r['act_name'];
                $_list[] = $row;
            }
            $arr['total_count'] = $list->total();
            $arr['list'] = $_list;
            return json($arr);
        }else{
            $this->error('连接方式出错!');
        }
    }

里面的查询用自己的即可,页面效果如下
在这里插入图片描述

如果需要默认值的话,就需要注意这个页面的路径url
在这里插入图片描述

这样的话你只需要在需要默认值的页面给他传递mall_name的这个参数即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值