使用repeater,遍历数据,不规则排序,不同的样式之间切换
如图最下面那副图片的文字说明在图片的右边,而其它图片的文字说明在图片的下方,要实现这种效果,其实只要在HTML部分用样式控制,就可以达到了。
前台代码:
先在CSS.CSS样式文件里定义二个更换的样式,
.class3{ position:absolute; left:310px; top:600px; width:280px;}
.class4{ }
<div id="main" >
<ul><asp:Repeater ID="datalist" runat="server"><ItemTemplate><li style="float:left;"><div class='<%# (Container.ItemIndex) == 4 ? "class1" : "class2" %>'><img src="<%#Eval("imgUrl") %>" width="280px" height="180px" /></div><br /><div runat="server" class='<%# (Container.ItemIndex) == 4 ? "class3" : "class4" %>'><a href="newsDisplay.aspx?id=<%#Eval("ID") %>"><div style="margin-top:10px; font-size:12px;"><span style="color:#9D6E31; font-size:16px;">><%#Eval("title") %></span><br /><%#getContent(Eval("content").ToString()) %></div></a></div></li></ItemTemplate></asp:Repeater></ul>
</div>
最重要的就是class='<%# (Container.ItemIndex) == 4 ? "class3" : "class4" %>',这句了,这句让数据行索引自己判断是到第几行了,用一个三元运算符判断选择哪个样式。
后台代码很简单,和普通的绑定一样。
2 {
3 aboutus us = new aboutus();
4 protected void Page_Load(object sender, EventArgs e)
5 {
6 bind();
7 }
8 protected string getContent(string str)
9 {
10 if (str.Length > 80)
11 {
12 str = str.Substring(0, 80) + "...";
13 }
14 return str;
15 }
16 protected void bind()
17 {
18 string sql = "select top 5 ID,title,content,imgUrl from main where type='ABOUTUS' order by [order] desc";
19 this.datalist.DataSource = DbHelperOleDb.Query(sql);
20 this.datalist.DataBind();
21 }
呵呵,很简单的,当时弄这个的时候头都想破了。问了好多人。
转载于:https://www.cnblogs.com/sheseido/archive/2010/10/31/1865770.html
使用repeater,遍历数据,不规则排序,不同的样式之间切换相关推荐
- 【JAVA】大整数数据量排序
ZZ:http://pisces-java.iteye.com/blog/766745 题目大意:移动公司需要对已经发放的所有139段的号码进行统计排序,已经发放的139号码段的文件都存放在一个文本文 ...
- python对csv文件中的数据进行分类_利用Python对csv文件中的数据进行排序
代码如下: #导入包 import pandas as pd from pandas import DataFrame,Series #设置路径 path='C:\\Users\\jyjh\\Desk ...
- vue 字典配置_vue遍历数据及字典的方法
数组:数值 {{ item.message }} 数组:数值加索引 {{ item.msg }} {{index}} 字典:key value index {{ value }} {{key}} {{ ...
- 【前端实例】JavaScript对Table数据进行排序操作
[提出需求] 点击表格头部的时候根据对应列的所有值来进行排序,最终显示排序后的数据行. [具体效果] [步骤思路] 点击需要排序列的数据头,获取数据头所在列的索引.通过索引找到每一行所对应列的数据,之 ...
- mysql索引排序算法_MySQL中利用索引对数据进行排序的基础教程
MySQL中,有两种方式生成有序结果集:一是使用filesort,二是按索引顺序扫描.利用索引进行排序操作是非常快的,而且可以利用同一索引同时进行查找和排序操作.当索引的顺序与ORDER BY中的列顺 ...
- R语言对dataframe的行数据进行排序(Ordering rows)实战:使用R原生方法、data.table、dplyr等方案
R语言对dataframe的行数据进行排序(Ordering rows)实战:使用R原生方法.data.table.dplyr等方案 目录
- R语言基于多字段(多数据列、multiple columns)对dataframe的行数据进行排序(Ordering rows)实战:使用R原生方法、data.table、dplyr等方案
R语言基于多字段(多数据列.multiple columns)对dataframe的行数据进行排序(Ordering rows)实战:使用R原生方法.data.table.dplyr等方案 目录
- 实验五:任意输入10个int类型数据,排序输出,再找出素数
一.实验代码如下: 1 /*本程序用来任意输入10个int类型数据,排序输出,再找出素数*/ 2 3 package jiangli; 4 5 import java.util.Scanner; 6 ...
- excel筛选排序从小到大_数据横向排序和筛选,Ctrl+F搭配通配符quot;*quot;,只需简单四步完成...
数据的排序和筛选,相信大家都有操作过.但我们在利用Excel表格进行数据排序筛选的时候,基本都是数据的纵向操作,也就是按列的方式进行数据操作.今天我们就来学习一下,如何对数据进行横向的排序和筛选. 如 ...
最新文章
- java wait for_Java p.waitfor()永远等待
- 关于赠书《VS Code》断货延迟的通知!
- 一看就明白的爬虫入门讲解-基础理论篇(下篇)
- mysql的从节点能否执行事务_MySQL执行事务的语法与流程详解
- execjs执行js出现window对象未定义时的解决_10个常见的JS语言错误总汇
- Linux设备驱动模型1——简介和底层架构
- Intent传递数据时,可以传递哪些类型数据
- Java 回调 (Callback) 接口学习使用
- TestNG中使用监听
- gurobi和java_Gurobi和java和空解决方案
- Windows 动态链接库
- python基础教程代码-Python基础教程代码怎么是英文 看不懂啊?
- 最新谷歌GOOGLE搜索命令大全
- java cnzz爬数据_PHPcurl抓取cnzz统计数据
- 如何测试充电宝输出电压-20210127
- 软件测试的分类有哪些?
- 大数据常见英文词汇(待更新)
- 功能安全-26262-理论到实践-基础知识-标准机构与认可、认证
- 送君千里终须一别,1胜2负,唯一战胜过AlphaGo的人退役了
- web前端开发自学难吗,前端开发网上学习
热门文章
- python编程15讲答案,[Python编程:从入门到实践] 第十五章:生成数据 习题答案
- 转录组分析_高级转录组分析和R数据可视化
- 双向循环神经网络_情感分析:基于循环神经网络
- 判断无线网卡是否支持5GHz频段
- 身份识别协议枚举工具ident-user-enum
- NGUI从入门到实战第1章开启NGUI学习之旅
- qpython3安装kivy_kivy库的安装
- hive动态分区shell_Hive动态分区 参数配置及语法
- php注册表唯一电脑,PHP常见设计模式之注册表模式
- 3D大脑图谱-Julich-Brain被称作“Google Earth of the brain”