ListView中使用ul-li布局展示数据
2013-07-16 00:20
218 查看
前台代码:
CSS代码:
后台代码:
<!--comment books start--> <div id="comment_book"> <!-- 使用ListView展示数据 --> <asp:ListView ID="lvBookList" runat="server" onpagepropertieschanging="lvBookList_PagePropertiesChanging"> <LayoutTemplate> <!-- 占位符控件,此处使用ul --> <ul id="itemPlaceholder" runat="server"></ul> </LayoutTemplate> <!-- 显示信息,此处使用li --> <ItemTemplate> <li> <a href="#"><img src='Images/BookCovers/<%#Eval("ISBN") %>.jpg' alt='<%#Eval("Title") %>' width="100px" height="120px" /></a> <a href="#"><%#CutString2(Eval("Title"),15)%></a><br /> <%#Eval("UnitPrice","{0:C2}")%></a> </li> </ItemTemplate> </asp:ListView> <!-- 分页控件 --> <asp:DataPager ID="dpNewBook" runat="server" PagedControlID="lvBookList" PageSize="12"> <Fields> <asp:NumericPagerField ButtonCount="10" NextPageText="下一页" PreviousPageText="上一页" /> </Fields> </asp:DataPager> </div> <!--comment books end-->
CSS代码:
#comment_book{ height:100%; overflow:hidden;} #comment_book li{ float:left; margin:0 5px 12px; text-align:center; display:inline;} #comment_book li img{ display:block; border:1px solid #D4D7D6; padding:2px; margin-bottom:4px;}
后台代码:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { bindListView();//将List中的数据绑定到ListView中 } } /// <summary> /// 将List中的数据绑定到ListView中 /// </summary> private void bindListView() { this.lvBookList.DataSource = BooksManager.GetBooks(); this.lvBookList.DataBind(); } /// <summary> /// 单击页码时触发 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void lvBookList_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e) { //点击分页控件中的页码时,进入新的页面 this.dpNewBook.SetPageProperties(e.StartRowIndex, e.MaximumRows, false); //将List中的数据绑定到ListView中 bindListView(); } #region 截断图书显示内容 /// <summary> /// 截断图书显示内容 /// </summary> public static string CutString2(object content, int length) { string temp = content.ToString().Replace("<br/>", "").Replace("<br>", "");//先替换换行标签,保证不出现换行 /*参数说明:要处理的字符串,符合条件的表达式[汉字],替换的字符[内容随意写但是要两个字符, *因为一个中文对应两个字符,不区分大小写] */ if (Regex.Replace(temp, "[\u4e00-\u9fa5]", "zz", RegexOptions.IgnoreCase).Length <= length) { return temp; } for (int i = temp.Length; i >= 0; i--) { temp = temp.Substring(0, i); if (Regex.Replace(temp, "[\u4e00-\u9fa5]", "zz", RegexOptions.IgnoreCase).Length <= length - 3) { return temp + "..."; } } return ""; } #endregion
相关文章推荐
- ListView中使用table-tr-td布局展示数据
- ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据(一)
- Android中ListView同过自定义布局并使用SimpleAdapter的方式实现数据的绑定
- android ListView布局之三(使用自定义的Adapter绑定数据,通过contextView.setTag绑定数据)有按钮的ListView
- ListView动态加载数据模板(使用代码布局)
- 【黑马Android】(04)数据库的创建和sql语句增删改查/LinearLayout展示列表数据/ListView的使用和BaseAdater/内容提供者创建
- ListView动态加载数据模板(使用代码布局)
- 使用OkHttp网络请求+Fresco图片显示把请求到的数据展示到ListView上
- Android:不使用布局文件,为Listview填充数据
- 【android动态布局】之【ListView动态加载数据模板(使用xml布局)】
- 使用Listview来完成提供接口的数据展示
- ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据(二)
- 使用ul li做特殊布局要注意
- Xamarin使用ListView开启分组视图Cell数据展示bug处理
- Android使用ListView展示列表数据
- [Android新手学习笔记23]-如何使用ListView展示列表数据
- Android使用OKHTTP网络框架请求数据,RecyclerView结合Glide展示图片,瀑布流布局样式
- 【android动态布局】之【ListView动态加载数据模板(使用xml布局)】
- listview的再次使用(两个集合中的数据集中显示并使用framelayout布局表示系统应用与非系统应用)