盘点让人崩溃的表单样式之 （行列置换）

一般情况下使用循环显示数据都是逐行循环，这也符合数据库的查询形式，不过有些页面必须要跟实体纸质的文档格式保持一致，比如上图，要将查询到的数据逐列绑定，每页显示4条数据，我的做法是，先按传统的逐行循环绑定数据，再用CSS将table旋转90度。具体做法如下：

1.逐行循环绑定：

前端页面无论是aspx还是mvc，都是循环table 的tr，其中添加了表单元素，因为后面要说到的不只是展示数据。

<table class="table-hover table-list table-list-item" style="max-width: 600px;">
                                    <tr class="t-head-w">
                                        <td>业务号</td>
                                        <td class="tr_heightAuto">权利人</td>
                                        <td class="tr_heightAuto">证件种类</td>
                                        <td class="tr_heightAuto">证件号</td>
                                        <td class="tr_heightAuto">共有情况</td>
                                        <td class="tr_heightAuto">权利人类型</td>
                                        <td>登记类型</td>
                                        <td class="tr_heightAuto">登记原因</td>
                                        <td>使用权面积(m²)</td>
                                        <td class="tr_heightAuto">使用期限</td>
                                        <td>取得价格（万元）</td>
                                        <td class="tr_heightAuto">权证号</td>
                                        <td>登记时间</td>
                                        <td class="tr_heightAuto">登簿人</td>
                                        <td class="height_50 tr_heightAuto">附记</td>
                                    </tr>
                                    <dtk:Repeater ID="rptList" runat="server" OnItemDataBound="rptList_ItemDataBound">
                                        <ItemTemplate>
                                            <tr class="t-head-w" style=‘<%# Eval("QSZT").ToString() == "0"?"color:blue": ""%>‘>
                                                <td> <%# Eval("YWH") %> </td>
                                                <td class="height_50">
                                                    <div runat="server" visible=‘<%# Convert.ToInt32(Eval("QSZT")) >0 %>‘>
                                                        <%# GetColumnValue(Eval("YWH"),"QLRMC",Eval("QSZT").ToString()) %> 
                                                    </div>
                                                    <div runat="server" visible=‘<%# Eval("QSZT").ToString() == "0" %>‘>
                                                        <dtk:TextBox runat="server" ID="txtQLRMC" Rows="2" TextMode="MultiLine" Text=‘<%# GetColumnValue(Eval("YWH"),"QLRMC",Eval("QSZT").ToString()) %>‘></dtk:TextBox>
                                                    </div>
                                                </td>
                                                <td class="height_50">
                                                    <div runat="server" visible=‘<%# Convert.ToInt32(Eval("QSZT")) >0 %>‘>
                                                        <%# GetColumnValue(Eval("YWH"),"ZJZL",Eval("QSZT").ToString()) %> 
                                                    </div>
                                                    <div runat="server" visible=‘<%# Eval("QSZT").ToString() == "0" %>‘>
                                                        <dtk:TextBox runat="server" ID="txtZJZL" Rows="2" TextMode="MultiLine" Text=‘<%# GetColumnValue(Eval("YWH"),"ZJZL",Eval("QSZT").ToString()) %>‘></dtk:TextBox>
                                                    </div>
                                                </td>
                                                <td class="height_50">
                                                    <div runat="server" visible=‘<%# Convert.ToInt32(Eval("QSZT")) >0 %>‘>
                                                        <%# GetColumnValue(Eval("YWH"),"ZJH",Eval("QSZT").ToString()) %> 
                                                    </div>
                                                    <div runat="server" visible=‘<%# Eval("QSZT").ToString() == "0" %>‘>
                                                        <dtk:TextBox runat="server" ID="txtZJH" Rows="2" TextMode="MultiLine" Text=‘<%# GetColumnValue(Eval("YWH"),"ZJH",Eval("QSZT").ToString()) %>‘></dtk:TextBox>
                                                    </div>
                                                </td>
                                                <td class="height_50">
                                                    <div runat="server" visible=‘<%# Convert.ToInt32(Eval("QSZT")) >0 %>‘>
                                                        <%# GetColumnValue(Eval("YWH"),"GYQK",Eval("QSZT").ToString()) %> 
                                                    </div>
                                                    <div runat="server" visible=‘<%# Eval("QSZT").ToString() == "0" %>‘>
                                                        <dtk:TextBox runat="server" ID="txtGYQK" Rows="2" TextMode="MultiLine" Text=‘<%# GetColumnValue(Eval("YWH"),"GYQK",Eval("QSZT").ToString()) %>‘></dtk:TextBox>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div runat="server" visible=‘<%# Convert.ToInt32(Eval("QSZT")) >0 %>‘>
                                                        <%# GetColumnValue(Eval("YWH"),"QLRLX",Eval("QSZT").ToString()) %> 
                                                    </div>
                                                    <div runat="server" visible=‘<%# Eval("QSZT").ToString() == "0" %>‘>
                                                        <dtk:DropDownList ID="ddlQLRLX" runat="server" Style="margin-bottom: 3px"></dtk:DropDownList>
                                                        <asp:HiddenField ID="hfQLRLX" runat="server" Value=‘<%# GetColumnValue(Eval("YWH"),"ZJZL",Eval("QSZT").ToString()) %>‘ />
                                                    </div>
                                                </td>
                                                <td><%# Eval("QSZT").ToString() != "-1"?BaseDataTypeBLL.GetBaseDataName(0,27,ConvertToString.ToString(Eval("DJLX"))):"" %> </td>
                                                <td><%#Eval("DJYY") %> </td>
                                                <td>
                                                    <div runat="server" visible=‘<%# Convert.ToInt32(Eval("QSZT")) >0 %>‘>
                                                        <%# Eval("SYQMJ") %> 
                                                    </div>
                                                    <div runat="server" visible=‘<%# Eval("QSZT").ToString() == "0" %>‘>
                                                        <dtk:TextBox runat="server" ID="txtSYQMJ" Text=‘<%# Eval("SYQMJ") %>‘ Width="100"></dtk:TextBox> 
                                                    </div>
                                                </td>
                                                <td>
                                                    <div runat="server" visible=‘<%# Convert.ToInt32(Eval("QSZT")) >0 %>‘>
                                                        <%# DateTimeToString(Eval("SYQQSSJ"),"yyyy年MM月dd日") %>起<br />
                                                        <%# DateTimeToString(Eval("SYQJSSJ"),"yyyy年MM月dd日") %>止
                                                    </div>
                                                    <div runat="server" visible=‘<%# Eval("QSZT").ToString() == "0" %>‘ style="margin-bottom: 5px;">
                                                        <dtk:TextBox runat="server" Width="100px" ID="txtSYQQSSJ" onclick="WdatePicker()" placeholder="选择起始日期" Text=‘<%# DateTimeToString(Eval("SYQQSSJ"),"yyyy-MM-dd") %>‘></dtk:TextBox> 起<br />
                                                        <br />
                                                        <dtk:TextBox runat="server" Width="100px" ID="txttxtSYQJSSJ" onclick="WdatePicker()" placeholder="选择结束日期" Text=‘<%# DateTimeToString(Eval("SYQQSSJ"),"yyyy-MM-dd") %>‘></dtk:TextBox> 止<br />
                                                    </div>
                                                </td>
                                                <td>
                                                    <div runat="server" visible=‘<%# Convert.ToInt32(Eval("QSZT")) >0 %>‘>
                                                        <%# String.Format("{0:N2}", Eval("QDJG")) %> 
                                                    </div>
                                                    <div runat="server" visible=‘<%# Eval("QSZT").ToString() == "0" %>‘>
                                                        <dtk:TextBox runat="server" ID="txtDJJG" Text=‘<%#String.Format("{0:N2}", Eval("QDJG")) %>‘ Width="100"></dtk:TextBox> 
                                                    </div>
                                                </td>
                                                <td><%# Eval("BDCQZH") %> </td>
                                                <td><%# DateTimeToString(Eval("DJSJ"),"yyyy年MM月dd日") %> </td>
                                                <td><%# Eval("DBR") %> </td>
                                                <td class="height_50">
                                                    <asp:Label runat="server" Text=‘<%# Eval("FJ") %>‘ Visible=‘<%# Eval("QSZT").ToString() != "0" %>‘></asp:Label>
                                                    <dtk:TextBox runat="server" ID="txtFJ" Rows="2" TextMode="MultiLine" Visible=‘<%# Eval("QSZT").ToString() == "0" %>‘></dtk:TextBox>
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                    </dtk:Repeater>
                                </table>
                                <div class="page minPage" style="margin-left: 10px">
                                    <dtk:AspNetPager ID="Pager" runat="server" OnPageChanged="Pager_PageChanged"
                                        PageSize="4">
                                    </dtk:AspNetPager>
                                </div>

　　

 绑定数据源

using(var db=new DBContext()){

　　var query = from j in db.Table where j.xxx=="xxxx" select j;　　//查询条件

　　int count = query.Count();　　//获得总记录数

　　//分页需要当前页码，如果需求只是单纯的将数据库中符合条件的数据读出来，那么页面初始加载时currentPage 应该从0开始，点击分页控件页码时赋值为控件的页码
　　//status 标示1为首次加载，非1表示点击右下角的分页控件

　　int currentPage = status == 1 ? 0 : Pager.CurrentPageIndex - 1;
　　var dataSource = query.OrderByDescending(j => j.QSZT).Skip(currentPage * Pager.PageSize).Take(Pager.PageSize).ToList();

　　//到这里，我们已经取得了要显示的数据，但是还不能直接绑定，因为每页显示4条，而且必须显示4条

　　//例如最后一页只有两条数据的时候，逐行绑定就只显示两条，但是这里必须补全4条，设置状态为-1，补全的Mock数据只是页面占位，不显示任何信息

　　int lastPageCount = count % Pager.PageSize;
　　if (lastPageCount!=0)
　　{
　　　　for (int i = lastPageCount; i < 4; i++)
　　　　{
　　　　　　//最后一页补全每页4条
　　　　　　dataSource .Add(new Model() { QSZT = "-1" });
 　　　　}
 　　}
　　rptList.DataSource = source;
　　rptList.DataBind();
}　

　　

添加css样式，table行列置换

.table-list-item{margin:0 0 10px 10px;border-left: 1px solid #ddd;border-bottom: 1px solid #ddd; min-width:600px;}
    .table-list-item tr{display: table-cell;}
        .table-list-item tr td {display: list-item;list-style-type: none;border-top: 1px solid #ddd;border-right: 1px solid #ddd;padding: 6px 8px;vertical-align: middle;min-height: 25px;}

.height_50{min-height:50px !important;}

.t-head-w td {min-width: 180px; max-width:100%}
    .t-head-w td textarea {width: 170px;}

.table-head {margin: 0 0 0 10px;border-collapse: collapse;border-bottom: none;border-right:none;border-left: 1px solid #DDD;}
    .table-head td {border-right:1px solid #DDD;}

　　

　　到此数据已经能绑定到页面上了，但是样式让人堪忧，你会发现同行的单元格高低不一，table的单元格不是自动会根据最高的一个去撑开吗？？？？很抱歉告诉你，这里虽然是同行，但事实上这些同行横向的单元格并不是代码中的在一个tr里的td，由上面的截图可以看出，同一个tr里的td显示是在一个竖向的列，因为旋转了，所以原先的同行等高变成了同列等宽

2.控制单元格高度

$(document).ready(function () {

    $(".tr_heightAuto").each(function () {
        var tr = $(this).parent();
        var rowNum = $(this).prevAll().length + 1;//行数
        var cellNum = $(tr).prevAll().length + 1;//列数

        var maxHeight = 0;
        $(".table-list-item tr").each(function () {
            var h = $(this).children().eq(rowNum - 1).height();
            if (h > maxHeight) {
                maxHeight = h;
            }
        });

        $(".table-list-item tr").each(function () {
            $(this).children().eq(rowNum - 1).css("height", maxHeight);
        });
        $(this).css("height", maxHeight);
    });
    var commonWidth = $(".table-list-item").width()+ 0.5;//IE+0.5 chrome+1
    $(".table-list-item").prev().css("width", commonWidth);
    $(".minPage").css("width", commonWidth);
    $(".minPage").css("float", "left");
});

　　到这里，页面已经完全具备显示的功能，由于接下来要添加编辑功能，表单含有textare，会撑大行高，所以需要先加载页面元素，然后计算每一行的高度最大的单元格，为改行赋值高度，还有计算最上面两行表头的宽度。

　　本案例中的分页控件使用的是webdiyer的AspNetPager，可以去他的主页下载http://www.webdiyer.com/downloads/

时间： 2025-01-05 10:41:46

盘点让人崩溃的表单样式之 （行列置换）的相关文章

利用CSS进行表单样式定义

我们在表单使用过程中,常常需要控制表单样式,如表单控件长度,显示样式,提醒背景色,甚至整个表单的字体和统一样式等. 这些其实都可以通过CSS来实现,使我们的表单看起来更漂亮,1.利用DIV控制输入控件长度:    如上图,表单姓名和出生日期字段看起来长短不一,并且太长,不美观,我们可以通过DIV的CSS样式进行调整. 上面的样式,我们可以通过在字段上加入DIV标签,并且设置DIV的样式,如长度150px,显示方式为同一行显示display: inline; 这样就实现了控件统一长度的效果: 2.

HTML表单样式

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServ

伪元素 控制表单样式

转载 http://www.csswang.com/exp/4842.html 当开发web应用程序时, 表单样式 是个头疼的问题.以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制 表单样式 .然而,作者通过 伪元素 给web渲染引擎添加钩子,就可以控制表单的显示. 然而,所有这些 伪元素 都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎.以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表.

QT表单样式规则

1.全局匹配: *,匹配所有的Widgets 2.类型匹配:QPushButton.QComboBox等,匹配该类的示例及其子类 3.属性匹配:通过属性来作为过滤选项,对指定的属性(可以是动态属性,例如QObject的setProperty接口),例如 QLineEdit[readOnly="true"] 对于QLineEdit只读的控件来自定义表单样式.也可以使用~=符号来对属性进行限制: 使用~=来测试是否一个QT属性QStringList包含一个执行的QString,例如: *[

还不错的Table样式和form表单样式

作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <head runat="server"> <title></title> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript">&

div仿checkbox表单样式美化及功能

div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: 0; bottom: 1px; width: 100 % ; height: 980px; z - index: 9; background - color: #000; filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opa

css学习之-表单样式

<!DOCTYPE html> <html> <head> <title>表单控件样式</title> <meta charset="utf-8"> <style type="text/css"> fieldset{ margin:1em 0; padding: 1em; border:1px solid #ccc; background-color: #d6d8d8; cursor

自定义表单样式之checkbox和radio

1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添加背景图片(美化的checkbox或radio),也就是

bootstrap3 表单样式小结

表单 表单组 <div class="form-group"> </div> 表单组内部放置label和输入组 输入组 <div class="input-group"> </div> 输入组内部放置input等控件和其他标签,控件会变短 控件 控件需要增加控件类 <textarea class="form-control" rows="3"></textare