layui实现动态和静态分页_甘肃明星软件开发有限公司

layui实现动态和静态分页

网络 2018-05-18 1334

开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们的压力．

今天我们先来学习一下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能，这个静态分页同样适用在信息类网站,我的工作开发环境是debian桌面版，所以所有的实验也是在debian基础上测试

layui动态数据表

动态数据表的效果图

实现过程

业务逻辑我都写到注释里面了，这样大家也友好一些，避免一会看代码，一会看说明容易分神

前端代码：

head.phtml（头文件代码）

<!DOCTYPE html>

<html>

<head>

</head>

order_orderlist.phtml（主体业务代码）

100

101

102

103

104

105

106

107

108

<?php $this->import("head"); ?>

<blockquote class="layui-elem-quote">注意:为保障访问速度,查询同时请配合时间范围,默认显示一天以内的记录</blockquote>

<br/>

</div>

</div>

</div>

</div>

</div>

</div>

// 加载需要用到的模块，如果有使用到自定义模块也在此加载

layui.use(['laydate','form','table'], function(){

// 初始化元素，如果有大量的元素操作可以也引入和初始化element模块

var table = layui.table;

var form = layui.form;

var laydate = layui.laydate;

var $ = layui.$;

// 定义时间选择器

laydate.render({

elem:'#test5',

type:'datetime'

});

laydate.render({

elem:'#test6',

type:'datetime'

});

// 动态数据表渲染

table.render({

elem: '#test' /* 绑定表格容器id */

,url:'index.php?c=orders&a=orderList' /* 获取数据的后端API URL */

,where:{getlist:'orderlist'} /* 这里还可以额外的传参到后端 */

,method: 'post' /* 使用什么协议，默认的是GET */

,cellMinWidth: 60 /* 最小单元格宽度 */

,cols: [[

{field:'orderno', title: '订单号',align: 'center',sort:true}

,{field:'username', title: '商户号',align: 'center'}

,{field:'user_orderno', title: '商户订单号',align: 'center'}

,{field:'trace_time', title: '创建时间',align: 'center',sort:true,width:200}

,{field:'price', title: '交易金额',align: 'center',sort:true}

,{field:'fee', title: '手续费',align: 'center',sort:true,width:80}

,{field:'real_price', title: '结算金额',align: 'center',sort:true}

,{field:'pay_type', title: '支付类型', align: 'center'}

,{field:'pay_status', title: '订单状态',align: 'center',width:90}

,{field:'pay_time', title: '支付时间',align: 'center',sort:true,width:200}

,{field:'push_nums', title: '通知次数',align: 'center',width:90}

,{field:'notice_result', title: '通知支付结果',align: 'center'}

]] // 使用sort将自动为我们添加排序事件，完全不用人工干预

,page: true

,limit:10

,id:'testReload' // 这里就是重载的id

});

// 数据表重载，这个是配合上面的表格一起使用的

var active = {

reload:function(){

table.reload('testReload',{

　　 // 点击查询和刷新数据表会把以下参数传到后端进行查找和分页显示

where:{

merchant_no:$("input[name='merchant_no']").val(),

order_no: $("input[name='order_no']").val(),

start_time:$("input[name='start_time']").val(),

end_time:$("input[name='end_time']").val()

}

});

}

};

form.render(); // 渲染表单

// 查找点击时间，这里的事件绑定建议使用on来绑定,因为元素都是后期渲染过的

$("#fuck-btn").click(function(){

var type = $(this).data('type');

active[type] ? active[type].call(this) : '';

});

$("#reloadtable").click(function(){

active.reload();

});

$("#reloadpage").click(function(){

location.reload();

});

</script>

</body>

</html>

后端php代码

order.php(订单控制器,部分业务代码不用太深究）

// 订单列表

public function orderList()

{

// 动态渲染前台表格

$operating = $this->request->getPost('getlist', 'trim');

// 首次这里不会执行，数据表开始渲染的时候才会请求以下部分

if ('orderlist' === $operating) {

// 进行分页查询

$page = $this->request->getPost('page', 'intval', 1);

$limit = $this->request->getPost('limit', 'intval', 10);

$start = ($page - 1) * $limit;

// 如果有其他条件查询在这里可以带上

$merchant_no = $this->request->getPost('merchant_no', 'trim', '');

$order_no = $this->request->getPost('order_no', 'trim', '');

$start_time = $this->request->getPost('start_time', 'trim', date("Y-m-d H:i:s", strtotime("-1 day")));

$end_time = $this->request->getPost('end_time', 'trim', date("Y-m-d H:i:s"), time());

// 获取符合条件的记录数量

if($GLOBALS['SESSION']['admin_group_id'] >1){

$merchant_no = $GLOBALS['SESSION']['admin_username'];

}

$order_nums = orders::getItemNums($merchant_no, $order_no, $start_time, $end_time);

// 分页进行查询条件记录

$order_list = orders::getItem($merchant_no, $order_no, $start_time, $end_time, $start, $limit);

$datas = ['code' => 0, 'msg' => ''];

// 将总的记录条数传给前台进行渲染分页

$datas['count'] = $order_nums;

// 重新过滤一遍数据，很多没有用到的不能全部发给试图，尤其是动态渲染的，很容易暴露，建议加工一下再传

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

$order_list[$k]['orderno'] = $v['order_id'];

$order_list[$k]['user_orderno'] = $v['order_no'];

$order_list[$k]['username'] = $v['merchant_no'];

$order_list[$k]['pay_type'] = ($v['pay_type'] == 1) ? "支付宝扫码" : "微信扫码";

$order_list[$k]['pay_status'] = ($v['callback_status'] > 0) ? "已支付" : "未支付";

$order_list[$k]['pay_time'] = $v['callback_time'];

$order_list[$k]['notice_result'] = ($v['push_status'] > 0) ? "<span class=\"layui-badge layui-bg-blue\">已推送</span>" : "<span class=\"layui-badge layui-bg-gray\">未推送</span>";

}

// 将数据通过json格式响应给前台渲染

$datas['data'] = $order_list;

echo json_encode($datas);

safe_exit();

}

// 首次先现实模板页

self::$view->render('orders_orderlist');

}

数据格式请参照官方指导：

数据接口格式

表格模块：http://www.layui.com/doc/modules/table.html

调试的时候可以打开chrome,firefox 的 console 和 network进行查看，仔细研究分析

数据表工具条事件

工具栏是指在行单元格内可以操作对应的行，因为使用layui的元素监听，很容易就获取到相应对应整行的数据.

比如获取表单的数据,只需要监听表单提交事件，直接就可以一次获取到所有的参数和值：

layui.use(['form','jquery'],function(){

let form = layui.form,

$ = layui.$;

form.on('submit(fuck-submit)', function(data){

if(data.field.password && data.field.password.length < 5){

layer.msg('密码不能小于５位');

return false;

}

$.post('index.php?&a=adminEdit&op=update&uid='+data.field.uid,{

username:data.field.username,

password:data.field.password,

level:data.field.level,

is_enabled:data.field.is_enabled

}, function(responseText){

//console.log(responseText);

if(responseText.errno === 8){

layer.msg(responseText.errstr,{icon:6});

return false;

} else {

layer.msg(responseText.errstr,{icon:5});

location.reload();

}

},'json'

);

return false;

});

</script>

这里是官方文档的

form.on('submit(*)', function(data){

console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象

console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回

console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

});

我们今天要操作的数据表也是要采用这种方式，首先我们看看看怎样生成和渲染出工具条：

只需要在body部分插入一个容器,注意这里的javascript的type是text/html,这个是供layui解析用的，在这里的d也就是我们在渲染表格的时候的数据,所有的字段的值都可以在这个d里面获取到

</script>

分享到：

[返回顶部] [关闭窗口]

上一篇：js实现二级菜单点击显示当前内容效果

下一篇：JS实现的简单折叠展开动画效果示例

layui实现动态和静态分页

热门文章

随机文章