引入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); }