z-Tree-checkbox

引入z-Tree  css/js/不要忘记excheck.js

//html部分

<div>

<input type="text" v-model="batchNo" class="batchNo" readonly=true />
     <div id="batchNoBox" class="menuContent ztreeMC" style="position: absolute;display:none;top: 32px;z-index:9999;">
          <ul id="batchNoZtree" class="ztree accountRoleTree" ></ul>
     </div>

</div>

//css部分

.accountRoleTree { margin-top: 0 !important;width: 180px !important; height: 200px !important;}

//js部分

var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
    callback: {
        onCheck: GetCheckedAll,

beforeClick: GetcheckNode
    },
    check: {
        enable: true
        //,chkStyle: "checkbox"
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    view: {

showIcon: false

}
};

var nodes={name:"1",name:"2"}

zTreeObj = $.fn.zTree.init($("#batchNoZtree"), setting, nodes);
function GetCheckedAll() {
     event.stopPropagation();
     var treeObj = $.fn.zTree.getZTreeObj("batchNoZtree");
     var nodes = treeObj.getCheckedNodes(true);
     VM.$data.batchNoList =[];//= "name--id--pid\n";
     for (var i = 0; i < nodes.length; i++) {
         VM.$data.batchNoList.push(nodes[i].name);
     };
     VM.$data.batchNo= VM.$data.batchNoList.join(",");
};

function GetcheckNode(e, treeId, treeNode){
event.stopPropagation();
var treeObj = $.fn.zTree.getZTreeObj("batchNoZtree");
if(treeId.checked){
treeObj.checkNode(treeId, false, false);
}else{
treeObj.checkNode(treeId, true, true);
}
GetCheckedAll();

};

$('document').click(function(e){
      $('#batchNoBox').hide();
});

$('.batchNo').on('click',function(){
     event.stopPropagation();
     if($('#batchNoBox').is(':visible')){
         $('#batchNoBox').hide();
     }else{
         $('#batchNoBox').show();
     }
});