1、效果：

2、demo 源码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>javascript test</title>

    <style media="screen">

      .write{

        opacity: 0;

      }

      .visible {

        opacity: 1;

      }

      button{

        transition: opacity 1s ease;

      }

    </style>

</head>

<body>

    <h3>控制前展示的项目依次：</h3> save、stop、cancel -- delete、submit、view -- update、export

    <h3>控制之后展示项目：</h3>

    <button type="button" class="cpe kpi write">save</button>

    <button type="button" class="cpe kpi write">stop</button>

    <button type="button" class="cpe kpi write">cancel</button> --

    <button type="button" class="enb monitor write">delete</button>

    <button type="button" class="enb monitor write">submit</button>

    <button type="button" class="enb monitor write">view</button> --

    <button type="button" class="operator query write">update</button>

    <button type="button" class="operator query write">export</button>

    <h3>控制设置 - options：<font size="1">修改后点击窗口即生效</font></h3>

    <textarea id="jsontxt" rows="18" cols="40">

    {

      cpe:{

          kpi:{

              write: true

          }

      },

      enb:{

          monitor:{

              write: false

          }

      },

      operator:{

          query:{

              write: true

          }

      }

    }

    </textarea>

</body>

<script type="text/javascript">

  document.addEventListener('click',function(){

    var jsonstr = document.querySelector('#jsontxt').value.trim(),

        json = eval('('+jsonstr+')');

    accessControl(json);

  });

  document.dispatchEvent(new Event('click'));

  /**

  * json数据映射到html

  * @param obj: json数据

  * @param path: 根路径，name属性的映射前缀(属性计算用到，使用者不用管)

  **/

  function accessControl(obj,path){

      var props = {};

      for (var key in obj) {

          var propPath = path;

          if (path) propPath = path + '.' + key;

          else propPath = '.'+key;

          /* 迭代子关系 */

          if(typeof obj[key] === 'object') arguments.callee(obj[key], propPath);

          else props[propPath] = obj[key];

      }

       /* 数据映射到 html */

      for (var key in props) {

          var doms = Array.from(document.querySelectorAll(key));

          if(doms.length==0) continue;

          doms.map(function(dom){setPermission(dom,props[key]);})

      }

      function setPermission(domObj,visibale){/* 可见设置 */

          var isHave = Array.from(domObj.classList).includes('visible');

      　　if(visibale) {

              if(!isHave) domObj.classList.add('visible');

          }else {

              if(isHave) domObj.classList.remove('visible');

          }

      }

  }

</script>

</html>

JSON数据映射之元素可见控制的更多相关文章

  1. json数据映射填充到html元素显示

    映射算法做了改进,支持name重复映射 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  2. Android中使用Gson解析JSON数据的两种方法

    Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下   Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...

  3. Android中使用Gson解析JSON数据

      Android中使用Gson解析JSON数据 在Android中可以使用Gson解析JSON数据 首先,从 code.google.com/p/google-gson/downloads/list ...

  4. Golang: 解析JSON数据之二

    上次我们介绍了 Go 语言中序列化和反序列化 JSON 数据的两个方法 Marshal() 和 Unmarshal(),并以示例演示了它们的用法. 我们在例子中看到,需要事先声明好对应的结构体,才能跟 ...

  5. Golang: 解析JSON数据之一

    JSON 作为目前最流行的数据传输格式, 相信每个程序员都跟它打过交道吧.使用 Go 语言时,也不可避免的要操作 JSON 数据,令人惊喜的是,Go 内置了序列化和反序列化 JSON 的功能,今天就来 ...

  6. springmvc-高级参数绑定-映射-异常-json数据交互-拦截器

    1.1. 高级参数绑定 1.1.1. 复制工程 把昨天的springmvc-web工程复制一份,作为今天开发的工程 复制工程,如下图: 粘贴并修改工程名为web2,如下图: 工程右键点击,如下图: 修 ...

  7. json数据渲染表单元素出现的问题

    解析页面表单元素 parseForm: function () { var data = {}; $(this).find('input').each(function () { switch ($( ...

  8. 控制层解析post请求中json数据的时候，有些属性值为空

    原因: 1.默认json数据解析的时候,值会赋给键的首字母是小写的封装的bean中的属性,如果没有首字母小写的属性,也不会报错.即bean中有getXXX方法时,从json到model会增加xxx属性 ...

  9. 原生js，jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

随机推荐

  1. 解题10（LongestSubStrBetweenAB）

    题目描述 查找两个字符串a,b中的最长公共子串.若有多个,输出在较短串中最先出现的那个. 输入描述: 输入两个字符串 输出描述: 返回重复出现的字符 示例1 输入 abcdefghijklmnop a ...

  2. eclipse jvm配置

    Eclipse设置JVM参数:->Run Configurations ->VM arguments,如下:

  3. 每月IT摘录201812

    技术 1.JVM.Java并发.NIO.网络通信,这些都是一个java工程师必须具备底层技术素养. 2.关于技术广度.消息中间件.分布式缓存.海量数据.分布式搜索.NoSQL.分布式架构.高并发.高可 ...

  4. centos 6 下KVM 安装学习之旅

    一.虚拟化介绍    虚拟化是云计算的基础.简单的说,虚拟化使得在一台物理的服务器上可以跑多台虚拟机,虚拟机共享物理机的 CPU.内存.IO 硬件资源,但逻辑上虚拟机之间是相互隔离的. 物理机我们一般 ...

  5. 准备面试-DFT

    问题:面试DFT岗位的准备工作 1.在EETOP上搜索DFT看到的一些要求 1.要弄明白DCSCAN.ACSCAN.MBIST.边扫等原理, 2.要会利用相应的Synopsys或Mentor公司工具! ...

  6. Codeforces Beta Round #54 (Div. 2)

    Codeforces Beta Round #54 (Div. 2) http://codeforces.com/contest/58 A 找子序列 #include<bits/stdc++.h ...

  7. RxJS之工具操作符 ( Angular环境 )

    一 delay操作符 源Observable延迟指定时间,再开始发射值. import { Component, OnInit } from '@angular/core'; import { of ...

  8. 安装tensorflow ubuntu18.04

    1.首先安装环境是ubuntu18.04. $sudo apt-get install python-pip python-dev python-virtualenv2.安装virtualenv虚拟环 ...

  9. 【js语法】array

    array操作说明 链接:http://www.w3school.com.cn/jsref/jsref_obj_array.asp 函数说明: concat():把两个array连接起来 join() ...

  10. 数字&字符串

    一.数字 数字分为整型(int)和浮点型(float) int(整型):整数数字 >>> a = 12 >>> a 12 >>> b = 12.3 ...