VFP与layui框架的亲密互动，mysql表格分页并不难
最近在做物联网开发，需要一些简洁好用的前端UI框架，本来上想使用bootstrap框架,后面细想一下，中文框架我们也有，早听说了layui，但一直没机会用，今天试看看。数据库：MYSQL开发工具：VFP SP2 7423+祺佑三层开发框架（猫框）首先打开账套设置，配置数据库连接其次运行调试服务器VFP后端代码编写，带分页功能DEFINE CLASS ctl_devdata as Session..
·
最近在做物联网开发，需要一些简洁好用的前端UI框架，本来上想使用bootstrap框架,后面细想一下，中文框架我们也有，早听说了layui，但一直没机会用，今天试看看。
数据库：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框架的代码还是简洁明快的。
怎么顺手怎么来。
猫猫的心里话
加菲猫的VFP|狐友会社群接收投稿啦
加菲猫的VFP，用VFP不局限VFP，用VFP混合一切。无论是VFP，还是JS，还是C，只要能混合起来，都可以发表。
商业模式，销售技巧、需求规划、产品设计的知识通通可以发表。
暂定千字50元红包，，优秀的文章红包更大，一经发表，红包到手。
如何帮助使用VFP的人？
用VFP的人，有专业的，有非专业了，很多人其实是小白，问出的问题是小白，如果问题不对，我们引导他们问正确的问题。无论如何请不要嘲笑他们说帮助都不看，这么简单的问题都不会，嘲笑别人不行，而无法提出建设性答案，是很low的。
我们无论工作需要，还是有自己的软件，都是是需要真正的知识，如何让更多人学习真正的VFP知识呢，只需要点赞，在看，能转发朋友圈就更好了。
加菲猫的vfp倡导用"VFP极简混合开发，少写代码、快速出活，用VFP，但不局限于VFP，各种语言混合开发"。
我已经带领一百多名会员成功掌到VFP的黑科技，进入了移动互联网时代，接下来我们要进入物联网领域。
2024年狐友会社群会员继续招募中
社群会员获取的权益有：
祺佑三层开发框架商业版（猫框），终身免费升级，终身技术支持。
开放的录播课程有：
微信小程序，微信公众号开发，H5 APP开发，Extjs BS开发，VFP面向对象进阶，VFP中间层开发。
源码类资源有：
支付组件源码，短信源码，权限组件源码，一些完整系统的源码。这个可以单独出售的，需要的可以联系我。
会员也可以实现群内资源对接，可以接分包，合作等各项商业或技术业务
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)