EasyUi 数据表格使用

最新推荐文章于 2022-05-07 22:45:57 发布

转载最新推荐文章于 2022-05-07 22:45:57 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3483680/blog/1821558

文章标签：

#json #javascript #后端 #ViewUI

本文介绍如何使用EasyUI框架创建一个具有分页、排序及格式化功能的数据表格，并展示了前端和后端的具体实现代码。

引入CSS ：

<link rel="stylesheet" href="__ADMIN__/easy/themes/gray/easyui.css">

引入JS：

<script src="__ADMIN__/easy/jquery.min.js"></script>
<script src="__ADMIN__/easy/jquery.easyui.min.js"></script>
<script src="__ADMIN__/easy/locale/easyui-lang-zh_CN.js"></script>

Html:

<div id="box">

</div>

JS:

<script>
    $(function () {
        $("#box").datagrid({
            title: '用户列表', //表格面板
            url: '{:url("getJson")}', //服务器地址
            iconCls: 'fa fa-gear', //面板图标
            striped: true, //设置斑马线效果
            fitColumns: true, //自适应宽度
            rownumbers: true,//显示行号
            singleSelect: true,//只能选定一行
            showHeader: true, //显示行头
            columns: [[
                {
                    field: 'name',
                    title: '用户',
                    //width:200,  //设置列宽，不写默认自适应宽度
                    sortable: true, // 设置该列排序
                },
                {
                    field: 'phone',
                    title: '手机',
                    sortable: true,
                },
                {
                    field: 'time',
                    title: '注册时间',
                    sortable: true,
                },
                {
                    field: 'status',
                    title: '状态',
                    sortable: true,
                    formatter: function (value, row, index) {  //格式化行
                        return value == 0 ? '关闭' : '开启'
                    }
                }
            ]],
            pagination: true, //是否开启分页
            pageSize: 2, //每页显示多少数据
            pageList: [2, 15, 20, 25], //分页条
            pageNumber: 1, //默认显示第一页
            sortName: 'phone', //默认排序的列
            sortOrder: 'DESC' //默认排序规则
        });
    });
</script>

后端代码：

public function getJson()
{
    //page:1 当前页
    //rows:5 每页显示数量
    //sort:phone 排序字段
    //order:asc  排序规则

    $page = input('param.page');
    $rows = input('param.rows');

    $sort = input('param.sort');
    $orders = input('param.order');

    $order = "{$sort} {$orders}";


    $first = $rows*($page-1);


    $rows = Db::name('tables')->limit($first,$rows)->order($order)->select();
    $data = [
        "total"=>Db::name('tables')->count(),
        "rows"=>$rows
    ];
    return json($data);
}

转载于:https://my.oschina.net/u/3483680/blog/1821558