您的位置：首页 > 其它

Ztree之复选框功能（三）

2015-09-12 14:21 417 查看

复选框功能可以用作赋权操作，一般可以精确把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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航