html内容:
<script src="/static/Bootstrap/js/jquery/ztree/jquery.ztree.core.js"></script> <script src="/static/Bootstrap/js/jquery/ztree/jquery.ztree.excheck.js"></script> <div class="zTreeDemoBackground left"> <ul id="tree" class="ztree"> </ul> </div>
zTree.js内容:
//从后台接收zTree json格式数据,通过ajax加载到前台,默认展开根节点 $(document).ready(function(){ //加载并初始化Ztree zTree_init(); //提交数据到后台 $("#click").click(function(){ var treeObj=$.fn.zTree.getZTreeObj("tree"); var check = treeObj.getCheckedNodes(true); var files = new Array(); $.each(check,function(index,value){ if (value.type == "file"){ files.push(value.filepath); } //alert("ID:"+value.type+" NAME:"+value.name+" URL:"+value.filepath); }); alert(files); }); }); ////////////////////Custome functions: var setting = { check: { enable: true, nocheckInherit: false }, data: { simpleData: { enable: false //不使用简单类型数据 } }//, // async: { // enable: true, // type:"post", // //dataType: "text", // url: "http://10.160.25.48/sinfors/deploy_ztreedata"//, // //autoParam: ["id", "name"] // } }; //ztree用于初始化的静态数据 // var zNodes = [ // //{"nocheck": true, "name": "BACKUP", "children": [{"nocheck": true, "name": "hr-201.9-dbbackup", "children": [{"nocheck": true, "name": "uxinhr.bak"}, {"nocheck": true, "name": "zknet10.bak"}]}, {"nocheck": true, "name": "rsyncd - 副本.rar"}, {"nocheck": true, "name": "部署系统-websites-20160113.rar"}]} // //{"nocheck": true, "type": "directory", "name": "BACKUP", "children": [{"nocheck": true, "type": "directory", "name": "hr-201.9-dbbackup", "children": [{"nocheck": true, "type": "file", "name": "uxinhr.bak"}, {"nocheck": true, "type": "file", "name": "zknet10.bak"}]}, {"nocheck": true, "type": "file", "name": "rsyncd - 副本.rar"}, {"nocheck": true, "type": "file", "name": "部署系统-websites-20160113.rar"}]} // {"nocheck": true, "type": "directory", "name": "BACKUP", "children": [{"nocheck": true, "type": "directory", "name": "hr-201.9-dbbackup", "children": [{"nocheck": true, "type": "file", "name": "uxinhr.bak", "filepath": "E:\\BACKUP\\hr-201.9-dbbackup\\uxinhr.bak"}, {"nocheck": true, "type": "file", "name": "zknet10.bak", "filepath": "E:\\BACKUP\\hr-201.9-dbbackup\\zknet10.bak"}]}, {"nocheck": true, "type": "file", "name": "rsyncd - 副本.rar", "filepath": "E:\\BACKUP\\rsyncd - 副本.rar"}, {"nocheck": true, "type": "file", "name": "部署系统-websites-20160113.rar", "filepath": "E:\\BACKUP\\部署系 统-websites-20160113.rar"}]} // // { 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) { return node; } ///动态设置zTree的所有节点有checkbox function DynamicUpdateNodeCheck() { var zTree = $.fn.zTree.getZTreeObj("tree"); //根据过滤机制获得zTree的所有节点 var nodes = zTree.getNodesByFilter(filter); //遍历每一个节点然后动态更新nocheck属性值 for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; node.nocheck = false; //表示显示checkbox zTree.updateNode(node); } } ///从后台通过ajax加载ztree数据,并初始化zTree function zTree_init(){ //alert(111); $.ajax({ type: 'POST', url: 'http://10.160.25.48/sinfors/deploy_ztreedata/', //该页面返回ztree所需的json格式数据 // data:{}, dataType:'json', success:function(response,stutas,xhr){ var zNodes = new Array(); zNodes.push(response); ///页面加载后初始化zTree数据且默认不展开所有节点 //$.fn.zTree.init($("#tree"), setting, zNodes).expandAll(false); $.fn.zTree.init($("#tree"), setting, zNodes); //页面加载后初始化zTree数据 var treeObj = $.fn.zTree.getZTreeObj("tree"); //选中zTree对象 var nodes = treeObj.getNodesByParam("ancestor", true, null); //根据节点属性选择到根节点 if (nodes.length=1) { treeObj.expandNode(nodes[0], true, false, true); //自动展开根节点(第一个true),子节点不展开(第二个false) } ///加载checkbox DynamicUpdateNodeCheck(); }, error:function(xhr,errorText,errorStatus){ alert(xhr.status+' error: '+xhr.statusText); }, timeout:5000 }); }
页面内容(deploy_ztreedata):
def deploy_ztreedata(request): # print request.method # print request.POST def path_to_ztreedata(path): d = {'name': os.path.basename(path).decode('gbk').encode('u8')} if os.path.isdir(path): d['type'] = "directory" d['isParent'] = True #初始化节点数据时,根据 treeNode.children 属性判断,有子节点则设置为 true,否则为 false。否则空文件夹会显示为文件图标 d['children'] = [path_to_ztreedata(os.path.join(path,x)) for x in os.listdir(path)] else: d['type'] = "file" d['filepath'] = path.decode('gbk').encode('u8') d['isParent'] = False d['nocheck'] = True return d path = 'D:\\Root' ztreedata_dic = path_to_ztreedata(path) ztreedata_dic['ancestor'] = True ztreedataj = json.dumps(ztreedata_dic,ensure_ascii=False) return HttpResponse(ztreedataj)