阅读 28 SEO

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中。
    })


文章分类
后端
文章标签
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐