Inventory a collapsed form style (column permutation)

In general, the use of cyclic display data is a progressive loop, which is also in line with the database query form, but some pages must be consistent with the solid paper document format, for example, to the query to the Data column -bound, each page shows 4 of data, I would like to start by the traditional row by loop binding data , and then use CSS to rotate the table 90 degrees. The following are the specific practices:

1. Loop-by-line binding:

The front-end page, either ASPX or MVC, is the TR for the loop table, which adds the form elements because the next step is not just to show the data.

<table class= "Table-hover table-list table-list-item" style= "max-width:600px;" > <tr class= "t-head-w" > <td> Business Number &L                                        t;/td> <td class= "Tr_heightauto" > Rights holders </td> &LT;TD class= "Tr_heightauto" > Document type </td> <td class= "Tr_heigh                                        Tauto "> ID number </td> <td class=" Tr_heightauto "> Common conditions </td> &LT;TD class= "Tr_heightauto" > Right person type </td> <t                                        D> registration type </td> <td class= "Tr_heightauto" > Registration reason </td> <td> Use Area (m²) </td> <td class= "Tr_heightauto "> Usage period </td> <Td> get Price (million yuan) </td> <td class= "Tr_heightauto" > Warrant number </td> <td> Registration Time </td> <td class= "Tr_heightauto"                                    > Book Man </td> <td class= "height_50 tr_heightauto" > PostScript </td> </tr> <dtk:repeater id= "rptlist" runat= "Server" OnI                                            temdatabound= "Rptlist_itemdatabound" > <ItemTemplate> <tr class= "t-head-w" style= ' <%# Eval ("Qszt"). ToString () = = "0"? " Color:blue ":" "%> > <td> <%# Eval (" YWH ")%> </td&                                                Gt &LT;TD class= "Height_50" > <div runat= "Server" visible= ' <%# Con VerT.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= "txt QLRMC "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= "txt Zjzl "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"). T                               Ostring ())%>                      </div> <div runat= "server" visible= ' <% # Eval ("Qszt"). ToString () = = "0"%> ' > <dtk:textbox runat= "server" id= "txt Zjh "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= "txt Gyqk "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 Runa t= "Server" visible= ' <%# Eval ("Qszt"). ToString () = = "0"%> ' > <dtk:textbox runat= "server" id= "txt                                                    SYQMJ "text= ' <%# Eval (" SYQMJ ")%> ' width= ' ></dtk:TextBox>                                                 </div> </td> <td> <div runat= "server" visible= ' <%# convert.toin T32 (eval ("Qszt")) >0%> ' > <%# datetimetostring (eval ("SY QQSSJ ")," yyyy mm month DD Day ")%> <br/> <%# datetimetostring (E      Val ("SYQJSSJ"), "yyyy mm month DD Day")%> </div>                                              <div runat= "Server" visible= ' <%# Eval ("Qszt"). ToString () = = "0"%> ' style= "margin-bottom:5px;" > <dtk:textbox runat= "Server" width= "100px" id= "TXTSYQQSSJ" O Nclick= "Wdatepicker ()" placeholder= "Select Start Date" text= ' <%# datetimetostring (Eval ("SYQQSSJ"), "Yyyy-mm-dd")%> ' >                                                        </dtk:TextBox>  from <br/> <br/> <dtk:textbox runat= "Server" width= "100px" id= "TXTTXTSYQJSSJ" onclick= "wdatepic Ker () "placeholder=" Select End Date "text= ' <%# datetimetostring (Eval (" SYQQSSJ ")," Yyyy-mm-dd ")%> ' ></dtk:textbox                                                >  Stop <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"). T ostring () = = "0"%> ' > <dtk:textbox runat= "Server" id= "TXTD                                                    JJG "text= ' <% #String. Format (" {0:n2} ", Eval (" QDJG "))%> ' width= ' ></dtk:TextBox>                                                 </div> </td>                                                <td><%# Eval ("Bdcqzh")%> </td>                                                <td><%# datetimetostring (Eval ("DJSJ"), "yyyy year mm DD Day")%> </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= "s Erver "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>

　　

Binding Data sources

using (Var db=new DBContext ()) {var query = from J in Db.　　Table where j.xxx== "xxxx" SELECT J; Query condition int count = query.　　Count (); The total number of records//paging needs the current page number, if the requirement is simply to read the data in the database to meet the criteria, then the initial load of the page currentpage should start from 0, click the page number of pagination control is assigned to the control's page number//status 1 for the first load, Non 1 means click on the bottom right corner of the paging control int currentpage = Status = = 1?　　0:pager.currentpageindex-1; var dataSource = query. OrderByDescending (j = j.qszt). Skip (CurrentPage * pager.pagesize). Take (pager.pagesize).　　ToList (); Here, we have made the data to be displayed, but can not be directly bound, because each page shows 4, and must show 4//For example, the last page only two data, the line bound to show only two, but here must complete 4, set the status of 1, complete the mock data is only the page placeholder　　, do not display any information int lastpagecount = count% Pager.pagesize; if (lastpagecount!=0) {for (int i = Lastpagecount; i < 4; i++) {//The last page complements 4 articles per page dataSource. 　　　　ADD (New Model () {qszt = "1"});　　}} rptlist.datasource = source; Rptlist.databind ();}

　　

Add CSS style, table column permutation

. 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;p Adding: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;}

　　

To this data has been able to bind to the page, but the style is worrying, you will find that the cell line of the same height, table cell is not automatically according to the highest one to open it???? I'm sorry to tell you, although this is a peer, but in fact, these peer horizontal cell is not in the code in a TR TD, from the above can be seen, the same TR TD display is in a vertical column, because the rotation, so the original peer and so high Into the same column and equal width

2. Control the height of the cell

$ (document). Ready (function () {$ (". Tr_heightauto"). each (function () {var        TR = $ (this). parent ();  var RowNum = $ (this). Prevall (). length + 1;//number of rows var cellnum = $ (tr). Prevall (). length + 1;//column 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");}); 

Here, the page has been fully equipped with the function of the display, because the next to add the editing function, the form contains Textare, will support a large line of high, so you need to load the page elements, and then calculate the height of each row of the largest cell, for row assignment height, as well as calculate the top two rows of the table header width.

The pagination control in this case uses Webdiyer's Aspnetpager, which can be downloaded to his home page http://www.webdiyer.com/downloads/

Inventory a collapsed form style (column permutation)