js处理枚举

js处理枚举

标签（空格分隔）： javascript enum

---

Backgroud: DB中读到的status 是 int类型，并且做了pagination，不太好单独拎出来这个字段做枚举转换，于是考虑用js在前端做个简单处理。

1. 采用const方式定义；
2. 通过value 获取key，或者通过key获取value；
3. 定位获取页面上每条数据的status cell；
4. 获取每个cell中的值，是DB中的int类型；
5. 通过cell中拿到的int 数据，即value，拿到const中对应的key，并回写到该cell；

1.定义

<script>
    const Status = {
        IDLE:0,
        INUSE:1,
        DOWN:2
    }
</script>

补充： let 声明的变量可以被更改，重新赋值; const 声明的变量，指向memory addr，不可重新赋值；

2. 理解针对Status 的各种操作

1. console.log(Object.keys(ClientStatus)[0]) --->'IDEL'
2. console.log(Object.keys(ClientStatus)) ---> ['IDLE','INUSE','DOWN']
3. console.log(ClientStatus.DOWN.valueOf()) ---> 2
4. console.log(ClientStatus.DOWN) ----> 2
5. console.log(ClientStatus.hasOwnProperty('IDLE')) ---> true
6. console.log(ClientStatus.propertyIsEnumerable('IDLE')) ---> true

3. 定位table中每条数据的status cell

1. 定位cell：let per_status = document.getElementById(cellid)
2. 定位每个 cell：cell-->td 的parent是 tr

 $("tr[id=trid]").each(function (index, element){
    let cstatus = document.getElementById(cellid);
    })

3. 但是如果要重写每个cell_status，那么每个cell_status的id都要不同，这样才不会把相同数据写入不同的cell中。
   那就把cjid 当做cell_status的 td_id（这部分要在html中定义好）。

# html
<td>{{ jid }}</td>
<td id={{ jid }}>{{ status }}</td>

#script
 $("tr[id=clientlist]").each(function (index, element){
    let cjid = $(element).children('td')[0].innerHTML;
    let cstatus = document.getElementById(cjid);
    })

4. 获取每个cell中的值，是DB中的int类显示在html中，我们需要把这个int型转为humanized

let ss = $(element).children('td')[1].innerHTML; --> 0,1,2

5. 通过cell中拿到的int数据，即value，拿到const中对应的key，并回写到该cell；

# html
<td>{{ jid }}</td>
<td id={{ jid }}>{{ status }}</td>

#script
 $("tr[id=clientlist]").each(function (index, element){
    let cjid = $(element).children('td')[0].innerHTML;
    let cstatus = document.getElementById(cjid);
    let ss = $(element).children('td')[1].innerHTML; #0,1,2
    let upStatus = Object.keys(ClientStatus)[ss]; # IDLE, INUSE, DOWN
    cstatus.innerText = upStatus; # 将upStatus回写入html页面对应的td中。
    })