iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Modern Web

零經驗ASP .NET Core 30 DAY全紀錄系列 第 24

零經驗 .NET Core 30 DAY----- Day24 所謂的直行橫列就是個搞瘋人的東西嘛

  • 分享至 

  • xImage
  •  

大家晚上好,我想要做的功能如下:
一張座位表如過太大,最多一次看到就是10X10,要是想看到更右邊或更下面,就得點選➡或是⬇,當然也可以點選⬆和⬅,移回原本的位子。


下面為此功能的設計&示意圖:
假設有一張15x15的座位表
https://ithelp.ithome.com.tw/upload/images/20200930/2013003019iBpdle1H.png
因為一次顯示實在是太大了,所以每頁橫的跟直的最多就是10個位字,下圖為一開始點入座位表會顯示的10x10座位。
https://ithelp.ithome.com.tw/upload/images/20200930/20130030xzER3w5G0k.png
那如果按下⬇,就會顯示往下的座位表,範圍如下圖。
https://ithelp.ithome.com.tw/upload/images/20200930/20130030nxzNEiTMkS.png


今天的實作成果如下
(光要判斷x,y、上下左右、還有行列我就搞了好久/images/emoticon/emoticon03.gif),做上下左右的設置會放到明天,目前是後端寫死的狀態。
座位表在資料庫的狀態,只放上前後幾筆。
https://ithelp.ithome.com.tw/upload/images/20200930/20130030by0X3qnCF8.png

https://ithelp.ithome.com.tw/upload/images/20200930/201300301Gxf2Cvw7g.png
這是點入查看座位表的時候呈現從最左上角開始的10x10個座位。
https://ithelp.ithome.com.tw/upload/images/20200930/20130030F6Cw8WuDm2.png
那如果點選⬇ (這邊請想像一下有這個按鈕,我明天會做啦QQ),會出現下面的樣字。
https://ithelp.ithome.com.tw/upload/images/20200930/2013003033bzLTpPrM.png


放上我的落落長程式碼(10/1號更新,因為昨天做的錯了QQ)

<table id="dtable">
@{
int C = TX.Max();
int R = TY.Max();
    for(int i = 0; i <= R ;i++){ 
        @if( i >= page1 || i < page1-11){

        }else{    
        <tr>
        @for(int j = 0; j <= C ;j++){ 
        @if(j >= page2 || j <page2-11){

        }else if(i == page1-11 && j ==page2-11){
            <td>  </td> 
        }else if(i == page1-11 ){
            if(j<page2){<td> @j </td>} 
        }else if( j == page2-11 ){
            if(i<page1){<td> @i </td>} 
        }else{
            <td bgcolor="@SColor[(i-1)*C + j-1]">
                @if(SName[(i-1)*C + j-1] !="走道"){  
                    @SName[(i-1)*C + j-1];
                }else{
                      <p>    </p>
                }
            </td>
        
        }}

            </tr>}
        }} 
</table>

day24心得:
我真的對行列實在是一竅不通,搞來搞去弄了好久,好難啊,今天很趕,等等要趕回家,所以心得就跳過吧。


上一篇
零經驗 .NET Core 30 DAY----- DAY23 功能實作[座位管理系統-管理座位表4]
下一篇
零經驗 .NET Core 30 DAY----- Day25 row column二維TO一維計算和實際應用
系列文
零經驗ASP .NET Core 30 DAY全紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言