easyui弹窗中的ztree的取值和回显

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../../../js/common/common.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户树</title>
    <link rel="stylesheet" type="text/css" href="css/metro.css" />
    <style type="text/css">
        ul.ztree {
            margin-top: 10px;
            /* border: 1px solid #617775; */
            width: 600px;
            height: 450px;
            overflow-y: scroll;
            overflow-x: auto;
        }

        div.zTreeDemoBackground {
            width: 600px;
            height: 450px;
            text-align: left;
        }

        span.search_highlight {
            color: whitesmoke;
            background-color: darkred;
        }
    </style>
    <!-- 引入jquery  -->
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <!-- 引入ztree插件 -->
    <script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
    <!-- 引入ztree插件扩展功能 -->
    <script type="text/javascript" src="js/jquery.ztree.exhide.min.js"></script>
    <!-- 引入自定义方法 -->
    <script type="text/javascript" src="js/fuzzysearch.js"></script>
</head>

<body>
    <input type="hidden" id="ztreeids" />
    <input type="hidden" id="ztreesnames" />

    
    
    <div id="accreditUser"  title="底层数据导出授权" buttons="#dlg-buttons">
            <div id="root" style="cursor:hand;display:inline;">导出授权</div>
            	<ul id="leftTree" class="ztree" style="width:230px; overflow:auto;"></ul>
            <div id="dlg-buttons" style="position:absolute;bottom:5px;right:20px;">
            <a href="javascript:void(0)" class="easyui-linkbutton c6"
            iconCls="icon-ok" id="baocun" style="width:90px" onclick="save()">保存</a>
       </div>    
    </div>
    <script type="text/javascript">
    var userid = '${param.id}';
        var setting = {
            check: {
                enable: true
            },
            view: {
                showLine: true, //显示节点之间的连线。
                selectedMulti: false //允许同时选中多个节点。
            },
            data: {
                simpleData: {
                    enable: true, //使用简单数据模式
                    idKey: "id", //节点数据中保存唯一标识的属性名称
                    pIdKey: "pId", //节点数据中保存其父节点唯一标识的属性名称
                    rootPId: "" //用于修正根节点父节点数据 默认值：null
                }
            },
            callback: {
                onClick: zTreeOnClick,
                onCheck: zTreeOnClick
            }
        };

        var nodes = [{
                id: "1",
                pId: "0",
                name: "父1"
            },
            {
                id: "fff11",
                pId: "1",
                name: "子-1"
            },
            {
                id: "zzzz111",
                pId: "1",
                name: "子-2"
            },
            {
                id: "2",
                pId: "0",
                name: "父2"
            },
            {
                id: "22",
                pId: "2",
                name: "子-2-1"
            },
            {
                id: "222",
                pId: "2",
                name: "子-2-2"
            },
            {
                id: "3",
                pId: "3",
                name: "父3"
            },
            {
                id: "33",
                pId: "3",
                name: "子-3-1"
            }
        ];
        
        $.post("${ct}/msgPush_showCncid.action?id=" + userid + "",
           function(data) {
       	  	data = eval("(" + data + ")");
       	    for(var i in data) {
       		  for(var j in data[i]) {

       			  data[i]['name'] = data[i].machineName;
       			  data[i]['id'] = data[i].cncid;
       			  data[i]['pId'] = 1;
       		  }
       	  }

               zTreeNodes  = {
              		"id":1,
              		"pId": 0,
               	"name": "底部授权",
               	"cncid":1,
               	"machineModel": 0,
               	"machineName": "底层授权",
               	"open":true, 
               	nocheck: true 	
               };
               data.unshift( zTreeNodes );
               zTreeNodes = data;

               localStorage.setItem('v2',JSON.stringify(zTreeNodes));
               zTreeObj = $.fn.zTree.init($("#leftTree"), setting, zTreeNodes);
     				
               
               nodes = zTreeNodes;
               
     
     				//回显
               start();
               /**这是处理回显选中的方法*/
               
               function start() {
	               $.fn.zTree.init($("#leftTree"), setting, nodes);
	               var zTreeObj = $.fn.zTree.getZTreeObj("leftTree")
	               var zTree = zTreeObj.getCheckedNodes(false);
	               var ids = JSON.parse(localStorage.getItem('v'));

	               for (var i = 0; i < zTree.length; i++) {
                       if (zTree[i].isPush == 1) {
                           console.log(zTree[i])
                           zTreeObj.expandNode(zTree[i], true); //展开选中的
                           zTreeObj.checkNode(zTree[i], true);
                       }
                       else if(zTree[i].isPush == 0) {
                    	   zTreeObj.expandNode(zTree[i], true); //展开选中的
                           zTreeObj.checkNode(zTree[i], false);
                       }
	
	               }
     		}
        
        });
        
		
        function zTreeOnClick(event, treeId, treeNode) {

            var treeObj = $.fn.zTree.getZTreeObj("leftTree"),
                nodes = treeObj.getCheckedNodes(true),
                v = [];
            for (var i = 0; i < nodes.length; i++) {
                v.push(nodes[i].id);
               

            }

            localStorage.setItem('v', JSON.stringify(v));
        };
        
      //授权
	   	  function save() {
	   		 	var ids = JSON.parse(localStorage.getItem('v')).join(',');
	   		    //如果勾选的是根节点那么弹出的就是根节点；如果勾选的是子节点，那么弹出的就是子节点，不弹出对应根节点
	   			$.post("${ct}/msgPush_saveExcelMsg.action?id="+userid, {
	   				cncid : ids,
	   				sign : parent.$('#sign').val()
	   			}, function(count) {
	   				count = eval("(" + count + ")");

	   				if (count.state == 200) {
	   					parent.$('#accredit').dialog('close');
	   					parent.$.messager.alert('成功', '操作成功！', 'info');
	   					parent.$('#dg_supermanager').datagrid('reload');
	   				} else {
	   					parent.$.messager.alert('失败', '操作失败！', 'error');
	   					parent.$('#accredit').dialog('close');
	   				}
	   			});
	   	  }
	     

       
    </script>
</body>

</html>
注：使用localStorage或者隐藏域以使用纯前端的方式模拟数据回显；保证成功之后再前后端交互更好哦。
easyui弹窗中的ztree的取值和回显

猜你喜欢
