找个高手帮忙看下 zTree 问题着急~

增加beforeChecked判断下其他地区是否选择过，选过return false阻止选择。。看下面的，红色是新增的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ztree问题请教</title>
<link type="text/css" rel="stylesheet" href="http://www.ztree.me/v3/css/zTreeStyle/zTreeStyle.css" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.ztree.me/v3/js/jquery.ztree.core-3.5.js"></script>
<script src="http://www.ztree.me/v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
    $(function () {
        //弹框显示
        function autoWidth() {
            var winwidth = $(window).width(), winHei = $(document).height();
            var tkObj = $(".kufang_pop");
            $("#kufang_bg").css({ 'width': winwidth, 'height': winHei, "display": 'block' }).show();
            tkObj.show();
            zTreeOnCheck('reset');
        }
        $(window).resize(function () {
            //判断一下当前是否是显示状态
            if ($("#kufang_pop").attr("style") == "block") {
                autoWidth();
            }
        });
        /*关闭弹框*/
        var closePop = function (id, bjid) {
            var clickObj = $(id);
            clickObj.click(function () {
                $(this).parent().parent().fadeOut("200", function () { $(bjid).hide() });            })
        }
        closePop(".kefu_close", "#kufang_bg");
        /*************一下是zTree的JS****************************/        var setting = {
            check: { enable: true },
            data: { simpleData: { enable: true} },
            callback: { onCheck: zTreeOnCheck, beforeCheck: zTreeBeforeCheck },
            view: { showIcon: true }
        }
        var settingRight = {
            check: { enable: false },
            data: { simpleData: { enable: true} },
            view: { showIcon: true, showLine: false }
        }
        var treeNodes = [
        { id: 1, pId: 0, name: "节点 1" }, //本身id，父id，本身文本
        {id: 11, pId: 1, name: "节点 1-1" },
        { id: 111, pId: 11, name: "节点 1-1-1" },
        { id: 112, pId: 11, name: "节点 1-1-2" },
        { id: 12, pId: 1, name: "节点 1-2" },
        { id: 121, pId: 12, name: "节点 1-2-1" },
        { id: 122, pId: 12, name: "节点 1-2-2" },
        { id: 2, pId: 0, name: "节点 2" },
        { id: 21, pId: 2, name: "节点 2-1" },
        { id: 22, pId: 2, name: "节点 2-2" },
        { id: 221, pId: 22, name: "节点 2-2-1" },
        { id: 222, pId: 22, name: "节点 2-2-2" },
        { id: 23, pId: 2, name: "节点 2-3" }
    ];        var NewzNodes;
        function zTreeOnCheck(event, treeid, treeNode) {
            var zTreeleftNodeObj = $.fn.zTree.getZTreeObj("tree");
            if (event === 'reset') {
                zTreeleftNodeObj.checkAllNodes(false); //重置树，不勾选
                //依据上次选择的内容初始化节点的勾选
                var ids = inputText.attr('ids');
                if (ids) {
                    var arr = ids.split(','), node;
                    for (var i = 0; i < arr.length; i++) {
                        node = zTreeleftNodeObj.getNodeByParam('id', arr[0]);
                        zTreeleftNodeObj.checkNode(node, true, true);
                    }
                }
            }
            var nodesarr = zTreeleftNodeObj.getCheckedNodes(true);
            NewzNodes = [];            for (var i in nodesarr) {
                NewzNodes.push({ id: nodesarr[i].id, open: true, pId: nodesarr[i].pId, name: nodesarr[i].name });
            }
            showCheckNodes(NewzNodes);
        }
        function zTreeBeforeCheck(treeid, treenode) {//勾选前判断其他选项是否包含选中的id，已经选过return false阻止勾选
            var checkedIds = ',' + $('div.kufang_div input.selected').not(inputText).map(function () { return this.getAttribute('ids') }).get().join(',') + ',';
            return checkedIds.indexOf(',' + treenode.id + ',') == -1;//选过return false阻止勾选
        }
        //左侧选中的 show在右侧区域
        function showCheckNodes(selNodes) {
            if (!selNodes) return false;
            $("#nodesRight").html('');
            $.fn.zTree.init($("#nodesRight"), settingRight, selNodes);
        }
        $(document).ready(function () {
            var ku_obj = $(".kufang_div");
            ku_obj.each(function () {
                var _this = $(this);
                _this.children(".shouhuo_btn").click(function () {
                    var _thisInput = $(this).parent().find("input[type='checkbox']");
                    if (!_thisInput.is(":checked")) {
                        alert("请选择√");
                    } else {
                        inputText = $(this).next(); //获取存储选中值的控件
                        autoWidth();
                    }
                });
            });
            $.fn.zTree.init($("#tree"), setting, treeNodes);
        });
    })    var inputText
    function setData() {
        var t = $.fn.zTree.getZTreeObj("nodesRight");
        if (!t) {alert('请选择节点！');  return}
        var  nodes = t.getNodes(), arr = t.transformToArray(nodes); //转为数组遍历叶子节点
        var text = '', ids = '';
        for (var i = 0; i < arr.length; i++) {
            if (!arr[i].isParent) {//叶子节点
                text += '，' + arr[i].name;
                ids += ','+arr[i].id;
            }
        }
        inputText.attr('ids', ids.substring(1)).val(text.substring(1));
        $('div.kufang_pop a:eq(0)').trigger('click');
    }
</script>
<style type="text/css">
p{padding:0px;margin:0px}
.oa_center_sq_chakan{margin-left: 6px; background:#fff;padding-bottom:5px; position:relative;}
.oa_center_sq_chakan h2{height: 27px;line-height: 27px;color: #000;background: #ddd;text-indent: 15px;}
.oa_center_sq_chakan h2 i{width: 24px;height: 24px;display: inline-block;background: url("../images/caozuo_btn.png") no-repeat -365px -28px;position: absolute;top: 2px;left:100px;}
.oa_center_sq_chakan h2.cur i{width: 24px;height: 24px;display: inline-block;background: url("../images/caozuo_btn.png") no-repeat -365px 0px;position: absolute;top: 2px;left:100px;}
#kufang_bg {display: none;position: absolute;top: 0px;left: 0px;right: 0px;background: #000;filter: alpha(opacity=50);opacity: 0.5;z-index: 1002;}
.kufang_pop{display:none;width:480px; min-width: 475px; height: auto; background:#fff;position: fixed;_position: absolute;left: 50%;top:40%; z-index:1003;margin: -160px 0 0 -240px;border: 1px solid #E2E2E2;}
.kufang_pop .Pop_Title{ padding-top: 15px;height: 19px;background: none;}
.kufang_pop .Pop_Title p{width:100%;position: absolute;left: 0px;top: 10px;height: 23px;text-align: left;padding-left:10px;line-height: 23px;background: #2086DF;color: #fff;}
.kufang_pop .Pop_Title a{width: 12px;height: 12px;font-size: 0px;position: absolute;right: 0px;background:#fff url("../images/Pop_close.png") no-repeat;}
.kufang_pop .Pop_Title i{width: 10px;height: 10px;position: absolute;right: -11px;top: 33px;background:url("../images/Pop__jiao.png") no-repeat;}
.kufang_pop .TreeLayout{height:322px;clear: left;padding: 0 10px 10px; position: relative;}
.kufang_pop .TreeLayout i{width: 20px;display: inline-block;background: url("../images/direction.jpg") no-repeat;position: absolute;left: 48%;top: 46%;}
ul.ztree {margin-top:10px;border: 1px solid #ccc;background:#E4EEFA;width:250px;height:360px;overflow-y:scroll;overflow-x:auto;}
div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}
div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}
div.settree_Width_l {width: 215px;height: 322px;float: left;margin-right: 25px;}
div.settree_Width_l ul.ztree,div.settree_Width_r ul.ztree{height: 300px;width: 200px;}
div.settree_Width_r{float: left;}
.Sub_info{text-align:center;padding-bottom: 10px;}
.Sub_Data{width: 100%;text-align: center;margin-bottom: 10px;}
.Sub_Data .Tree_Btn{width: 95px;height: 27px;line-height: 27px;background: #2086DF;color: #fff;text-align: center;border: 0px;cursor: pointer;display: inline-block;}
</style>
</head>

<body>
<div class="OA_suoshu oa_center_sq_chakan">
    <h2>所属库房</h2>
    <div class="kufang_div">
        <label for="bjdxkf"><input type="checkbox" name="bjdxkf" class="OA_kf_check" id="bjdxkf"><span>北京大兴库房</span></label>
        <input type="button" class="shouhuo_btn" value="选择收货城市" id="J_kufang"><input type="text" readonly class="selected" style="width:300px"/>
    </div>
    <div class="kufang_div">
        <label for="ywkf"><input type="checkbox" name="ywkf" class="OA_kf_check" id="ywkf"><span>义乌库房</span></label>
        <input type="button" class="shouhuo_btn" value="选择收货城市"><input type="text" readonly class="selected" style="width:300px"/>
    </div>
</div>

<div id="kufang_bg" style="width: 1253px; height: 614px; display: none;"></div>
<div class="kufang_pop" style="display: none;">
        <div class="Pop_Title"><p>添加</p><a href="javascript:;" class="kefu_close">close</a><i> </i></div>
        <div class="TreeLayout zhiwei_see">
            <div class="zTreeDemoBackground settree_Width_l left">
                <ul id="tree" class="ztree"></ul>
            </div>
            <div class="settree_Width_r right">
                <ul id="nodesRight" class="ztree">

                </ul>
            </div>
            <i> </i>
        </div>
        <div class="Sub_Data">
            <input type="button" class="Tree_Btn" value="提交数据" onclick="setData()">
        </div>
    </div>

</body>
</html>
$(function(){
//点击下拉列表
$("#dropdown p").click(function(){
var hideMenu = $("#dropdown ul");
if(hideMenu.css("display") == "none"){
hideMenu.slideDown('fast');
}else{
hideMenu.slideUp('fast');
}
})
//点击选中的菜单赋值
$("#dropdown ul a").click(function(){
var curText = $(this).text();
$("#dropdown p").html(curText);
var value = $(this).attr("rel");
$("#dropdown p").attr("selval",value);
$(this).closest("ul").hide();
});

//弹框显示
function autoWidth(id){
var winwidth = $(window).width(),winHei = $(document).height();
var tkObj = $(".kufang_pop");
$("#kufang_bg").css({'width':winwidth,'height':winHei,"display":'block','z-index':1000}).show();
tkObj.show();
var kfName = showkfName(id);
$(".Pop_Title p").html("添加  "+kfName);
}
//autoWidth();
$(window).resize(function(){
//判断一下当前是否是显示状态
if($("#kufang_pop").attr("style") =="block"){
autoWidth();
}
});
/*关闭弹框*/
var closePop = function(id,bjid){
var clickObj = $(id);
clickObj.click(function(){
$(this).parent().parent().fadeOut("200",function(){$(bjid).hide()});
})
}
closePop(".kefu_close","#kufang_bg"); var setting = {
check:{enable:true},
data:{simpleData:{enable:true}},
callback:{onCheck:zTreeOnCheck},
view:{showIcon:true}
}
var settingRight = {
check:{enable:false,chkDisabledInherit: true},
data:{simpleData:{enable:true}},
view:{showIcon:true,showLine:false}
}
var treeNodes =[
{ id:1, pId:0, name:"节点 1",open:true},//本身id，父id，本身文本
{ id:11, pId:1, name:"节点 1-1",},
{ id:111, pId:11, name:"节点 1-1-1"},
{ id:112, pId:11, name:"节点 1-1-2"},
{ id:12, pId:1, name:"节点 1-2"},
{ id:121, pId:12, name:"节点 1-2-1"},
{ id:122, pId:12, name:"节点 1-2-2"},
{ id:2, pId:0, name:"节点 2",open:true},
{ id:21, pId:2, name:"节点 2-1"},
{ id:22, pId:2, name:"节点 2-2"},
{ id:221, pId:22, name:"节点 2-2-1"},
{ id:222, pId:22, name:"节点 2-2-2"},
{ id:23, pId:2, name:"节点 2-3"}
];
//show点击的是那一库房
var showkfName = function(id){
var name="";
if(id=="bjdxkf"){
name = "北京大兴库房";
}else{
name = "义乌库房";
}
return name
} //获取节点展现在右侧区域
var NewzNodes;
function zTreeOnCheck(event,treeid,treeNode){
var zTreeleftNodeObj = $.fn.zTree.getZTreeObj("tree");
var nodesarr = zTreeleftNodeObj.getCheckedNodes(true);
NewzNodes = [];
for(var i in nodesarr){
NewzNodes.push({id:nodesarr[i].id,chkDisabled:true,open:true,pId:nodesarr[i].pId,name:nodesarr[i].name});
}
showCheckNodes(NewzNodes);
} //左侧选中的 show在右侧区域
function showCheckNodes(selNodes){
if(!selNodes) return false;
$("#nodesRight").html('');
var treeObj = $.fn.zTree.init($("#nodesRight"),settingRight,selNodes);
}

$(document).ready(function(){
//获取右侧节点
var treeObj = $.fn.zTree.init($("#tree"),setting,treeNodes);//左侧区域
var treeBox = $("#J_kufang");

//点击北京库房
$("#J_bjkufang").click(function(){
var check = $(this).parent().find("input[name=bjdxkf]");
var curID = $(this).parent().find("input").attr("id");//这个是input[name=checkbox]的id
if(check.is(":checked")){
var cdArr=function(){
var hiddenVal=$('#J_ywkf_hidden').val();
if(hiddenVal.length){
return hiddenVal.split(',');
}else{
return [];
}
}();
$.each(treeObj.getNodes(),function(){
treeObj.setChkDisabled(this,false,false,true);
});
var filterNode;
for(var i=0;i<cdArr.length;i++){
filterNode=treeObj.getNodesByParam('id',cdArr[i])[0];
treeObj.setChkDisabled(filterNode,true);
}
autoWidth(curID);//弹框show
treeBox.data('tarBtn','A');
//查看选中的节点然后传递到右侧
var selNodes = treeObj.getCheckedNodes(true);
var selArrNode =[];
for(var i in selNodes){
selArrNode.push({id:selNodes[i].id,open:true,pId:selNodes[i].pId,name:selNodes[i].name});
}
//展示在右侧区域
showCheckNodes(selArrNode);
}else{
alert("请选择√");
return false;
}
})
//点击义乌库房
$("#J_ywkufang").click(function(){
var check = $(this).parent().find("input[name=ywkf]");
var curID = $(this).parent().find("input").attr("id");//这个是input[name=checkbox]的id
if(check.is(":checked")){
var cdArr=function(){
var hiddenVal=$('#J_bjkf_hidden').val();
if(hiddenVal.length){
return hiddenVal.split(',');
}else{
return [];
}
}();
$.each(treeObj.getNodes(),function(){
treeObj.setChkDisabled(this,false,false,true);
});
var filterNode;
for(var i=0;i<cdArr.length;i++){
filterNode=treeObj.getNodesByParam('id',cdArr[i])[0];
treeObj.setChkDisabled(filterNode,true);
}
autoWidth(curID);//弹框show
treeBox.data('tarBtn','B');

//查看选中的节点然后传递到右侧
var selNodes = treeObj.getCheckedNodes(true);
var selArrNode =[];
for(var i in selNodes){
selArrNode.push({id:selNodes[i].id,open:true,pId:selNodes[i].pId,name:selNodes[i].name});
}
//展示在右侧区域
showCheckNodes(selArrNode);
}else{
alert("请选择√");
return false;
}
})

//点击提交数据
$(".Tree_Btn").on("click",function(){
//获取ztree节点
var cdNodes=treeObj.getCheckedNodes(true);
var cdArr=[];
var temId;
$.each(cdNodes,function(){
temId=this.id;
cdArr.push(temId);
});
if(!cdArr.length){$(".kufang_pop").css("z-index",1000);alert("请选择节点不能为空");return false;}
if(treeBox.data('tarBtn')=="A"){
$('#J_bjkf_hidden').val(cdArr);
}else if(treeBox.data('tarBtn')=="B"){
$('#J_ywkf_hidden').val(cdArr);
}
treeBox.css('display','hidden').find("#nodesRight").html("");
$("#kufang_bg").hide();
}); });})代码~

调试易

找个高手帮忙看下 zTree 问题着急~

解决方案 »

找个高手帮忙看下 zTree 问题 着急~

解决方案 »

找个高手帮忙看下 zTree 问题着急~