VFP与layui框架的亲密互动，mysql表格分页并不难
VFP与layui框架的亲密互动，mysql表格分页并不难
加菲猫的VFP
发布于 2024-02-27 08:14:47
发布于 2024-02-27 08:14:47
数据库：MYSQL
开发工具：VFP SP2 7423+祺佑三层开发框架（猫框）
首先打开账套设置，配置数据库连接
其次运行调试服务器
VFP后端代码编写，带分页功能
DEFINE CLASS ctl_devdata as Session
PROCEDURE getlist
DO setenv
cKSRQ=HttpQueryParams2("ksrq")
cJSRQ=HttpQueryParams2("jsrq")
ctj=HttpQueryParams2("tj")
cpageno=HttpQueryParams2("page")
cpagesize=HttpQueryParams2("limit")
cpagesize=IIF(EMPTY(cpagesize),"0",cpagesize)
IF !EMPTY(cKSRQ) AND !EMPTY(cJSRQ)
ELSE
ERROR "请输入日期"
ENDIF
TEXT TO lcSQLcmd NOSHOW TEXTMERGE
select COUNT(*) from devdata WHERE 1=1
ENDTEXT
cwhere=""
lcSQLcmd = lcSQLcmd + TEXTMERGE(" and ctime between '<<cKSRQ>>' and '<<cJSRQ>>' ")
IF !EMPTY(ctj)
lcSQLcmd = lcSQLcmd + TEXTMERGE(" and devsn like '%<<ctj>>%'")
ENDIF
oDBSQLhelper=NEWOBJECT("MSSQLHelper","MSSQLHelper.prg")
uCount=oDBSQLhelper.GetSingle(lcSQLCmd)
IF ISNULL(uCount) AND !EMPTY(oDBSQLhelper.errmsg)
ERROR oDBSQLhelper.errmsg
ENDIF
nPageno=INT((VAL(cpageno)-1)*val(cpagesize))
TEXT TO lcSQLcmd NOSHOW TEXTMERGE
select * from devdata WHERE 1=1
ENDTEXT
lcSQLcmd = lcSQLcmd + TEXTMERGE(" and ctime between '<<cKSRQ>>' and '<<cJSRQ>>' ")
IF !EMPTY(ctj)
lcSQLcmd = lcSQLcmd + TEXTMERGE(" and devsn like '%<<ctj>>%'")
ENDIF
lcSQLCmd = lcSQLCmd + TEXTMERGE(" limit <<nPageno>>,<<cpagesize>> ")
IF oDBSQLhelper.SQLQuery(lcSQLCmd,"devdata")<0
ERROR oDBSQLhelper.errmsg
ENDIF
RETURN cursortojson("devdata",VAL(uCount))
ENDPROC
ENDDEFINE前端layui框架
前端2.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="https://unpkg.com/layui@2.6.8/dist/layui.js">
</script>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<i class="layui-icon layui-icon-search"></i>
请输入时间
<div class="layui-inline">
<!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input" id="txtksrq">
</div>
-
<div class="layui-inline">
<!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input" id="txtjsrq">
</div>
设备SN
<div class="layui-inline">
<input type="text" class="layui-input" id="txttj">
</div>
<button id="btncx" class="layui-btn" lay-submit lay-filter="login">查询</button>
</div>
</div>
</div>
<table id="demo" lay-filter="test"></table>
<div id="page1"></div>
<script>
var nPageno=1;
var nPagesize=1;
var mydata=dateFormat(-30);
var ksrq=mydata[0]
var jsrq=mydata[1]
layui.use(['laydate', 'laypage', 'jquery','table'], function() {
var laydate = layui.laydate;
var laypage = layui.laypage;
var $ = layui.$;
var layer = layui.layer;
var table = layui.table;
//执行一个laydate实例
laydate.render({
elem: '#txtksrq' //指定元素
});
laydate.render({
elem: '#txtjsrq' //指定元素
});
var url = "http://127.0.0.1:801/ctl_devdata.fsp?proc=getlist";
//第一个实例
var tableIns = table.render({
elem: '#demo'
//,height: 500
,height: 'full'
,url: url //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'devsn', title: '设备SN', width:160,sort: true}
,{field: 'unit', title: '单位', width:100}
,{field: 'dataval', title: '数据', width:100}
,{field: 'ctime', title: '时间', width: 177,sort: true}
]],
where: {
ksrq: ksrq
,jsrq: jsrq
,tj:""
},
parseData: function(res){ //res 即为原始返回的数据
console.log(res);
return {
"code": res.errno, //解析接口状态
"msg": res.errmsg, //解析提示文本
"count": res.total, //解析数据长度
"data": res.rows //解析数据列表
};
},
});
$(function() {
$("#txtksrq").val(ksrq)
$("#txtjsrq").val(jsrq)
$("#btncx").click(function() {
//alert($("#txtjsrq").val())
//getlist();
//这里以搜索为例
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
ksrq: $("#txtksrq").val()
,jsrq: $("#txtjsrq").val()
,tj:$("#txttj").val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
})
})
function getlist() {
var url = "http://127.0.0.1:801/ctl_devdata.fsp?proc=getlist";
$.getJSON(url, {
pageno: nPageno,
pagesize: nPagesize
}, function(res) {
//layer.msg(res)
if(res.errno && res.errno!=0){
layer.msg(res.errmsg)
return;
}
laypage.render({
elem: 'page1'
,count: res.total/nPagesize ,//数据总数
limit:nPagesize,
curr:nPageno,
jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
nPageno=obj.curr
//首次不执行
if(!first){
//do something
//getlist();
}
}
});
})
}
});
function dateFormat(count=0) {
// 实例化开始日期
const startDate = new Date();
// 以毫秒设置 Date 对象
if(count > 2){
startDate.setTime(startDate.getTime()); // 大于2，设置起始时间为今天
}else if(count < -2){
startDate.setTime(startDate.getTime() + (24 * 60 * 60 * 1000) * (count + 1));
}else{
startDate.setTime(startDate.getTime() + (24 * 60 * 60 * 1000) * count);
}
// 获取开始年份
const startY = startDate.getFullYear();
// 获取开始月份
const startM = startDate.getMonth() + 1 < 10 ? '0' + (startDate.getMonth() + 1) : startDate.getMonth() + 1;
// 获取开始日
const startD = startDate.getDate() < 10 ? '0' + startDate.getDate() : startDate.getDate();
// 拼接 最终开始时间
const startTime = `${startY}-${startM}-${startD}`;
// 实例化结束日期
const endDate = new Date();
// 以毫秒设置 Date 对象
if(count > 2){
endDate.setTime(endDate.getTime() + (24 * 60 * 60 * 1000) * (count - 1));
}else if(count < -2){
endDate.setTime(endDate.getTime()); // 小于-2，设置结束时间为今天
}else{
endDate.setTime(endDate.getTime() + (24 * 60 * 60 * 1000) * count);
}
// 获取结束年份
const endY = endDate.getFullYear();
// 获取结束月份
const endM = endDate.getMonth() + 1 < 10 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1;
// 获取结束日
const endD = endDate.getDate() < 10 ? '0' + endDate.getDate() : endDate.getDate();
// 拼接 最终结束时间
const endTime = `${endY}-${endM}-${endD}`;
// 返回 开始 至 结束 日期 数组
return [startTime, endTime];
}
</script>
</body>
</html>感觉Layui框架的代码还是简洁明快的。
怎么顺手怎么来。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2024-02-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云数据库 MySQL
腾讯云数据库 MySQL（TencentDB for MySQL）为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性，包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL，可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理，不仅经济实惠，而且稳定可靠，易于运维。