联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
基于layUI动态数据表格
类型:迅睿CMS 更新时间:2024-06-27 09:44:24

基于layUI动态数据表格。创建后台控制台数据统计。并添加分页以及查询

PS:这种写法就是典型的api接口,不会写接口的看完了就知道怎么去写接口,需要的可以收藏保存哦,制作不易需要的大大们稍微打赏一下,支持一下小弟,后面会放更多干货,您的支持就是我的动力,顺便推广一下我的火车头插件哈哈https://www.xunruicms.com/shop/app/529.html,需要的可以去插件商城下载,有问题随时找我,知无不言。

image

image

image


第一步:创建插件

创建插件必须的几个文件为

/dayrui/App/插件目录/Config/App.php

/dayrui/App/插件目录/Config/Version.php

可以先用开发者工具插件去创建一个应用控制器然后讲这两个文件加入进去,这样插件就创建完成

app.php代码
<?php

return [
    'type' => 'app',
    'name' => '学员信息统计',
    'icon' => 'fa fa-bar-chart-o (alias)',
    'author' => '琉惗', // 作者名字
];

Version.php代码
<?php

return [
    'id' => '399',
    'version' => '2.1.1',
    'license' => '',
    'updatetime' => '2020-02-17',
    'downtime' => '2020-02-17',
];

第二步,创建后台面板文件,具体操作方法请查看手册https://www.xunruicms.com/doc/719.html

第三步,在模版文件中使用layui创建表格,代码如下

<link rel="stylesheet" href="./static/layui/css/layui.css"  media="all">

<div class="col-md-6 column sortable" style="width: 100%;padding: 0 0 0 0" id="6-3">

    <div class="portlet portlet-sortable light bordered">
        <div style="border-bottom: 0px solid #eef1f5;" class="portlet-title tabbable-line">
            <div class="caption">
                <i class="fa fa-bar-chart-o (alias)"></i>
                <span class="caption-subject">学生数据统计</span>
            </div>
        </div>
        <div class="portlet-body">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">总数据</li>
                    <li>客户统计</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="test"></table>
                    </div>
                    <div class="layui-tab-item">
                        <div class="demoTable">
                            客户名称:
                            <div class="layui-inline layui-form">
                                <select name="name" id="name">
                                    <option value=""></option>
                                    {linkage code=client}
                                        <option value="{$t.ii}">{$t.name}</option>
                                    {/linkage}
                                </select>
                            </div>
                            <button class="layui-btn" data-type="reload">搜索</button>
                        </div>
                        <table id="client"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./static/layui/layui.js" charset="utf-8"></script>

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

        table.render({
            elem: '#test'
            ,url:'{dr_url("Statistics/home/statistic")}'
            ,cols: [[
                {field:'total', title: '总报名人数', align:'center', sort: true}
                ,{field:'day', title: '每日人数', align:'center', sort: true}
                ,{field:'enroll', title: '已录取人数', align:'center', sort: true}
                ,{field:'enroll_no', title: '未录取人数', align:'center', sort: true}
            ]]
        });

        table.render({
            elem: '#client'
            ,url: '{dr_url('Statistics/home/client')}' //数据接口
            ,page: true //开启分页
            ,cols: [
                [ //表头
                    {field: 'name', title: '客户姓名', rowspan: 2, align: 'center', fixed: 'center'}
                    ,{field: 'day', title: '每日人数', rowspan: 2, align: 'center', fixed: 'center'}
                    ,{field: 'enter', title: '总报名人数', rowspan: 2, align: 'center', fixed: 'center'}
                    ,{ title: '学校信息', colspan: 3, align: 'center', fixed: 'center'}
                    ,{ title: '录取状态', colspan: 2, align: 'center', fixed: 'center'}
                    ,{ title: '学籍状态', colspan: 3, align: 'center', fixed: 'center'}
                ]
                ,[

                    {field: 'school', title: '学校名称', align: 'center', fixed: 'center'}
                    ,{field: 'undergraduate', title: '专科', align: 'center', fixed: 'center'}
                    ,{field: 'specialist', title: '本科', align: 'center', fixed: 'center'}
                    ,{field: 'enroll', title: '已录取', align: 'center', fixed: 'center'}
                    ,{field: 'noenroll', title: '未录取', align: 'center', fixed: 'center'}
                    ,{field: 'inschool', title: '在校人数', align: 'center', fixed: 'center'}
                    ,{field: 'graduate', title: '毕业人数', align: 'center', fixed: 'center'}
                    ,{field: 'outschool', title: '退学人数', align: 'center', fixed: 'center'}
                ]
            ]
            ,id: 'clientReload'
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#name');

                //执行重载
                table.reload('clientReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            name: demoReload.val()
                        }
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

第四步,写后台逻辑代码,并将数据进行返回

public function statistic() {
        $data = \Phpcmf\Service::M()->db->table(SITE_ID.'_student')
            ->select('inputtime,enroll')
            ->get()->getResultArray();

        $total = count($data);

        $day = count(\Phpcmf\Service::M()->db->table(SITE_ID.'_student')
            ->select('inputtime,enroll')
            ->where('DATEDIFF(from_unixtime(inputtime),now())=0')
            ->get()->getResultArray());

        $enroll = count(\Phpcmf\Service::M()->db->table(SITE_ID.'_student')
            ->select('enroll')
            ->where('enroll', 1)
            ->get()->getResultArray());

        $enroll_no = count(\Phpcmf\Service::M()->db->table(SITE_ID.'_student')
            ->select('enroll')
            ->where('enroll', 0)
            ->get()->getResultArray());

        return json_encode([
            'code' => 0,
            'msg' => '',
            'count' => $total,
            'data' => [
                    [
                    'total' => $total,
                    'day' => $day,
                    'enroll' => $enroll,
                    'enroll_no' => $enroll_no
                ]
            ]
        ]);
    }

    public function client() {
	    $page = $this->request->getGet('page');
	    $size = $this->request->getGet('limit');
	    $keyword = $this->request->getGet('key');
	    if(empty($keyword['name'])) {
           $where = '';
            $total = count(\Phpcmf\Service::M()->db->query('SELECT a.id as clientid, a.name as clientname, b.id as schoolid, b.name as schoolname, b.childids as schoolchildids, b.class as schoolclass FROM info_linkage_data_5 a INNER JOIN info_linkage_data_3 b ON b.pid = 0')->getResultArray());
        }else{
            $where = ' AND a.id = '.$keyword['name'];
            $total = count(\Phpcmf\Service::M()->db->query('SELECT a.id as clientid, a.name as clientname, b.id as schoolid, b.name as schoolname, b.childids as schoolchildids, b.class as schoolclass FROM info_linkage_data_5 a INNER JOIN info_linkage_data_3 b ON b.pid = 0'.$where)->getResultArray());
        }

	    $up = ($page-1)*$size;

        $array_info = \Phpcmf\Service::M()->db->query('SELECT a.id as clientid, a.name as clientname, b.id as schoolid, b.name as schoolname, b.childids as schoolchildids, b.class as schoolclass FROM info_linkage_data_5 a INNER JOIN info_linkage_data_3 b ON b.pid = 0'.$where.' ORDER BY clientid asc,b.displayorder ASC limit '.$up.','.$size.'')->getResultArray();

        foreach($array_info as $key => $arr_in) {
            $data[$key]['school'] = $arr_in['schoolname'];
            $data[$key]['name'] = $arr_in['clientname'];

            $data[$key]['enter'] = count(\Phpcmf\Service::M()->db->table(SITE_ID . '_student')
                ->select('client')
                ->where('client', $arr_in['clientid'])
                ->where('school in ('.$arr_in['schoolchildids'].')')
                ->get()->getResultArray());

            $data[$key]['day'] = count(\Phpcmf\Service::M()->db->table(SITE_ID.'_student')
                ->select('inputtime')
                ->where('client', $arr_in['clientid'])
                ->where('school in ('.$arr_in['schoolchildids'].')')
                ->where('DATEDIFF(from_unixtime(inputtime),now())=0')
                ->get()->getResultArray());

            $data[$key]['inschool'] = count(\Phpcmf\Service::M()->db->table(SITE_ID . '_student')
                ->select('client')
                ->where('client', $arr_in['clientid'])
                ->where('school in ('.$arr_in['schoolchildids'].')')
                ->where('inschool', 0)
                ->get()->getResultArray());

            $data[$key]['outschool'] = count(\Phpcmf\Service::M()->db->table(SITE_ID . '_student')
                ->select('client')
                ->where('client', $arr_in['clientid'])
                ->where('school in ('.$arr_in['schoolchildids'].')')
                ->where('inschool', 2)
                ->get()->getResultArray());

            $data[$key]['graduate'] = count(\Phpcmf\Service::M()->db->table(SITE_ID . '_student')
                ->select('client')
                ->where('client', $arr_in['clientid'])
                ->where('school in ('.$arr_in['schoolchildids'].')')
                ->where('inschool', 1)
                ->get()->getResultArray());

            $data[$key]['specialist'] = count(\Phpcmf\Service::M()->db->query('SELECT a.id,b.name,b.class FROM info_'.SITE_ID.'_student a INNER JOIN info_linkage_data_3 b ON a.client = '.$arr_in['clientid'].' AND a.school = b.id AND a.school IN ('.$arr_in['schoolchildids'].') AND b.class = 2')->getResultArray());

            $data[$key]['undergraduate'] = count(\Phpcmf\Service::M()->db->query('SELECT a.id,b.name,b.class FROM info_'.SITE_ID.'_student a INNER JOIN info_linkage_data_3 b ON a.client = '.$arr_in['clientid'].' AND a.school = b.id AND a.school IN ('.$arr_in['schoolchildids'].') AND b.class = 1')->getResultArray());

            $data[$key]['enroll'] = count(\Phpcmf\Service::M()->db->table(SITE_ID . '_student')
                ->select('client')
                ->where('client', $arr_in['clientid'])
                ->where('school in ('.$arr_in['schoolchildids'].')')
                ->where('enroll', 1)
                ->get()->getResultArray());

            $data[$key]['noenroll'] = count(\Phpcmf\Service::M()->db->table(SITE_ID . '_student')
                ->select('client')
                ->where('client', $arr_in['clientid'])
                ->where('school in ('.$arr_in['schoolchildids'].')')
                ->where('enroll', 0)
                ->get()->getResultArray());
        }


        return json_encode([
            'code' => 0,
            'msg' => '',
            'count' => $total,
            'data' => $data
        ]);
    }

PS:具体接口数据格式如下图所示,是一个二维数组转化成的json数据

image

image

回帖
  • 琉惗
    #1楼    琉惗
    2020-02-26 02:28:29
    Chrome 0
    • 火车头采集器

      火车头采集器,即装即用,支持所有模块,多文件采集,默认news模块,可以发布独立模块以及...

    推广一下个人火车头采集插件,多模块,多文件,随机用户发布,支持本地以及七牛云等远程附件上传,开箱即用,需要的可以关注一下
  • 繁星
    #2楼    繁星
    2020-02-26 23:17:23
    Chrome 0
    牛逼!!!
  • 昱宇
    #3楼    昱宇
    2020-02-27 09:28:08
    Chrome 0
    好东东
  • 黄老邪
    #4楼    黄老邪
    2020-02-28 12:55:32
    Chrome 0
    学习下下
  • yunshui2011
    #5楼    yunshui2011
    2020-03-04 11:38:53
    Chrome 0
    可以先用开发者工具插件去创建一个应用控制器然后讲这两个文件加入进去,这样插件就创建完成
  • 清萌网络科技
    #6楼    清萌网络科技
    2020-03-12 00:12:28
    Firefox 73.0 0
    本部分内容设定了隐藏,需要回复后才能看到,立即回复
  • 过把瘾
    #7楼    过把瘾
    2020-03-12 10:04:17
    Chrome 0
    学习下下
  • perweb
    #8楼    perweb
    2020-10-13 19:47:49
    Chrome 0
    学习下
  • 猴子哥哥
    #9楼    猴子哥哥
    2020-12-13 10:11:19
    Chrome 0
    学习学习
  • 飞鱼
    #10楼    飞鱼
    2020-12-15 15:42:03
    Chrome 0
    正需要,学习下!
  • phyge
    #11楼    phyge
    2020-12-19 13:55:24
    Chrome 0
    本部分内容设定了隐藏,需要回复后才能看到,立即回复
  • 越王
    #12楼    越王
    2020-12-22 19:32:19
    Chrome 0
    牛逼111
  • 吃不痴
    #13楼    吃不痴
    2021-03-11 23:14:38
    Chrome 0
    学习一下
  • 18716408881
    #14楼    18716408881
    2021-03-14 21:26:01
    Chrome 0
    学习一下
  • demo1452
    #15楼    demo1452
    2021-03-15 09:24:35
    Chrome 0
    yunshui2011 施舍
  • 早熟的土豆
    #16楼    早熟的土豆
    2021-06-23 10:25:36
    Chrome 0
    学习学习
  • wz19901213
    #17楼    wz19901213
    2021-08-30 16:38:21
    Chrome 0
    学习下
  • whyanhuang
    #18楼    whyanhuang
    2021-08-30 16:46:47
    Chrome 0
    看看
  • whyanhuang
    #19楼    whyanhuang
    2021-08-30 16:49:02
    Chrome 0
    打赏按钮点开还是帖子链接 无法打赏查看内容是什么原因?
  • wz19901213
    #20楼    wz19901213
    2021-08-31 15:04:55
    Chrome 0
    打赏了 怎么看不到内容 是有金额要求?
  • wz19901213
    #21楼    wz19901213
    2021-08-31 15:05:37
    Chrome 0
    wz19901213 重新回复了 可以了 之前刷新了 几次都不行
  • 萧歌
    #22楼    萧歌
    2021-09-23 19:48:09
    Chrome 0
    学习下
  • 没熟的土豆
    #23楼    没熟的土豆
    2021-10-24 21:30:13
    Chrome 0
    重新回复了 可以了 之前刷新了 几次都不行
  • 贰壹网络
    #24楼    贰壹网络
    2021-10-24 21:46:56
    Chrome 0
    学习了
  • 没熟的土豆
    #25楼    没熟的土豆
    2021-10-25 16:11:16
    Chrome 0
    请问后台逻辑代码 放在哪个文件中呢
  • Rambo
    #26楼    Rambo
    2021-10-29 10:09:13
    Chrome 0
    学习一下
  • tuijiangua
    #27楼    tuijiangua
    2021-12-12 18:08:51
    Edge 0
    学习学习
  • 云南昆明贰壹网络
    #28楼    云南昆明贰壹网络
    2021-12-14 10:39:34
    Chrome 0
    学习学习
  • thspan
    #29楼    thspan
    2022-02-16 16:44:17
    Chrome 0
    学习一下学习一下
  • 芝麻通
    #30楼    芝麻通
    2022-04-13 07:30:26
    Chrome 0
    • 学习一下

  • 芝麻通
    #31楼    芝麻通
    2022-04-13 07:31:01
    Chrome 0
    琉惗
    • 学习一下

  • karas
    #32楼    karas
    2022-04-15 11:09:47
    Chrome 0
    学习一下学习一下
  • 1239
    #33楼    1239
    2022-06-18 23:40:45
    Chrome 0
    学习一下
  • 1239
    #34楼    1239
    2022-06-29 02:47:20
    Chrome 0
    学习
  • 1239
    #35楼    1239
    2022-06-29 02:48:35
    Chrome 0
    学习一下
  • 白帽优化网
    #36楼    白帽优化网
    2022-07-12 15:48:50
    Edge 0
    学习一下
  • 1002054290
    #37楼    1002054290
    2022-07-17 11:07:49
    华为手机 0
    学习学习下
  • 1002054290
    #38楼    1002054290
    2022-07-17 11:08:25
    华为手机 0
    好东西好东西
  • 陈德显
    #39楼    陈德显
    2022-10-26 14:09:35
    Chrome 0
    学习学习学习
  • IT-老男孩
    #40楼    IT-老男孩
    2022-10-27 18:53:18
    Firefox 106.0 0
    向大神学习
  • zealens
    #41楼    zealens
    2023-01-12 12:13:20
    Chrome 0
    不错,牛啊,学习了
  • 东莞誉百网站建设
    #42楼    东莞誉百网站建设
    2023-01-12 15:24:28
    Chrome 0
    在模版文件中使用layui创建表格,代码如下
  • q125449096
    #43楼    q125449096
    2023-02-01 10:45:36
    Chrome 0
    学习一下学习一下
  • 血剑弑神
    #44楼    血剑弑神
    2023-02-16 13:09:22
    Chrome 0
    学习一下学习一下
  • 胡银萍
    #45楼    胡银萍
    2023-02-16 14:49:50
    Chrome 0
    学习一下学习一下
  • 蓝色悠郁
    #46楼    蓝色悠郁
    2023-02-18 08:43:18
    Chrome 0
    向大神学习 😆
  • slq17
    #47楼    slq17
    2023-02-18 10:33:16
    Chrome 0
    向大神学习~向大神学习
  • 无
    #48楼    无
    2023-03-27 16:31:30
    Chrome 0
    学习一下学习一下
  • PHP学生
    #49楼    PHP学生
    2023-03-27 21:51:46
    Chrome 0
    好东西学习一下
  • criminalist
    #50楼    criminalist
    2023-04-06 02:47:50
    Chrome 0
    好东西学习一下
  • 半城烟沙
    #51楼    半城烟沙
    2023-04-09 23:19:01
    Chrome 0
    学习下后台自定义模块怎么写 😁
  • 张先生
    #52楼    张先生
    2023-10-09 16:06:20
    Chrome 0
    学习一下 学习一下
  • henna
    #53楼    henna
    2023-10-14 18:01:20
    安卓手机 0
    学习一下,希望有用
  • 123968838
    #54楼    123968838
    2023-11-01 18:22:47
    Chrome 0
    好东西学习一下
  • henna
    #55楼    henna
    2023-11-15 14:58:38
    安卓手机 0
    分页代码怎么写的
  • 易模板
    #56楼    易模板
    2023-11-23 02:58:40
    Edge 0
    学习学习一下
  • 小昕
    #57楼    小昕
    2023-11-23 17:19:39
    Chrome 0
    11111fOK学习地要无可奈何
  • 张百胜
    #58楼    张百胜
    2024-02-27 10:45:27
    Chrome 0
    好东西学习一下
  • 微信20329916
    #59楼    微信20329916
    2024-03-01 16:35:06
    Chrome 0
    好东西学习一下
  • 学习狂人
    #60楼    学习狂人
    2024-04-05 23:25:46
    Chrome 0
    学习一下学习一下
  • 学习狂人
    #61楼    学习狂人
    2024-06-27 09:44:24
    华为手机 0
    学习,感谢分享