关闭边栏(ESC)打开边栏(ESC)
Layui这个框架很酷呀,一直都想用这个,最近在把服务器搬到腾讯云后,搭建的是MMSQL数据库,一直也是使用ASP来处理网页,用到layui的数据表格时,ASP没有专门的JSON函数,最后只好自定义一个返回数据的格式。以下过程中包含了MMSQL的分页存储过程、layui数据表格等
MMSQL分页的存储过程
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
---------------------------------------------------------------------------- -- 分页 -- 经修改而成 -- exec sp_Pages '字段1,字段2','表','条件','排序','主键',0,10,100,'' ---------------------------------------------------------------------------- CREATE PROCEDURE dbo.sp_Pages ( @sField nvarchar(1000), --字段(不可为空) @sTable nvarchar(1000), --表名(不可为空) @sWhere nvarchar(1000), --条件(可以为空,需要where) @sOrderby nvarchar(1000), --排序(可以为空,需要order by,需要asc和desc字符) @sPkey nvarchar(50), --主键(不可以为空) @iPageIndex int, --当前页数 @iPageSize int, --每页记录数 @iRecordCount int OUTPUT, --输出总记录条数(若<1则执行count) @sOutsql nvarchar(4000) OUTPUT, --输出sql语句 @pageCount int = 1 output --输出总页数 ) AS BEGIN DECLARE @iRC int, @sSQL nvarchar(4000), @sW nvarchar(1000), @sOB nvarchar(1000), @sT nvarchar(100) SELECT @iRC = @iRecordCount, @sSQL = '', @sW = ' WHERE 1=1 ', @sOB = '' --判断条件 IF RTRIM(@sWhere) != '' AND @sWhere IS NOT NULL BEGIN SET @sW=' ' + @sWhere + ' ' END --判断总记录数 IF @iRC<1 BEGIN SET @sSQL='SELECT @iRC=Count(*) FROM ' + @sTable + @sW EXEC sp_executesql @sSQL,N'@iRC int OUT',@iRC OUT END --判断页数是否超出范围 SELECT @iPageIndex=(CASE WHEN @iRC<=(@iPageIndex-1)*@iPageSize THEN CEILING((@iRC+@iPageSize-1)/@iPageSize) WHEN @iPageIndex<1 THEN 1 ELSE @iPageIndex END) --判断排序 IF RTRIM(@sOrderby) != '' AND @sOrderby IS NOT NULL BEGIN SELECT @sOB=' ' + @sOrderby + ' ' END --如果是第一页 IF @iPageIndex=1 BEGIN SET @sSQL='SELECT TOP '+CAST(@iPageSize AS nvarchar)+' '+@sField+' FROM '+@sTable+@sW+@sOB GOTO step4 END --看有否主键 IF RTRIM(@sPkey) = '' OR @sPkey IS NULL GOTO step1 ELSE --看是否按主键排序 BEGIN DECLARE @sOB1 nvarchar(1000), @sPkey1 nvarchar(50) SELECT @sOB1 = UPPER(@sOrderby), @sPkey1 = UPPER(@sPkey) IF CHARINDEX(@sPkey1 + ' ASC', @sOB1)>0 BEGIN SET @sT='>(SELECT MAX(' GOTO step2 END IF CHARINDEX(@sPkey1 + ' DESC', @sOB1)>0 BEGIN SET @sT='<(SELECT MIN(' GOTO step2 END GOTO step3 END --如果无主键 step1: BEGIN SET @sSQL='SELECT TOP '+CAST(@iPageSize AS nvarchar)+' '+@sField+' FROM '+@sTable+@sW + ' AND EXISTS (SELECT TOP '+CAST((@iPageIndex-1)*@iPageSize AS nvarchar)+' '+@sField+' FROM '+@sTable+@sW+@sOB+')'+@sOB+')' GOTO step4 END --纯按主键排序 step2: BEGIN SET @sSQL='SELECT TOP '+CAST(@iPageSize AS nvarchar)+' '+@sField+' FROM '+@sTable+@sW+' AND '+@sPkey+@sT+@sPkey+') FROM (SELECT TOP '+CAST((@iPageIndex-1)*@iPageSize AS nvarchar)+' '+@sPkey+' FROM '+@sTable+@sW+@sOB+') AS tbTemp)'+@sOB GOTO step4 END --不纯按主键排序 step3: BEGIN SET @sSQL='SELECT '+@sField+' FROM '+@sTable+@sW + ' AND ' + @sPkey+' IN (SELECT TOP '+CAST(@iPageSize AS nvarchar)+' '+@sPkey+' FROM '+@sTable+@sW + ' AND ' + @sPkey+' NOT IN(SELECT TOP '+CAST((@iPageIndex-1)*@iPageSize AS nvarchar)+' '+@sPkey+' FROM '+@sTable+@sW+@sOB+')'+@sOB+')'+@sOB GOTO step4 END --输出最终执行的分页sql语句并执行 step4: SELECT @sOutsql = @sSQL, @iRecordCount = @iRC,@pageCount=CEILING((@iRC+@iPageSize-1)/@iPageSize) --print(@sSQL) EXEC(@sSQL) END |
layui数据表格的结构
1 |
<table id="pdcy" lay-filter="pdcy"></table> |
很简洁吧,前端HTML就一句,其它的JS引入就不多说了
JS方法渲染
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
layui.use('table', function(){ var table = layui.table; table.render({ elem: '#pdcy' ,totalRow:true ,height: h-20 ,url: '返回数据的后端处理' //数据接口 ,where:{'stype':'pdhz','sn':$('#pdhz #sn').val(),'rq':$('#pdhz #rq').val(),'mc':$('#pdhz #mc').val()} ,page: {theme:'#c00'} //开启分页 ,title:'盘点历史数据查询' ,toolbar: true ,defaultToolbar: ['filter', 'print', 'exports'] ,loading:true ,cellMinWidth:120 ,limit:30 ,limits:[30,60,90,120,150] ,cols: [[ //表头 {title:'行号',type:'numbers',fixed:'left',width:80} ,{field: '盘点日期', title: '盘点日期',align:'center',fixed:'left'} ,{field: '分店', title: '分店', width:200, sort: true,align:'center',fixed:'left'} ,{field: '货品ID',title:'货品ID',sort:true,align:'center'} ,{field: '药品名称',title:'药品名称',width:280,sort:true,align:'center'} ,{field: '药品规格',title:'药品规格',width:180,sort:true,align:'center',totalRowText:'合计:'} ,{field: '实盘数量',title:'实盘数量',sort:true,align:'center',totalRow:true} ,{field: '帐面数量',title:'帐面数量',sort:true,align:'center',totalRow:true} ,{field: '盘损数量',title:'盘损数量',sort:true,align:'center',totalRow:true} ,{field: '会员价',title:'会员价',sort:true,align:'center'} ,{field: '盘损金额',title:'盘损金额',sort:true,align:'center',totalRow:true} ,{field: '包装单位',title:'包装单位',sort:true,align:'center'} ,{field: '产地',title:'产地',sort:true} ,{field: '剔除',title:'剔除',sort:true} ,{field: '大类名称',title:'大类名称',sort:true,align:'center'} ,{field: '主推级别',title:'主推级别',sort:true,align:'center'} ]] ,text:{none:'该条件下暂无记录'} ,even: true }); }); |
相关参数说明可以参考Layui数据表格
数据接口
如今好少人使用ASP了,在弄数据接口的时候,找了挺久的,最后还是自己弄吧,官方要求返回的数据格式是JSON的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<!--#include file="conn.asp"--> <% '设置字符编码 Response.Charset="utf-8" '定义分页存储过程所需要参数变量 DIM scomText,sField,sTable,sWhere,sOrderby,sPkey,iPageIndex,iPageSize '定义存储过程输出值变量 DIM pagecount,recordcount,outsql '定义存储过程变量,RS记录变量 DIM MyComm,MyRst '定义JSON格式 DIM LayuiTable,datastr '去空格和回车,如果有回车会提示出错 Public Function ReplaceTrim(ByVal strContent) On Error Resume Next Dim re Set re = New RegExp re.IgnoreCase = True re.Global = True re.Pattern = "(" & Chr(8) & "|" & Chr(9) & "|" & Chr(10) & "|" & Chr(13) & ")" strContent = re.Replace(strContent, vbNullString) Set re = Nothing ReplaceTrim = strContent Exit Function End Function '存储参数设置 scomText="sp_pages" sField="convert(char(10),日期,120) as 盘点日期,(select replace(shopname,'\','') from shop where shop_num=分店) as 分店,货品ID,药品名称,药品规格,实盘数量,帐面数量,盘损数量,会员价,盘损金额,包装单位,产地,(case when 是否剔除=1 then '是' else '否' end) as 剔除,大类名称,主推级别" sTable="门店盘点差异表_总表" if request("rq")="" then sWhere="where 分店 like '%"&request("sn")&"%' and 药品名称 like '%"&request("mc")&"%'" else sWhere="where 分店 like '%"&request("sn")&"%' and year(日期)='"&year(request("rq"))&"' and month(日期)='"&month(request("rq"))&"' and 药品名称 like '%"&request("mc")&"%'" end if sOrderby="order by id" sPkey="id" iPageIndex=request("page") iPageSize=request("limit") 'CreateParameter(参1-存储过程中变量名,参2-对应变量的类型(文本:200,数字:2或3,19),参3-方向(1:输入,2:输出,3:输入或输出,4:返回值),参4-变量长度要与存储过程中设置的一致,参5-输入变量的值) Set MyComm = Server.CreateObject("ADODB.Command") with MyComm .ActiveConnection = conn 'MyConStr是数据库连接字串 .CommandText = scomText '指定存储过程名 .CommandType = 4 '表明这是个存储过程 .Prepared = true '需求将SQL命令先行编译 '入参(字段) .Parameters.append .CreateParameter("@sField",200,1,1000,sField) '入参(表名) .Parameters.append .CreateParameter("@sTable",200,1,1000,sTable) '入参(条件) .Parameters.append .CreateParameter("@sWhere",200,1,1000,sWhere) '入参(排序) .Parameters.append .CreateParameter("@sOrderby",200,1,1000,sOrderby) '入参(主键) .Parameters.append .CreateParameter("@sPkey",200,1,50,sPkey) '入参(当前页数) .Parameters.append .CreateParameter("@iPageIndex",19,1,0,iPageIndex) '入参(每页记录数) .Parameters.append .CreateParameter("@iPageSize",3,1,4,iPageSize) '出参(总记录,注意第三个参数,2、3表示出参,3可出可入) .Parameters.Append .CreateParameter("@iRecordCount",19,3,0,0) '出参(输出SQL) .Parameters.Append .CreateParameter("@sOutsql",200,2,4000,"") '出参(总页数) .Parameters.Append .CreateParameter("@pageCount",19,2) end with on error resume next set MyRst=MyComm.execute if MyRst.state = 0 then '未取到数据,MyRst关闭 recordcount = -1 else MyRst.close '注意:若要取得参数值,需先关闭记录集对象 recordcount = MyComm(7) '取输出参数 outsql=MyComm(8) pagecount = MyComm(9) end if Set MyComm = Nothing '以下为构造layui 数据表格要求的数据格式json LayuiTable="{""code"":0,""msg"":"""",""count"":" & recordcount & "" '如果有记录的时候 if recordcount>0 then datastr=",""data"":[{" MyRst.open do while not MyRst.EOF For Each FiledObj In MyRst.Fields datastr=datastr & """"&FiledObj.name&""":"""&ReplaceTrim(FiledObj.value)&"""," next datastr=left(datastr,len(datastr)-1) datastr=datastr &"},{" MyRst.movenext loop datastr=left(datastr,len(datastr)-2) LayuiTable=LayuiTable & datastr & "]}" else LayuiTable=LayuiTable & "}" end if Response.write LayuiTable 'Response.write outsql MyRst.close set MyRst=Nothing If err<>0 then 'Response.write("查询组织有错误:<br>"&err.Description) Error.clear Response.end End if On Error goto 0 %> |
这里包括了一些字符的处理,因为返回的数据如果有回车或换行或一些跟JSON冲突的符号时,Layui数据表格不会显示数据,必竟数据表格嘛,只要用来显示数据的。
CreateParameter
这个参数也是要注意数据的长度问题,输入与输出的方向。最终输出的LayuiTable
就是JSON的格式了最后显示的效果
Layui数据表格还是很好看吧,分页呀什么的都挺齐全的。还能直接导出数据,打印什么的。我这里使用的数据量有超200万条记录的,切换页的时候都是挺快的。这得力于MMSQL的分页呀。
大佬,请问您的数据表名是什么啊? ,where:{‘stype’:’pdhz’,’sn’:$(‘#pdhz #sn’).val(),’rq’:$(‘#pdhz #rq’).val(),’mc’:$(‘#pdhz #mc’).val()}这句的“pdhz”以及sn和mc都什么意思啊?谢谢指教!
这些只是传到后台的查询类型及参数
我也想用这个layui和asp结合,但没看懂您这个,不知道怎么把数据库的数据能读出来,麻烦给讲解一下吗?谢谢!
我例子里:数据接口那不是有代码吗?全部都在这里的呢
大佬,这篇文章的示例代码能分享下吗???42302042@qq.com
这里就是示例
大佬,这篇文章的示例代码能分享下吗???