tp5与layui框架实现二级联动加分页效果

最终实现效果图

前台html代码

{layout name="common/header_footer" /}
<div class="admin-main">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">兑换信息管理</li>
        </ul>
    </div>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form action="{:url('index')}" class="layui-form" method="post">
                <div class="layui-inline">
                    <input class="layui-input" placeholder="开始日" name="startTime" {if isset($date_start_time_show) } value="{$date_start_time_show}" {/if} onclick="layui.laydate({elem: this, istime: true})">
                </div>
                <div class="layui-inline">
                    <input class="layui-input" placeholder="截止日" name="endTime" {if isset($date_end_time_show) } value="{$date_end_time_show}" {/if} onclick="layui.laydate({elem: this, festival: true})">
                </div>
                <div class="layui-input-inline">
                    <select name="mch_id" lay-filter="mch_id" lay-verify="required" lay-search="">
                        <option value="">请选择所属法人</option>
                        {volist name="mch_info" id="mch"}
                        <option {if isset($mch_info_id) && $mch_info_id == $mch.id} selected {/if} value="{$mch.id}">{$mch.name}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="store_id" lay-verify="" lay-search="">
                        <option value="">请选择所门店</option>
                        {if isset($store_info_id)}
                        {volist name="store_info_id" id="store_info"}
                        <option {if $data_store_id == $store_info.id} selected {/if} value="{$store_info.id}">{$store_info.username}</option>
                        {/volist}
                        {/if}
                    </select>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit >搜索</button>
                </div>
            </form>
        </div>

        <table class="layui-table">
            <thead>
            <tr>
                <th style="width:50px">序号</th>
                <th>门店</th>
                <th>兑换时间</th>
                <th>商品名称</th>
                <th>订单状态</th>
                <th>商品金额</th>
                <th>短信验证码</th>
            </tr>
            </thead>
            <tbody>
            {if isset($data)}
            {volist name="cards" id="card" key="k"}
            <tr>
                <td>{$k+($page-1)*10}</td>
                <td>{$card.store_name}</td>
                <td>{$card.create_time}</td>
                <td>{$card.goods_name}</td>
                <td>{if $card.order_state==1}成功{elseif $card.order_state==0}未知{else}失败{/if}</td>
                <td>{$card.card_total_fee}</td>
                <th>{$card.sms_code}</th>
            </tr>
            {/volist}
            {/if}
            </tbody>
        </table><br>
       //分页
       {if isset($data)}
        <div style="float: right;">
            <div id="page" class="page">
                {$cards->render()}
            </div>
        </div>
        {/if}
    </div>
</div>



<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
    });
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        //时间
        var form = layui.form()
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,$ = layui.jquery;

        //下拉框
        var form = layui.form();
        form.on('select(mch_id)', function(data) {
            var mch_id = data.value;
            $.ajax({
                type:"POST",
                url:"{:url('get_store')}",
                dataType:"json",
                data:{'mch_id':mch_id},
                success:function(e){
                    //empty() 方法从被选元素移除所有内容
                    $("select[name='store_id']").empty();
                    var html = "<option value='0'>请选择所属门店</option>";
                    $(e).each(function (v, k) {
                        html += "<option value='" + k.id + "'>" + k.username + "</option>";
                    });
                    //把遍历的数据放到select表里面
                    $("select[name='store_id']").append(html);
                    //从新刷新了一下下拉框
                    form.render('select');
                }
            })
        })
    });
</script>

扫描二维码关注公众号，回复： 1936743 查看本文章

后台控制器中的代码

 public function index()
    {
         //form表单是post提交，但是点击第二页是get提交，所以这里接收的时候不用get或post
         $data = input();
        //Array ( [startTime] => 2017-12-01 [endTime] => 2017-12-20 [mch_id] => 2 [store_id] => 79 )
        if (!empty($data)) {
            $page = request()->param('page');
            $page || $page = 1;
            //将发送过来的门店id发送回前台与再次查询出来的多个门店作比较是否相等
            $data_store_id = $data['store_id'];
           (
            $date_start_time = strtotime($data['startTime']);
            $date_end_time = strtotime($data['endTime']) + 86400;
           )

            $date_start_time = strtotime($data['startTime']." 0:0:0");
            $date_end_time = strtotime($data['endTime']." 23:59:59");

            $date_start_time_show = date("Y-m-d",$data_start_time);
            $date_end_time_show = date("Y-m-d",$data_end_time);
            $mch = new MchModel(); $store = new StoreModel(); 
            $store_info = $store->select(); $mch_info = $mch->select();
            //$mch_info_id返回到前台的作用是当点击搜索的时候保留选中的商户
           $mch_info_id = $mch->where('id',$data['mch_id'])->find();
           //$store_info_id返回到前台的作用是当点击搜索的时候保留选中的门店
           $store_info_id = $store->where('sub_mch_id',$data['mch_id'])->select();
           $yd_order = new YdOrderModel();
           $cards = $yd_order->where('store_id', $data['store_id'])
           ->whereTime('create_time', 'between', ["$date_start_time", "$date_end_time"]) 
           ->order('yd_order_id desc')
           ->paginate(10, false,['query' => $data]);
            foreach ($cards as $k=>$v){
               foreach ($store_info as $kk=>$vv){ 
                  if($v['store_id'] == $vv['id']){
                    $cards[$k]['store_name'] = $vv['username']; 
                  }
              } 
            }
          $this->assign([ 
          'cards' => $cards, 
          'mch_info' => $mch_info, 
          'mch_info_id' => $mch_info_id['id'],
          'store_info_id' => $store_info_id, 
          'data_store_id' => $data_store_id,
          'data' => $data, 'page' => $page, 
          'date_start_time_show' => $date_start_time_show, 
          'date_end_time_show' => $date_end_time_show ]);
         }else { 
              $mch = new MchModel();
              $mch_info = $mch->select();
              $this->assign([
                 'mch_info' => $mch_info
               ]);
             } 
          return $this->fetch();
        } 


         //ajax获取的门店 public function get_store(){
         $mch_id = input('post.mch_id'); 
         $store = new StoreModel(); 
         $store_info = $store->where('sub_mch_id',$mch_id)->select(); 
         echo json_encode($store_info);die; 
      }

where条件查询 (一维数组作为条件)

$mch_info=$mch->where('legal_person_id',$data['legal_person_id'])->select();

foreach($mch_info as $k=>$v){

$query_sub_mch_id[] = $v['sub_mch_id'];

}
order_info=$order->where('sub_mch_id','in',$query_sub_mch_id)->whereTime('create_time','between',[$date_start_time,$date_end_time] ->paginate('10',false,['query'=>$data]);

//tp5框架时间戳转换成时间
<td> {$activity.start_time|date="Y-m-d H:i:s",###} </td>

//框内的内容不可改变加 disableed="true"

//将字符串转化成数组

["p-H7SwQ8LtOgegUeKLzIcgN7VyI8","p-H7SwXaJj4Hx2FKTxvoHgillmF0","p-H7SwWc5VpMRXVep4ZKbOjvTDvI","p-H7SwZm2mefYj3Sg7ONirfVaBg8","p-H7SwWkJCRYwoOSF_u5C8kVZo_U"]

这是json格式所以第二种会很好

两种方法

一
        $upgrade_send_card_id_list_info= $activity_info['upgrade_send_card_id_list'];
        $upgrade_send_card_id_list_left = ltrim($upgrade_send_card_id_list_info,'[');
        $upgrade_send_card_id_list_right = rtrim($upgrade_send_card_id_list_left,']');
        $upgrade_send_card_id_list_data = explode(',',$upgrade_send_card_id_list_right);
        $upgrade_send_card_id_list=str_replace('"','', $upgrade_send_card_id_list_data);

二
        $demo = json_decode("$upgrade_send_card_id_list_info");

效果一样

tp5与layui框架实现二级联动加分页效果

猜你喜欢