ztree指定节点 设置复选框
ztree指定节点 设置复选框首先,需引入ztree的js文件<script src="../../assets/ztree/js/jquery.ztree.core-3.5.min.js"&
ztree指定节点 设置复选框
首先,需引入ztree的js文件
<script src="../../assets/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script src="../../assets/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
在请求接口成功的情况下初始化:
$.fn.zTree.init($("#tree"), Setting, data);
第一个参数为插件固定的ID,setting为树的相关配置比如(添加复选框,是否多选,相关回调),data为后台返回的ztree数据。
setting设置:
var Setting = {
data: { //这里不动
simpleData: {
enable: true,
idKey: "id",
pidKey: "pId",
rootPid: '-1'
}
},
check: {
enable: true, //这里设置是否显示复选框
chkboxType: { "Y": "", "N": "" } //设置复选框是否与 父/子 级相关联
},
view: {
showIcon: false //禁止多选
},
callback: {
onCheck: zTreeOnCheck, //点击复选框相关回调(回调名称固定)
beforeCheck : function(treeId, treeNode) { //选择复选框前相关回调
if (treeNode.isParent) {
if(treeNode.myAttr !== "1"){ //判断是否是需要显示复选框的节点
treeNode.nocheck = true; //设置复选框不显示
}
return false;
}
}
}
};
在初始化的时候就设置除了指定节点需要复选框,其他不显示复选框
var zTree = $.fn.zTree.getZTreeObj("tree"), // 获取ztree对象
node = zTree.getNodes(), //获取根节点
nodes = zTree.transformToArray(node); //遍历所有节点
if(nodes.length>0){
for(var i=0;i<nodes.length;i++){
if(nodes[i].myAttr !== "1"){ //判断需要显示复选框的条件
nodes[i].nocheck=true; //nocheck为true表示没有选择框
zTree.updateNode(nodes[i]); //刷新
}
}
}
zTree.setting.callback.onCheck(zTree, zTree.setting.treeId, node); // 调用回调
zTree.setting.callback.beforeCheck(zTree.setting.treeId, node);
function zTreeOnCheck(zTree, treeId, treeNode) {
try{
if(treeNode.myAttr == "1"){
if(treeNode.checked){
treeNode.getParentNode().checked = false;
}
}else{
treeNode.checked = false;
}
}catch(e){
$.showAlert('error',"无查找结果");
}
}
获取被选中的某某值
$("#get").click(function(){
var dataNodes = "",
nodes = zTree.getCheckedNodes(true);
if(0 === nodes.length) {
alert("请选择!");
return;
}
for(var i = 0; i < nodes.length; i++) {
dataNodes += nodes[i].id + "|";
}
alert(dataNodes);
})
其他参考https://blog.csdn.net/lyyxp/article/details/50846690###;
一般情况下,通过zTree官方API的方法获取得到的是一个包含所有子节点的根节点(子节点都处于 children 属性下)
var treeObj = $.fn.zTree.getZTreeObj(“tree");
var nodes = treeObj.getNodes();
当我们需要一次获取所有树节点的时候,有两种方法:
一种是通过递归的方式(此处就不提及了)。
另一种就是通过zTreet提供的方法:
var treeObj = $.fn.zTree.getZTreeObj(”tree“);
var node = treeObj.getNodes();
var nodes = treeObj.transformToArray(node);
这种方法得到的就是整颗树的所有节点集合
Ztree 树插件 树节点名称太长的解决方案(给背景div加滚动条):https://www.cnblogs.com/danywdd/p/5588136.html
使用省略号方法:使用addDiyDom http://blog.csdn.net/zhengbo0/article/details/17759543
var setting = {
view: {
addDiyDom: addDiyDom
}
};
function addDiyDom(treeId, treeNode) {
var spaceWidth = 5;
var switchObj = $("#" + treeNode.tId + "_switch"),
icoObj = $("#" + treeNode.tId + "_ico");
switchObj.remove();
icoObj.parent().before(switchObj);
var spantxt = $("#" + treeNode.tId + "_span").html();
if (spantxt.length > 17) {
spantxt = spantxt.substring(0, 17) + "...";
$("#" + treeNode.tId + "_span").html(spantxt);
}
}
**有checkbox时**
function addDiyDom(treeId, treeNode) {
var spaceWidth = 5;
var switchObj = $("#" + treeNode.tId + "_switch"),
checkObj = $("#" + treeNode.tId + "_check"),
icoObj = $("#" + treeNode.tId + "_ico");
switchObj.remove();
checkObj.remove();
icoObj.parent().before(switchObj);
icoObj.parent().before(checkObj);
var spantxt = $("#" + treeNode.tId + "_span").html();
if (spantxt.length > 17) {
spantxt = spantxt.substring(0, 17) + "...";
$("#" + treeNode.tId + "_span").html(spantxt);
}
}
另外,设置node节点checked选中,有两种方法实现:
(1)、zTree.checkNode(node, true, true);
(2)、node.checked = true;
取消当前所有被选中节点的选中状态
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.cancelSelectedNode();
取消当前第一个被选中节点的选中状态
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
treeObj.cancelSelectedNode(nodes[0]);
}
详情看ztree API [ztree API](http://www.treejs.cn/v3/api.php
回复资料获得视频资料
更多推荐

所有评论(0)