ztree不显示checkbox - 开源中国社区
当前访客身份：游客 [
当前位置：
已经把setting的check属性设置好，如下：
enable : true
但是还是不显示节点前面的checkbox，不知道为什么，zTree新手，请多多指教，谢谢。
共有1个答案
<span class="a_vote_num" id="a_vote_num_
我找到问题了，只引入了zTree的核心js引入excheck的js
更多开发者职位上
有什么技术问题吗？
Triangl...的其它问题
类似的话题zTree下拉菜单多级菜单多选实现 - 推酷
zTree下拉菜单多级菜单多选实现
惯例，先上图：
这是在一个项目中，为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。
在实际的开发过程中，本来zTree也是可以满足需求的，但是zTree多选的话需要checkbox选择框，这样导致样式风格和项目总体不一致。下面是根据ztree所修改的内容。
如上图 这是个outlook样式的菜单。
我们只需要简单的右键，查看代码，就可以把源码拿下来看看。
我们需要的源码如下：
&SCRIPT type=&text/javascript&&
var curMenu = null, zTree_Menu = null;
var setting = {
showLine: false,
showIcon: false,
selectedMulti: false,
dblClickExpand: false,
addDiyDom: addDiyDom
simpleData: {
enable: true
callback: {
beforeClick: beforeClick
//这里就是下拉列表的格式，通过id和pid控制所属的节点和级别
var zNodes =[
{ id:1, pId:0, name:&文件夹&, open:true},
{ id:11, pId:1, name:&收件箱&},
{ id:111, pId:11, name:&收件箱1&},
{ id:112, pId:111, name:&收件箱2&},
{ id:113, pId:112, name:&收件箱3&},
{ id:114, pId:113, name:&收件箱4&},
{ id:12, pId:1, name:&垃圾邮件&},
{ id:13, pId:1, name:&草稿&},
{ id:14, pId:1, name:&已发送邮件&},
{ id:15, pId:1, name:&已删除邮件&},
{ id:3, pId:0, name:&快速视图&},
{ id:31, pId:3, name:&文档&},
{ id:32, pId:3, name:&照片&}
function addDiyDom(treeId, treeNode) {
var spaceWidth = 5;
var switchObj = $(&#& + treeNode.tId + &_switch&),
icoObj = $(&#& + treeNode.tId + &_ico&);
switchObj.remove();
icoObj.before(switchObj);
if (treeNode.level & 1) {
var spaceStr = &&span style='display: inline-width:& + (spaceWidth * treeNode.level)+ &px'&&/span&&;
switchObj.before(spaceStr);
function beforeClick(treeId, treeNode) {
if (treeNode.level == 0 ) {
var zTree = $.fn.zTree.getZTreeObj(&treeDemo&);
zTree.expandNode(treeNode);
return false;
return true;
$(document).ready(function(){
var treeObj = $(&#treeDemo&);
$.fn.zTree.init(treeObj, setting, zNodes);
zTree_Menu = $.fn.zTree.getZTreeObj(&treeDemo&);
curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
zTree_Menu.selectNode(curMenu);
treeObj.hover(function () {
if (!treeObj.hasClass(&showIcon&)) {
treeObj.addClass(&showIcon&);
}, function() {
treeObj.removeClass(&showIcon&);
如上& 这是我们需要的源码&&& 但是有些并不需要，经过修改后如下：
var zNodes = [];
//数据的格式已经在上一段代码中表示了
这里我就去掉了
//人员列表
url:&searchPeopleJson&,
async:false,
success: function(resultData){
var result= eval(&(&+resultData+&)&);
//这是获取下拉列表的数据
因为我的是在数据库中获取的
function listShow(divid,btnId,btnIndex) {
var ulId=&&;
pIndex=&&;
selectCount=false;
$(&#&+btnId).attr(&value&, &&);
$(&#&+btnIndex).attr(&value&, &&);
if(divid==&div1personTree1&){
ulId=&personTree1&;
}else if(divid==&div2personTree2&){
ulId=&personTree2&;
var curMenu = null, zTree_Menu = null;
var setting = {
showLine: false,
showIcon: false,
selectedMulti: true,
dblClickExpand: true,
addDiyDom: addDiyDom
simpleData: {
enable: true
callback: {
beforeClick: beforeClick
function addDiyDom(treeId, treeNode) {
var spaceWidth = 5;
var switchObj = $(&#& + treeNode.tId + &_switch&),
icoObj = $(&#& + treeNode.tId + &_ico&);
switchObj.remove();
icoObj.before(switchObj);
if (treeNode.level & 1) {
var spaceStr = &&span style='display: inline-width:& + (spaceWidth * treeNode.level) + &px'&&/span&&;
switchObj.before(spaceStr);
function beforeClick(treeId, treeNode) {
if (treeNode.isParent) {
var zTree = $.fn.zTree.getZTreeObj(ulId);
zTree.expandNode(treeNode);
return false;
return true;
$(document).ready(function () {
var treeObj = $(&#&+ulId);
$.fn.zTree.init(treeObj, setting, zNodes);
zTree_Menu = $.fn.zTree.getZTreeObj(ulId);
//curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
// zTree_Menu.selectNode(curMenu);
treeObj.addClass(&showIcon&);
/* if($(&#&+btnId).attr(&readonly&)==&readonly&){
//$(&#&+divid).css(&display&, &block&);
showMenu(divid,btnId);
return false;
function showMenu(divid,btnId) {
var cityObj = $(&#&+btnId);
var cityOffset = $(&#&+btnId).offset();
$(&#&+divid).css(&display&, &block&).slideDown(&fast&);
$(&body&).bind(&mousedown&,{btnId:btnId,divid:divid}, onBodyDown);
function hideMenu(divid,btnId) {
$(&#&+divid).fadeOut(&fast&);
$(&body&).unbind(&mousedown&, onBodyDown);
function onBodyDown(event) {
if (!(event.target.id == event.data.btnId || event.target.id == event.data.divid || $(event.target).parents(&#&+event.data.divid).length&0)) {
hideMenu(event.data.divid,event.data.btnId);
这是我根据项目实际情况而更改的&&& 我们将原来的鼠标浮动到上面之后显示图标给改成一直显示&& 然后将除第一级以外的菜单需要点击图标才能展开和关闭改成点击标题就可以展开和关闭了&&&& 方便用户的操作。&& 下面的三个方法是用来显示和隐藏下拉列表的，当文本框失去焦点的时候触发。我们的html代码如下：
&label for=&txtChargePersonS& class=&col-sm-2 control-label&&第二负责人&/label&
&div id=&cyPersonDiv& class=&col-sm-4&&
&input type=&hidden& id=&txtHiddenSPerson& name=&tpj.cyLeader& /&
&input id=&txtChargePersonS& readonly personIndex=&0& onfocus=&listShow('div2personTree2','txtChargePersonS','txtHiddenSPerson');& type=&text& class=&form-control zTreeDemoBackground& placeholder=&第二负责人&&
&div id=&div2personTree2& style=&display:z-index:1000; position: & name=&province& type=&selectbox& class=&zTreeDemoBackground&&
&ul id=&personTree2& style=& height:175& class=&ztree&&&/ul&
因为我的项目里面多处用到这个下拉菜单，因此我通过参数传递的方式将id传递到方法内部。
如此，我们就可以通过点击文本框显示下拉列表&&&& 当文本框失去焦点之后隐藏下拉列表。
那么数据有了& 显示没问题了&&& 怎么才能让下拉列表在点击的时候将点击的值放到文本框中呢？
我们在使用zTree的时候需要下载ztree的几个js文件，我们可以在jquery.ztree.core-3.5.js中去实现。
在jquery.ztree.core-3.5.js中有个_setting的初始化代码，显示属性的初始化还有事件的初始化等等，如下图：
这是下拉列表的点击事件，我们写上自己的事件。
请看下面的代码：
var value=&&; //文本框中显示的值 例：张三，李四，王五
var pIndex=&&; //选择值得id 例：1，2，3
var selectCount=false;
//表示是否为第一次选择
用于清除拼接的逗号
function OnListClick(event, treeId, treeNode, clickFlag) {
if (treeNode.isParent) {
value+=&,&+treeNode.
pIndex+=&,&+treeNode.
if(selectCount==false){
//这里清除第一个逗号
value=value.substr(1,value.length);
pIndex=pIndex.substr(1,pIndex.length);
selectCount=true;
var valueObj=&&;
var pIndexObj=&&;
if(treeId==&personTree1&){
$(&#div1personTree1&).css(&display&,&none&);
$(&#txtChargePerson&).attr(&value&, treeNode.name);
$(&#txtHiddenPerson&).attr(&value&, treeNode.id);
}else if(treeId==&personTree2&){
valueObj=$(&#txtChargePersonS&);
pIndexObj=$(&#txtHiddenSPerson&);
valueObj.attr(&value&, value); //选择多项的时候拼接的值
pIndexObj.attr(&value&,pIndex);//选择多项的时候拼接的id
}else if(treeId==&personTree3&){
$(&#div3personTree3&).css(&display&,&none&);
$(&#txtChargePersonItem&).attr(&value&, treeNode.name);
$(&#txtHiddenCPerson&).attr(&value&, treeNode.id);
}else if(treeId==&personTree4&){
valueObj=$(&#txtExaminePerson&);
pIndexObj=$(&#txtHiddenEPerson&);
valueObj.attr(&value&, value);
pIndexObj.attr(&value&,pIndex);
}else if(treeId==&personTree5&){
valueObj=$(&#txtDesignPerson&);
pIndexObj=$(&#txtHiddenDPerson&);
valueObj.attr(&value&, value);
pIndexObj.attr(&value&,pIndex);
如上代码&&&& 因为我的是多个地方使用&&& 所有if& else& 弄了多个&&&&& 需要的话 参照其中一个就可以了
修改就是这么简单，如果有更好的方案欢迎分享和讨论。
技术交流群：
点击加入QQ群：
不管你遇到了什么问题，我们绝不会让你独自去面对！
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致ztree控制checkbox可选或者不可选例子-js教程-网页制作-壹聚教程网ztree控制checkbox可选或者不可选例子
ztree控制checkbox是树型菜单非常重要的操作了，下面我们来看一篇关于ztree控制checkbox可选或者不可选例子，希望文章能够帮助各位朋友。
1、引入ztree树相关的js文件
&link rel=&stylesheet& href=&../../../css/demo.css& type=&text/css&&
&link rel=&stylesheet& href=&../../../css/zTreeStyle/zTreeStyle.css& type=&text/css&&
&script type=&text/& src=&../../../js/jquery-1.4.4.min.js&&&/script&
&script type=&text/javascript& src=&../../../js/jquery.ztree.core-3.5.js&&&/script&
&script type=&text/javascript& src=&../../../js/jquery.ztree.excheck-3.5.js&&&/script&
注意excheck.js文件是一定要引入的，要不然会导致节点前的无法显示和操作。
2、默认设置每一个节点的nocheck属性值为true
nocheck表示无checkbox选择框，属性值设置为true，表示不会显示节点前面的checkbox选择框。所以需要我们在提供节点数据给zTree树控件之前设置好每一个节点的nocheck值为true，示例数据形如：
//ztree用于初始化的静态数据&&&&&&
var zNodes = [
{ id: 1, pId: 0, name: &随意勾选 1&, nocheck: true },
{ id: 11, pId: 1, name: &随意勾选 1-1&, nocheck: true },
{ id: 111, pId: 11, name: &无 checkbox 1-1-1&, nocheck: true },
{ id: 112, pId: 11, name: &随意勾选 1-1-2&, nocheck: true },
{ id: 12, pId: 1, name: &无 checkbox 1-2&, nocheck: true },
{ id: 2, pId: 0, name: &随意勾选 2&, nocheck: true },
3、动态设置节点前显示checkbox
想要让某个节点显示checkbox选择框，就必须要更新其nocheck属性值为false即可。核心方法如下所示：
function filter(node) {
///动态设置zTree的所有节点有checkbox
function DynamicUpdateNodeCheck() {
var zTree = $.fn.zTree.getZTreeObj(&treeDemo&);
//根据过滤机制获得zTree的所有节点&&&&&&&&&&
var nodes = zTree.getNodesByFilter(filter);
//遍历每一个节点然后动态更新nocheck属性值
for (var i = 0; i & nodes. i++) {
var node = nodes[i];
node.nocheck = //表示显示checkbox
zTree.updateNode(node);
4、ztree显示选中节点
//初使化所有被选中的节点
&&&&&&& function initChecked(){
&&&&&&&&&&&&&&& var zTree = $.fn.zTree.getZTreeObj(&resTree&);
&&&&&&&&&&&&&&& var orgId = $(&#orgId&).val();
&&&&&&&&&&&&&&& if(orgId!=null && orgId !=''){
&&&&&&&&&&&&&&&&&&& var node = zTree.getNodeByParam(&orgId&, orgId, null);&& //得到选中节点
&&&&&&&&&&&&&&&&&&& zTree.checkNode(node, true, true);&&&& &span style=&white-space:pre&&&&&&&&&& &/span& //显示选中节点
&&&&&&&&&&&&&&&&&&& zTree.Node(node);&span style=&white-space:pre&&&&&&&&&&&&&&&&&&&&& &/span& //打开选中节点的父节点
&&&&&&&&&&&&&&& }
完整代码：
&!DOCTYPE html&
&&& &title&ZTREE DEMO - 默认zTree几点无checkbox动态设置节点checkbox出现&/title&
&&& &meta http-equiv=&content-type& content=&text/ charset=UTF-8&&
&&& &link rel=&stylesheet& href=&../../../css/demo.css& type=&text/css&&
&&& &link rel=&stylesheet& href=&../../../css/zTreeStyle/zTreeStyle.css& type=&text/css&&
&&& &script type=&text/javascript& src=&../../../js/jquery-1.4.4.min.js&&&/script&
&&& &script type=&text/javascript& src=&../../../js/jquery.ztree.core-3.5.js&&&/script&
&&& &script type=&text/javascript& src=&../../../js/jquery.ztree.excheck-3.5.js&&&/script&
&&& &script type=&text/javascript&&
&&&&&&& &!--
&&&&&&& var setting = {
&&&&&&&&&&& check: {
&&&&&&&&&&&&&&& enable: true,
&&&&&&&&&&&&&&& nocheckInherit: false
&&&&&&&&&&& },
&&&&&&&&&&& data: {
&&&&&&&&&&&&&&& simpleData: {
&&&&&&&&&&&&&&&&&&& enable: true
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&& };
&&&&&&& //ztree用于初始化的静态数据&&&&&&&
&&&&&&& var zNodes = [
&&&&&&&&&&& { id: 1, pId: 0, name: &随意勾选 1&, nocheck: true },
&&&&&&&&&&& { id: 11, pId: 1, name: &随意勾选 1-1&, nocheck: true },
&&&&&&&&&&& { id: 111, pId: 11, name: &无 checkbox 1-1-1&, nocheck: true },
&&&&&&&&&&& { id: 112, pId: 11, name: &随意勾选 1-1-2&, nocheck: true },
&&&&&&&&&&& { id: 12, pId: 1, name: &无 checkbox 1-2&, nocheck: true },
&&&&&&&&&&& { id: 2, pId: 0, name: &随意勾选 2&, nocheck: true },
&&&&&&& ];
&&&&&&& //过滤节点的机制 直接return node表示不做任何过滤
&&&&&&& function filter(node) {
&&&&&&&&&&&
&&&&&&& ///动态设置zTree的所有节点有checkbox
&&&&&&& function DynamicUpdateNodeCheck() {
&&&&&&&&&&& var zTree = $.fn.zTree.getZTreeObj(&treeDemo&);
&&&&&&&&&&& //根据过滤机制获得zTree的所有节点&&&&&&&&&&&
&&&&&&&&&&& var nodes = zTree.getNodesByFilter(filter);
&&&&&&&&&&& //遍历每一个节点然后动态更新nocheck属性值
&&&&&&&&&&& for (var i = 0; i & nodes. i++) {
&&&&&&&&&&&&&&& var node = nodes[i];
&&&&&&&&&&&&&&& node.nocheck = //表示显示checkbox
&&&&&&&&&&&&&&& zTree.updateNode(node);
&&&&&&&&&&& }
&&&&&&& ///页面加载后&a href=&/UIweb/jquery-ztree-user-config.html& class=&keylink& title=& & target=&_blank&&初始化ztree&/a&数据且默认展开所有节点
&&&&&&& $(document).ready(function () {
&&&&&&&&&&& $.fn.zTree.init($(&#treeDemo&), setting, zNodes).expandAll(true);
&&&&&&& });
&&&&&&& //--&
&&& &/script&
&&&&&&& Checkbox nocheck 演示&/h1&
&&& &div class=&content_wrap&&
&&&&&&& &div class=&zTreeDemoBackground left&&
&&&&&&&&&&& &ul id=&treeDemo& class=&ztree&&
&&&&&&&&&&& &/ul&
&&&&&&& &/div&
&&&&&&& &div class=&right&&
&&&&&&&&&&& &p&
&&&&&&&&&&&&&&& 默认情况下设置任何节点无checkbox选择框，需要配置每一个节点的nocheck属性为true即可。&/p&
&&&&&&&&&&& &p&
&&&&&&&&&&&&&&& zTree加载完成后通过updateNode(node)方法动态更新节点的nocheck属性为false，则节点将会显示checkbox。&/p&
&&&&&&&&&&& &h3&
&&&&&&&&&&&&&&& STEP DAY&/h3&
&&&&&&&&&&& &div&
&&&&&&&&&&&&&&& &input type=&button& value=&动态设置节点有checkbox& onclick=&DynamicUpdateNodeCheck()& /&
&&&&&&&&&&& &/div&
&&&&&&& &/div&
&&& &/div&
&/html&没有了
上一页：没有了 &&&&&下一页：相关内容10:43 提问
为什么点击文字时，相应的radio或者是checkbox没有勾选
//第一个树
if(&%=value1%&!="1"){
var setting1 = {
enable: true,
chkStyle: "&%=chose1%&",
&%=type1%&Type: &%=typeValue1%&
dblClickExpand: false
simpleData: {
enable: true
callback: {
beforeClick: beforeClick,
onCheck: onCheck,
var zNodes1 =&%=value1%&;
function beforeClick(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1");
if(treeNode.id.indexOf(".")==-1){
zTree.expandNode(treeNode);
}else if(treeNode.id.indexOf(".")!=-1 &&treeNode.id.length == 3 ){
zTree.expandNode(treeNode);
zTree.checkNode(treeNode, !treeNode.checked, null, true);
function onCheck(e,treeId,treeNode){
var checkPerson1= document.getElementById("checkPerson1");
var treeObj=$.fn.zTree.getZTreeObj("treeDemo1");
nodes=treeObj.getCheckedNodes(true);
for(var i=0;i&nodes.i++){
if(nodes[i].id!=""){
id1+="{'userId':'"+nodes[i].id+"','userName':'"+nodes[i].name+"','deptId':'"+nodes[i].deptId+"','userRole':'"+nodes[i].userRole+"','nextNodeType':'"+nodes[i].nextNodeType+"'};";
//alert("pppppp"+id1);
checkPerson1.value=id1;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo1"), setting1, zNodes1);
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
按赞数排序
ztree前面是模拟的，不是checkbox，radio对象，需要自己添加onClick事件，然后调用checkNode方法进行操作
你没有用label吧？
浏览器的开发者模式下调试下，看看控制台有没有错误信息。
如果你只是想做到：点击文字，对应的radio和checkbox被选中的话，其实只需要加label标签即可
radio:&label&&input type="radio" name="sex"/&男&/label&
&label&&input type="radio" name="sex"/&女&/label&
找问题可以打开浏览器调试工具，可能是某句话错误导致后面内容没有执行
174关注|923收录
521关注|560收录
350关注|580收录
其他相似问题
相关参考资料