原生js座位管理

以前每次做ttms中的座位管理時，用的都是插件，突然就想自己寫一個原生的座位管理了。先附上一張成果圖。

座位管理的界面：

座位管理的修改座位狀態:

座位管理中修改座位狀態之後：

界面有些醜陋，但是基本的功能還是已經實現了的。包括動態的生成座位，改變座位的狀態。因爲只是一個界面所以數據都是假數據。在之後連數據庫後會進一步的完善。

需要用到的技術：html,bootstrap,css,js;(個人因爲jq用的不熟練，所以沒有選擇jq)

代碼可能有些繁瑣，大家可以優化代碼，我個人也會持續優化;

首先，關於座位的動態生成：

在之前中，寫到了動態生成表格。其實思想集合是相同的。可以去動態的創建圖片，如果說不需要具體的座位的行列值可以直接通過兩層循環動態創建圖片。但如果是需要和我一樣需要具體的行列值，可以嘗試講創建的座位和行列值放在一個div中去實現。主要通過createElement方法實現。具體代碼實現如下：

'use strict'
let row,col;
window.onload = function createState() {
    for(let i = 1;i<=8;i++){
        for(let j = 1;j<=8;j++) {
            let one = document.createElement('div');
         document.getElementById('seat').appendChild(one);
            one.setAttribute('class', 'oneDiv');
            let sateImage = document.createElement('img');
            let num = document.createElement('span');
            num.innerText = i + ',' + j;
            sateImage.setAttribute("class", "sate");
            sateImage.setAttribute("id", "sate"+i+j);
            sateImage.setAttribute('data-toggle', 'modal');
            sateImage.src = '../System_manager/image/seat.png';
      }
    }
}

在添加上的元素中通過setAttributet方法爲他們添加樣式，我就不附上自己的css代碼了，大家可以根據自己的需求自己去寫相應的css代碼。

爲每一個添加的座位創建監聽事件

在上一個代碼中，每一次生成一個座位爲他們添加一個鼠標點擊事件：sateImage.addEventListener('click', function getState(){});去實現對每一個座位的操作而且這樣還可以很輕易的獲得正在操作的座位對應的行列號。具體實現如下：

//用於記錄座位的行列：
let row,col;
//在上一個代碼中生成座位時添加監聽事件：
sateImage.addEventListener('click', function getState() {
    row = i;
    col = j;
    //檢測我們的代碼是否正確
    alert（'第' + i + '行第' + j + '列'）;
    //獲取到座位的id;
    let select = sateImage.id;
    //將選中的座位更改狀態爲選定狀態：
    document.getElementById(select).src = '../System_manager/image/select.png';
});

獲取到選擇的座位之後，更改它們的狀態

首先我們可以通過一個數組去存放每個座位的狀態值。比如說0代表座位正常，1代表座位選中，-1代表座位壞掉，2代表改爲過道。那麼之後的就更加的方便去實現了。

選擇座位後會有一個彈出框，在彈出框去選擇需要對這個座位的更改，並在點擊“提交更改”之後更改那個座位的圖片。

html代碼：彈出框的實現。(通過bootstrap中的模態框生成，需要bootstrap一些相關文件的引入)

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" id = 'modal'>
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    更改座位狀態
                </h4>
            </div>
            <div class="modal-body">
                <p id = 'title'></p>
                <form role="form">
                    <div class="form-group">
                        <select class="form-control" id = 'seatState'>
                            <option value = 'active'>座位正常</option>
                            <option value = 'broken'>座位壞掉</option>
                            <option value = 'aisle'>改爲過道</option>
                        </select>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉
                </button>
                <button type="button" class="btn btn-primary" id = 'update' data-dismiss="modal">
                    提交更改
                </button>
            </div>
        </div>
    </div>
</div>

這個模態框是需要點擊一個東西才能會出現。所以我們需要給我們生成的座位綁定。

sateImage.setAttribute('data-toggle', 'modal');
sateImage.setAttribute('data-target', '#myModal');

這樣每一次我們點擊之後有一個需要我們選擇座位狀態的彈出框出現了。

獲取更改的狀態並將一開始的座位表更新：

let row,col;
let array = new Array();
for(let i = 0;i<8;i++){
    array[i] = new Array();
    for(let j = 0;j<8;j++){
        array[i][j] = 0;
    }
}
let change = document.getElementById('update');
change.onclick = function changeState() {
    let imageId = "sate"+row+col;
    let newState = document.getElementById(imageId);
    let seatState = document.getElementById('seatState');
    let index = seatState.selectedIndex;
    let value = seatState.options[index].value;
        if(value == 'active'){
            array[row-1][col-1] = 0;
            newState.src = '../System_manager/image/seat.png';
        }
        else if(value == 'broken'){
            array[row-1][col-1] = -1;
            newState.src = '../System_manager/image/broken.png';
        }
        else if(value == 'aisle'){
            array[row-1][col-1] = 2;
            newState.src = '../System_manager/image/aisle.png';
       }
}

完整代碼實現：
https://github.com/special-wen/demo/tree/master/demo_seat