Ztree之复选框功能（三）

复选框功能可以用作赋权操作，一般可以精确把button级别的权限

第一步：
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.ztree.core-3.5.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.ztree.excheck-3.5.min.js"></script>
</head>
<body>

第二步：
<ul id="treeDemo" class="ztree"></ul>
<input type="text" width="100px" id="get_id"><input type="button" value="获取选中节点Id" onclick="getNodesId()"><br>
<input type="text" width="100px" id="enter_id"><input type="button" value="根据id回填选中" onclick="backGetNodes($('#enter_id').val())">
</body>
<script>

第三步：
var setting = {
check: {
enable: true,
//勾选 checkbox 对于父子节点的关联关系
chkboxType: { "Y": "ps", "N": "ps" } //Y 属性定义 checkbox 被勾选后的情况；
//N 属性定义 checkbox 取消勾选后的情况；
//"p" 表示操作会影响父级节点；
//"s" 表示操作会影响子级节点。
//请注意大小写，不要改变
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId"
}
}
};

var zNodes = ${json};

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

function getNodesId(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
//获取树对象//被选中的节点的集合
     nodes = treeObj.getCheckedNodes(true); //获取输入框被勾选或未勾选的节点集合
    //checked = true 表示获取被勾选的节点集合
    //checked = false 表示获取未勾选的节点集合
     var  ids="";
     for(var i=0; i<nodes.length; i++){
     ids += nodes[i].id + ","; //用逗号拼接id
}
     ids = ids.substring(0,(ids.length-1)); //截取最后一个逗号
$("#get_id").val(ids);
}

function backGetNodes(info){ //注意要传参，参数为文本框里填的id
var infoArr = info.split(",");
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //获取树对象
for (var i=0; i<infoArr.length; i++) {
//寻找id=infoArr的节点
var node = treeObj.getNodeByParam("id", infoArr[i], null);
//将符合条件的Id设置为勾选状态
//checkNode(treeNode, checked, checkTypeFlag, callbackFlag)这个方法有四个参数
/* treeNode：需要勾选或取消勾选的节点数据
checked：checked = true 表示勾选节点, checked = false 表示节点取消勾选
checkTypeFlag：checkTypeFlag = false 表示只修改此节点勾选状态，无任何勾选联动操作
callbackFlag = false 表示执行此方法时不触发事件回调函数,省略此参数，等同于 false */
treeObj.checkNode(node, true, false);
}
}

</script>
</html>

Ztree之复选框功能（三）

猜你喜欢