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);
    })
  1. 但是如果要重写每个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中。
    })
posted @ 2021-05-12 16:55  vivi~  阅读(870)  评论(0编辑  收藏  举报