据动态生成html的table

yaoyaogghaha 2017-06-05 09:45:50
数据表:select IndexID,Otype,colSpan,rowSpan from A ,如下图:
indexid:通过这个排序,按先后顺序生成每行固定的四列HTML控件(每行tr只能有四列)
otype:控件类型
colspan:跨列数
rowspan:跨行数


如何写SQL拼出,根据colspan,rowspan这两个字段,如果存在跨行或跨列的情况去生成html的Table,生成效果像下面的UI这样:



就是说后台代码通过查询A表数据,在逻辑里怎么去根据每行固定四列的显示方式去拼装table,最后显示到UI里?或者通过改SQL实现也可以。
...全文
479 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
Dulm2016 2020-01-02
  • 打赏
  • 举报
回复
select * from sb where erbi
道素 2017-06-14
  • 打赏
  • 举报
回复
引用 11 楼 yaoyaogghaha 的回复:
[quote=引用 10 楼 yaoyaogghaha 的回复:] [quote=引用 8 楼 ch21st 的回复:] 上海有个小错误,最后tr多了一个反斜杠


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
这行报错 [/quote] 把case when sum(colspan)over(order by indexid)%4=0 then 1 else 0 end ChangeRow 里的order by indexid去掉就可以[/quote] 那就是你的SQL Server还不支持这个,需要换个写法:

DECLARE @tableHTML NVARCHAR(max)=''
 create table #t(IndexID INT,Otype NVARCHAR(100),colSpan INT,rowSpan INT)
INSERT INTO #T(IndexID,Otype,colSpan,rowSpan)
   SELECT 0,N'文本',4,1 union all
    SELECT 1,N'图片',1,1 union all
    SELECT 2,N'文本',1,1 union all
    SELECT 3,N'标签',2,1 union all
    SELECT 4,N'图片',4,1 union all
    SELECT 5,N'文本',4,1 union all
    SELECT 6,N'图片',4,1 union all
    SELECT 7,N'单选',1,1 union all
    SELECT 8,N'单选',1,1 union all
    SELECT 9,N'单选',1,1 union all
    SELECT 10,N'单选',1,1 union all
    SELECT 11,N'文本',2,1 union all
    SELECT 12,N'文本',2,1 union all
    SELECT 13,N'文本',4,1 
;WITH AA AS (
   select *, case when isnull(p.cols,0)%4=0 then 1 else 0 end ChangeRow
           ,case when min(IndexID)over()=IndexID then 1 else 0 end firstrow 
           ,case when max(IndexID)over()=IndexID then 1 else 0 end lastrow 
    from #T as t1
    outer apply(select sum(colspan) from #t as tt where tt.IndexID<t1.IndexID) p(cols)
 )
 
--select * from AA
SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'

 
 SET @tableHTML=REPLACE(REPLACE(@tableHTML,'<','<'),'>','>')
 select  @tableHTML
yaoyaogghaha 2017-06-14
  • 打赏
  • 举报
回复
引用 10 楼 yaoyaogghaha 的回复:
[quote=引用 8 楼 ch21st 的回复:] 上海有个小错误,最后tr多了一个反斜杠


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
这行报错 [/quote] 把case when sum(colspan)over(order by indexid)%4=0 then 1 else 0 end ChangeRow 里的order by indexid去掉就可以
yaoyaogghaha 2017-06-14
  • 打赏
  • 举报
回复
引用 8 楼 ch21st 的回复:
上海有个小错误,最后tr多了一个反斜杠


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
这行报错
yaoyaogghaha 2017-06-14
  • 打赏
  • 举报
回复
引用 8 楼 ch21st 的回复:
上海有个小错误,最后tr多了一个反斜杠


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
使用的是SQLSERVER2008,上面的写法好像不支持2008
道素 2017-06-11
  • 打赏
  • 举报
回复
上海有个小错误,最后tr多了一个反斜杠


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
道素 2017-06-11
  • 打赏
  • 举报
回复
更正,上面的有错误:

DECLARE @tableHTML NVARCHAR(max)=''
 create table #t(IndexID INT,Otype NVARCHAR(100),colSpan INT,rowSpan INT)
INSERT INTO #T(IndexID,Otype,colSpan,rowSpan)
   SELECT 0,N'文本',4,1 union all
    SELECT 1,N'图片',1,1 union all
    SELECT 2,N'文本',1,1 union all
    SELECT 3,N'标签',2,1 union all
    SELECT 4,N'图片',4,1 union all
    SELECT 5,N'文本',4,1 union all
    SELECT 6,N'图片',4,1 union all
    SELECT 7,N'单选',1,1 union all
    SELECT 8,N'单选',1,1 union all
    SELECT 9,N'单选',1,1 union all
    SELECT 10,N'单选',1,1 union all
    SELECT 11,N'文本',2,1 union all
    SELECT 12,N'文本',2,1 union all
    SELECT 13,N'文本',4,1 
;WITH AA AS (
   select *, case when sum(colspan)over(order by IndexID)%4=0 then 1 else 0 end ChangeRow
           ,case when min(IndexID)over()=IndexID then 1 else 0 end firstrow 
           ,case when max(IndexID)over()=IndexID then 1 else 0 end lastrow 
    from #T
 )

--select * from AA

SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '</tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
 
 SET @tableHTML=REPLACE(REPLACE(@tableHTML,'<','<'),'>','>')
 select  @tableHTML
 

<table>
	<tr>
		<td colspan="4">
			<input type="text" name="input0" />
		</td>
	</tr>
	</tr>
	<td colspan="1">
		<img src="aaa.jpg" />
	</td>
	<td colspan="1">
		<input type="text" name="input2" />
	</td>
	<td colspan="2">aaaa</td>
	</tr>
	</tr>
	<td colspan="4">
		<img src="aaa.jpg" />
	</td>
	</tr>
	</tr>
	<td colspan="4">
		<input type="text" name="input5" />
	</td>
	</tr>
	</tr>
	<td colspan="4">
		<img src="aaa.jpg" />
	</td>
	</tr>
	</tr>
	<td colspan="1">
		<input type="radio" name="input7" />
	</td>
	<td colspan="1">
		<input type="radio" name="input8" />
	</td>
	<td colspan="1">
		<input type="radio" name="input9" />
	</td>
	<td colspan="1">
		<input type="radio" name="input10" />
	</td>
	</tr>
	</tr>
	<td colspan="2">
		<input type="text" name="input11" />
	</td>
	<td colspan="2">
		<input type="text" name="input12" />
	</td>
	</tr>
	</tr>
	<td colspan="4">
		<input type="text" name="input13" />
	</td>
	</tr>
</table>
道素 2017-06-11
  • 打赏
  • 举报
回复
引用 5 楼 yaoyaogghaha 的回复:
[quote=引用 4 楼 ch21st 的回复:] 如果需要根据colspan来保证每个TRxia的TD数目,那么可以先根据每行colspan以及每个TR的最大TD数先将数据按照TR分组 然后每组生成一个tr,不知道你是不是这个意思
对的,果然有点希望了,根据来保证每个TR下的TD数目,就是数据表A,如果没有colspan跨列的话,是每四条数据就要换一行,也就是每四条数据生成一个tr,现在不知道如果colspan,rowspan有值 的话,怎么去构建这些TR[/quote]
引用 5 楼 yaoyaogghaha 的回复:
[quote=引用 4 楼 ch21st 的回复:] 如果需要根据colspan来保证每个TRxia的TD数目,那么可以先根据每行colspan以及每个TR的最大TD数先将数据按照TR分组 然后每组生成一个tr,不知道你是不是这个意思
对的,果然有点希望了,根据来保证每个TR下的TD数目,就是数据表A,如果没有colspan跨列的话,是每四条数据就要换一行,也就是每四条数据生成一个tr,现在不知道如果colspan,rowspan有值 的话,怎么去构建这些TR[/quote] 我觉得还有不严谨的地方,bi 如按顺序凑不出4的整数倍怎么办? 不知道你 用什么版本数据库,显示是下面的语法是不是都支持,另外下面的例子没有考虑rowspan,加上会更负责些,先弄个简单的,计入每个单元格都占一行

DECLARE @tableHTML NVARCHAR(max)=''
 create table #t(IndexID INT,Otype NVARCHAR(100),colSpan INT,rowSpan INT)
INSERT INTO #T(IndexID,Otype,colSpan,rowSpan)
   SELECT 0,N'文本',4,1 union all
    SELECT 1,N'图片',1,1 union all
    SELECT 2,N'文本',1,1 union all
    SELECT 3,N'标签',2,1 union all
    SELECT 4,N'图片',4,1 union all
    SELECT 5,N'文本',4,1 union all
    SELECT 6,N'图片',4,1 union all
    SELECT 7,N'单选',1,1 union all
    SELECT 8,N'单选',1,1 union all
    SELECT 9,N'单选',1,1 union all
    SELECT 10,N'单选',1,1 union all
    SELECT 11,N'文本',2,1 union all
    SELECT 12,N'文本',2,1 union all
    SELECT 13,N'文本',4,1 
;WITH AA AS (
   select *, case when sum(colspan)over(order by IndexID)%4=0 then 1 else 0 end ChangeRow,case when min(IndexID)over()=IndexID then 1 else 0 end firstrow from #T
 )

--select * from AA

SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg"' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'">' end,''
       ,case when ChangeRow=1 then '</tr><tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</tr></table>'
 
 SET @tableHTML=REPLACE(REPLACE(@tableHTML,'<','<'),'>','>')
 select  @tableHTML
 

<table><tr><td colspan="4"><input type="text" name="input0"></td></tr><tr><td colspan="1"><img src="aaa.jpg"</td><td colspan="1"><input type="text" name="input2"></td><td colspan="2">aaaa</td></tr><tr><td colspan="4"><img src="aaa.jpg"</td></tr><tr><td colspan="4"><input type="text" name="input5"></td></tr><tr><td colspan="4"><img src="aaa.jpg"</td></tr><tr><td colspan="1"><input type="radio" name="input7"></td><td colspan="1"><input type="radio" name="input8"></td><td colspan="1"><input type="radio" name="input9"></td><td colspan="1"><input type="radio" name="input10"></td></tr><tr><td colspan="2"><input type="text" name="input11"></td><td colspan="2"><input type="text" name="input12"></td></tr><tr><td colspan="4"><input type="text" name="input13"></td></tr><tr></tr></table>

yaoyaogghaha 2017-06-10
  • 打赏
  • 举报
回复
引用 4 楼 ch21st 的回复:
如果需要根据colspan来保证每个TRxia的TD数目,那么可以先根据每行colspan以及每个TR的最大TD数先将数据按照TR分组 然后每组生成一个tr,不知道你是不是这个意思
对的,果然有点希望了,根据来保证每个TR下的TD数目,就是数据表A,如果没有colspan跨列的话,是每四条数据就要换一行,也就是每四条数据生成一个tr,现在不知道如果colspan,rowspan有值 的话,怎么去构建这些TR
道素 2017-06-06
  • 打赏
  • 举报
回复
如果需要根据colspan来保证每个TRxia的TD数目,那么可以先根据每行colspan以及每个TR的最大TD数先将数据按照TR分组 然后每组生成一个tr,不知道你是不是这个意思
道素 2017-06-06
  • 打赏
  • 举报
回复
没完全理解你的需求,下面是个大概的示范

DECLARE @tableHTML NVARCHAR(max)=''

;WITH A(IndexID,Otype,colSpan,rowSpan)AS (
   SELECT 0,N'文本',4,2
)
SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT 
       [td/@colspan]=colspan,td='<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'图片' THEN 'img' END +'" name="text1">' 
       FROM A ORDER BY A.IndexID FOR XML PATH('tr'),TYPE
))+N'</table>'

 SET @tableHTML=REPLACE(REPLACE(@tableHTML,'<','<'),'>','>')
 PRINT @tableHTML
结果

<table><tr><td colspan="4"><input type="text" name="text1"></td></tr></table>

吉普赛的歌 2017-06-05
  • 打赏
  • 举报
回复
这么复杂的html, 不应该在 sql 中生成, 在程序里处理吧。 简单的表格类 html , 可以参考:http://blog.csdn.net/yenange/article/details/52689781
shiguangxin 2017-06-05
  • 打赏
  • 举报
回复
俺们都是想尽办法给 SQL服务器 减负,你倒好,该不该它干的活都让它干,你就不怕它劳累过度,厌倦X生,死给你看 ?

22,300

社区成员

发帖
与我相关
我的任务
社区描述
MS-SQL Server 疑难问题
社区管理员
  • 疑难问题社区
  • 尘觉
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧