js处理枚举
js处理枚举
标签(空格分隔): javascript enum
Backgroud: DB中读到的status 是 int类型,并且做了pagination,不太好单独拎出来这个字段做枚举转换,于是考虑用js在前端做个简单处理。
- 采用const方式定义;
- 通过value 获取key,或者通过key获取value;
- 定位获取页面上每条数据的status cell;
- 获取每个cell中的值,是DB中的int类型;
- 通过cell中拿到的int 数据,即value,拿到const中对应的key,并回写到该cell;
1.定义
<script>
const Status = {
IDLE:0,
INUSE:1,
DOWN:2
}
</script>
补充: let 声明的变量可以被更改,重新赋值; const 声明的变量,指向memory addr,不可重新赋值;
2. 理解针对Status 的各种操作
- console.log(Object.keys(ClientStatus)[0]) --->'IDEL'
- console.log(Object.keys(ClientStatus)) ---> ['IDLE','INUSE','DOWN']
- console.log(ClientStatus.DOWN.valueOf()) ---> 2
- console.log(ClientStatus.DOWN) ----> 2
- console.log(ClientStatus.hasOwnProperty('IDLE')) ---> true
- console.log(ClientStatus.propertyIsEnumerable('IDLE')) ---> true
3. 定位table中每条数据的status cell
- 定位cell:
let per_status = document.getElementById(cellid)
- 定位每个 cell:cell-->td 的parent是 tr
$("tr[id=trid]").each(function (index, element){
let cstatus = document.getElementById(cellid);
})
- 但是如果要重写每个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中。
})