关于zTree的使用
来源：互联网 发布：java fixflow流程设计 编辑：程序博客网 时间：2024/06/05 12:43
categoryUpdate.ftl
<link rel="stylesheet" href="${sdipaposRoot}/css/tools/font-awesome.min.css"><link rel="stylesheet" href="${sdipaposRoot}/css/commonPages.css"><link rel="stylesheet" href="${sdipaposRoot}/css/tools/zTreeStyle.css"><div class="w_right_content"> <div class="title"><span>信息管理--->更新目录</span></div> <form class="fx-form" id="cateUpdateForm" action="${base}/tCmmdtyCategory/updateTCmmdtyCategory.htm"> <input type="hidden" value="${entity.categoryId}" id="categoryId" name="categoryId"> <div class="fxform-tr"> <label for="">目录名称：</label> <input type="text" stype="width:600px" id="categoryName" name="categoryName" value="${entity.categoryName}" readOnly> <input class="fxform-checkbox" type="checkbox" name="manageInventory" id="manageInventory" value="on"> <label for="">是否库管 库管商品会需要录入唯一标识</label> </div> <div class="fxform-title">关联分销平台采购目录：</div> <ul class="ztree" id="categoryTree" style="margin-left:150px;"></ul> <div class="fxform-btn"> <input class="submit_btn submit-btn-modify" style="margin-left: 220px;" id="updateCate" name="updateCate" type="button" value="更新" /> <input class="submit_btn submit-btn-modify" style="margin-left: 220px;" id="cancelAdd" type="button" onclick="queryList();" value="取消" /> <!--input class="submit_btn submit-btn-modify" type="submit" value="修改" /--> </div> </form> </div> <script type="text/javascript"> function queryList(){ window.location.href=base+"/tCmmdtyCategory/queryByPage.htm"; }; if('${entity.manageInventory}'=='1'){ $('#manageInventory').attr("checked",'true'); } function onCheckNode(e,treeId,treeNode){ } //循环移除节点 function getParentNodeRemove(treeObj, node) { if(node.id == 0){ return; } var childNodes = node.children; if (typeof(childNodes) != 'undefined') { if (childNodes.length > 0) { return; }else{ var pNode = node.getParentNode(); treeObj.removeNode(node); if(pNode != null){ getParentNodeRemove(treeObj,pNode); } } } } var setting = { check: { enable: true, chkStyle: "checkbox", chkboxType: { "Y": "ps", "N": "ps" }, nocheckInherit: false }, callback:{ onCheck:onCheckNode }, data: { simpleData: { enable: true, idKey: "categoryId", pIdKey: "pCategoryId", showLine : true, check : true }, key: { name: "categoryName", url : "noUrl" } } }; var treeObj; $(function(){ var zNodes=${categoryList}; var selectedzNodes=${selectedPurList}; var otherLastNodes=${otherSociatedRel}; ztreeNode=$.fn.zTree.init($("#categoryTree"), setting, zNodes); treeObj = $.fn.zTree.getZTreeObj("categoryTree"); treeObj.expandAll(true); //初始化树 //循环选中 for (var i = 0; i < selectedzNodes.length; i++) { var node = ztreeNode.getNodeByParam("categoryId", selectedzNodes[i].purchCategoryId, null); if(node != null){ ztreeNode.checkNode(node, true, true); } } //循环disabled for(var i = 0; i < otherLastNodes.length; i++){ var node = ztreeNode.getNodeByParam("categoryId", otherLastNodes[i].purchCategoryId, null); if(node != null){ //获取父级node var pNode = node.getParentNode(); //移除节点 ztreeNode.removeNode(node); //判断父节点是否存在 if(pNode != null){ getParentNodeRemove(ztreeNode,pNode); } //ztreeNode.setChkDisabled(node, true); } } }) </script> <script src="${sdipaposRoot}/scripts/layout/jquery-3.1.1.min.js"> </script> <script src="${sdipaposRoot}/scripts/layout/echarts.common.min.js"></script> <script src="${sdipaposRoot}/scripts/common.js"></script> <script src="${sdipaposRoot}/scripts/layout/jquery.ztree.core.min.js"></script> <script src="${sdipaposRoot}/scripts/base/ztree/jquery.ztree.excheck-3.5.min.js"></script> <script src="${sdipaposRoot}/scripts/base/tip/tip.js"></script> <script src="${sdipaposRoot}/scripts/base/tip/velocity.min.js"></script> <script src="${sdipaposRoot}/easyui-1.3.6/jquery.form.js"></script> <script type="text/javascript" src="${sdipaposRoot}/js/business/category.js"></script>categoryAdd.ftl
<link rel="stylesheet" href="${sdipaposRoot}/css/tools/font-awesome.min.css"><link rel="stylesheet" href="${sdipaposRoot}/css/commonPages.css"><link rel="stylesheet" href="${sdipaposRoot}/css/tools/zTreeStyle.css"><div class="w_right_content"> <div class="title"><span>信息管理--->新增目录</span></div> <form class="fx-form" id="cateAddForm" action="${base}/tCmmdtyCategory/addTCmmdtyCategory.htm"> <div class="fxform-tr"> <label for="">目录名称：</label> <input type="text" stype="width:600px" id="categoryName" name="categoryName"> <input class="fxform-checkbox" type="checkbox" name="manageInventory"> <label for="">是否库管 库管商品会需要录入唯一标识</label> </div> <div class="fxform-title">关联分销平台采购目录：</div> <ul class="ztree" id="categoryTree" style="margin-left:150px;"></ul> <div class="fxform-btn"> <input class="submit_btn submit-btn-modify" style="margin-left: 220px;" id="saveCate" type="button" value="保存" /> <input class="submit_btn submit-btn-modify" style="margin-left: 220px;" id="cancelAdd" type="button" onclick="queryList();" value="取消" /> <!--input class="submit_btn submit-btn-modify" type="submit" value="修改" /--> </div> </form> </div> <script type="text/javascript"> function queryList(){ window.location.href=base+"/tCmmdtyCategory/queryByPage.htm"; }; function onCheckNode(e,treeId,treeNode){ } var setting = { check: { enable: true, chkStyle: "checkbox", chkboxType: { "Y": "ps", "N": "ps" }, nocheckInherit: false }, callback:{ onCheck:onCheckNode }, data: { simpleData: { enable: true, idKey: "categoryId", pIdKey: "pCategoryId", showLine : true, check : true }, key: { name: "categoryName", url : "noUrl" } } }; //循环移除节点 function getParentNodeRemove(treeObj, node) { if(node.id == 0){ return; } var childNodes = node.children; if (typeof(childNodes) != 'undefined') { if (childNodes.length > 0) { return; }else{ var pNode = node.getParentNode(); treeObj.removeNode(node); if(pNode != null){ getParentNodeRemove(treeObj,pNode); } } } } var treeObj; $(function(){ var zNodes=${categoryList}; var otherLastNodes=${sociatedLastNodes}; console.info(zNodes); ztreeNode=$.fn.zTree.init($("#categoryTree"), setting, zNodes); treeObj = $.fn.zTree.getZTreeObj("categoryTree"); treeObj.expandAll(true); //循环disabled for(var i = 0; i < otherLastNodes.length; i++){ var node = ztreeNode.getNodeByParam("categoryId", otherLastNodes[i].purchCategoryId, null); if(node != null){ //获取父级node var pNode = node.getParentNode(); console.log(pNode) //移除节点 ztreeNode.removeNode(node); //判断父节点是否存在 if(pNode != null){ getParentNodeRemove(ztreeNode,pNode); } //ztreeNode.setChkDisabled(node, true); } } }) </script> <script src="${sdipaposRoot}/scripts/layout/jquery-3.1.1.min.js"> </script> <script src="${sdipaposRoot}/scripts/layout/echarts.common.min.js"></script> <script src="${sdipaposRoot}/scripts/common.js"></script> <script src="${sdipaposRoot}/scripts/layout/jquery.ztree.core.min.js"></script> <script src="${sdipaposRoot}/scripts/base/ztree/jquery.ztree.excheck-3.5.min.js"></script> <script src="${sdipaposRoot}/scripts/base/tip/tip.js"></script> <script src="${sdipaposRoot}/scripts/base/tip/velocity.min.js"></script> <script src="${sdipaposRoot}/easyui-1.3.6/jquery.form.js"></script> <script type="text/javascript" src="${sdipaposRoot}/js/business/category.js"></script>category.js
var operTip = "新增成功";$(function () { $('#addBtn').click(function () { var temp = base + "/tCmmdtyCategory/initAdd.htm"; window.location.href = temp; }); $('#saveCate').click(function(){ var a = treeObj.getCheckedNodes(true); if ($('#categoryName').val() == "") { $.fxAlert.Alert("提示", "请输入销售目录名称！"); return } if (a.length == 0) { $.fxAlert.Alert("提示", "请先为销售目录选择三级采购目录之后保存!"); return false; } var f = ""; for (var d = 0; d < a.length; d++) { var e = a[d]; if (e.categoryLevel == "3") { f += e.categoryId + ","; } } if (f == "") { $.fxAlert.Alert("提示", "请先为销售目录选择三级采购目录之后保存!"); return false; } var c = $("#cateAddForm"); var b = { dataType: "json", beforeSubmit: function (j, h, g) { var i = new Object(); i.name = "categoryCodes"; i.value = f; j.push(i); }, success: function (g) { console.log(g); if (g.success) { $(".modal1").hide(); $.fxAlert.Alert("提示", operTip); // 显示所有的目录信息 window.location.href = base + '/tCmmdtyCategory/queryByPage.htm'; } else { $.fxAlert.Alert("提示", g.message); } }, error: function (g, i, h) { $.fxAlert.Alert("提示", "服务器内部错误!"); } }; c.ajaxSubmit(b); return false; }); $('#updateCate').click(function(){ var a = treeObj.getCheckedNodes(true); if ($('#categoryName').val() == "") { $.fxAlert.Alert("提示", "请输入销售目录名称！"); return } if (a.length == 0) { $.fxAlert.Alert("提示", "请先为销售目录选择三级采购目录之后保存!"); return false; } var f = ""; for (var d = 0; d < a.length; d++) { var e = a[d]; if (e.categoryLevel == "3") { f += e.categoryId + ","; } } if (f == "") { $.fxAlert.Alert("提示", "请先为销售目录选择三级采购目录之后保存!"); return false; } var c = $("#cateUpdateForm"); var b = { dataType: "json", beforeSubmit: function (j, h, g) { var i = new Object(); i.name = "categoryCodes"; i.value = f; j.push(i); }, success: function (g) { if (g.success) { $(".modal1").hide(); $.fxAlert.Alert("提示", g.message); window.location.href = base + '/tCmmdtyCategory/queryByPage.htm'; } else { $.fxAlert.Alert("提示", g.message); } }, error: function (g, i, h) { $.fxAlert.Alert("提示", "服务器内部错误!"); } }; c.ajaxSubmit(b); return false; }); $('#updateBtn').click(function () { if ($('.childChecked:checked').length == 0) { $.fxAlert.Alert("提示", "请选择相应的目录进行操作！"); return } if ($('.childChecked:checked').length > 1) { $.fxAlert.Alert("提示", "只能选择一项销售目录进行修改操作！"); return } var ids = []; $('.childChecked:checked').each(function (index, item) { ids.push($(item).data('id')); }); window.location.href = base + "/tCmmdtyCategory/toUpdateTCmmdtyCategoryPage.htm?categoryId=" + ids[0]; }); $('#delBtn').click(function () { if ($('.childChecked:checked').length == 0) { $.fxAlert.Alert("提示", "请选择相应的目录进行操作！"); return } var ids = []; $('.childChecked:checked').each(function (index, item) { ids.push($(item).data('id')); }); $.fxAlert.Confirm("删除目录", "请确定是否删除？", function () { $.ajax({ dataType: "json", url: base + "/tCmmdtyCategory/updateStopStatus.htm", data: { ids: JSON.stringify(ids), }, type: "post", async: true, success: function (data) { if (data.success) { $(".modal1").hide(); $.fxAlert.Alert("提示", "删除成功！"); window.location.href = base + '/tCmmdtyCategory/queryByPage.htm'; } else { $.fxAlert.Alert("提示", "删除失败！"); window.location.href = base + '/tCmmdtyCategory/queryByPage.htm'; } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } }); }); });});另一个系统的 category.js
var firstNodeLevel = 1;var lastNodeLevel = 3;var secondNodeLevel = 2;var selectedNodeCode = '';var selectedNodeName = '';var selectedNodeLevel = '';var selectedParentNode = '';var selectedNodeImgUrl = '';var treeNode;var regular = /^([^\`\+\~\!\#\$\%\^\&\*\(\)\|\}\{\=\"\'\！\￥\……\（\）\——]*[\+\~\!\#\$\%\^\&\*\(\)\|\}\{\=\"\'\`\！\?\:\<\>\•\“\”\；\‘\‘\〈\ 〉\￥\……\（\）\——\｛\｝\【\】\\\/\;\：\？\《\》\。\，\、\[\]\,]+.*)$/;$(function () { // 初始化树 $.initZtree(); // 添加子目录动作(先要对参数进行校验) $('#addChildNode').click(function () { if (selectedNodeCode == '') { Tip.show({ content: "请选择左侧目录再添加子目录!" }); return false; } if (selectedNodeLevel == lastNodeLevel) { Tip.show({ content: "当前所选目录为三级目录,不允许添加子目录!" }); return false; } //如果是二级说明进行添加三级目录 if(selectedNodeLevel == secondNodeLevel){ $('.tr-img').show(); showImg(''); } $('#operTypeHid').val('ADD'); $('#addCategoryBtn').show(); $('#modifyCategoryBtn').hide(); $('#parentNodeName').val(selectedNodeName); $('#categoryName').val(''); }); // 添加动作 $("#addCategoryBtn").click(function () { if (selectedNodeCode == '') { Tip.show({ content: "请选择左侧目录再添加子目录!" }); return false; } if (selectedNodeLevel == lastNodeLevel) { Tip.show({ content: "当前所选目录为三级目录,不允许添加子目录!" }); return false; } var curNodeName = $('#categoryName').val(); if (curNodeName == '') { Tip.show({ content: "请输入目录名称!" }); return false; } if (curNodeName.trim() == '') { Tip.show({ content: "请输入目录名称!" }); $('#categoryName').val(''); return false; } if(regular.test(curNodeName)){ Tip.show({ content: "目录不能输入特殊字符!" }); $('#categoryName').val(''); return false; } //判断是否需要选择图片 if($('.tr-img').is(':visible')){ var src =$(".inputfilebtn img").attr("src"); if(typeof(src) == 'undefined'){ Tip.show({ content: "请选择相应尺寸的图片!" }); return false; } } var addForm = $('#addCategoryForm'); var options = { dataType: "json", beforeSubmit: function () { $("#addCategoryBtn").attr('disabled', true); }, success: function (result) { $("#addCategoryBtn").attr('disabled', false); if (result.success) { Tip.show({ content: "子目录添加成功!" }); //初始化树 $.initZtree(); //重置参数 $.reSetParam(); //获取当前目录 var node = treeNode.getNodeByParam('id',result.data,null); if (node != null) { //获取父级节点 var pNode =node.getParentNode(); if(pNode != null){ //展开 treeNode.expandNode(pNode, true, false, false); } } } else { Tip.show({ content: result.message }); } }, error: function (result) { $("#addCategoryBtn").attr('disabled', false); $.fxAlert.Alert('提示', '服务器内部错误!'); } }; addForm.ajaxSubmit(options); return false; }); $('#modifyCategoryBtn').click(function () { if (selectedNodeCode == '0') { Tip.show({ content: "根目录不允许修改!" }); return false; } var curNodeName = $('#categoryName').val(); if (curNodeName == '') { Tip.show({ content: "请输入目录名称!" }); return false; } if (curNodeName.trim() == '') { Tip.show({ content: "请输入目录名称!" }); $('#categoryName').val(''); return false; } if(regular.test(curNodeName)){ Tip.show({ content: "目录不能输入特殊字符!" }); $('#categoryName').val(''); return false; } //判断是否需要选择图片 if($('.tr-img').is(':visible')){ var src =$(".inputfilebtn img").attr("src"); if(typeof(src) == 'undefined'){ Tip.show({ content: "请选择相应尺寸的图片!" }); return false; } } $.fxAlert.Confirm("提示", "你确定修改此目录吗?", function () { var modifyForm = $('#addCategoryForm'); var options = { dataType: "json", beforeSubmit: function () { $("#modityCategoryBtn").attr('disabled', true); }, success: function (result) { $("#modityCategoryBtn").attr('disabled', false); if (result.success) { Tip.show({ content: "目录修改成功!" }); //初始化树 $.initZtree(); //重置参数 $.reSetParam(); //获取节点展开 var node = treeNode.getNodeByParam('id',result.data,null); if (node != null) { var pNode =node.getParentNode(); if(pNode != null){ treeNode.expandNode(pNode, true, false, false); } } } else { Tip.show({ content: result.message }); } }, error: function (result) { $("#modityCategoryBtn").attr('disabled', false); $.fxAlert.Alert('提示', '服务器内部错误!'); } }; modifyForm.ajaxSubmit(options); return false; }); return false; }); // 删除节点 $('#delNode').click(function () { if (selectedNodeCode == '') { Tip.show({ content: "请选择左侧需要删除的目录!" }); return false; } if (selectedNodeCode == '0') { Tip.show({ content: "根目录不允许删除!" }); return false; } var node = treeNode.getNodeByParam("id", selectedNodeCode, null); var childNodes = node.children; // 说明没有子节点 if (typeof(childNodes) != 'undefined') { if (childNodes.length > 0) { Tip.show({ content: "当前待删除目录存在子目录,不允许删除!" }); return false; } } // 删除提示信息 $.fxAlert.Confirm("提示", "你确定删除此目录吗?", function () { var pNode = node.getParentNode(); $('#delNodeCodeHid').val(selectedNodeCode); var addForm = $('#delCategoryForm'); var options = { dataType: "json", beforeSubmit: function () { $("#delNode").attr('disabled', true); }, success: function (result) { $("#delNode").attr('disabled', false); if (result.success) { Tip.show({ content: "目录删除成功!" }); $('#delNodeCodeHid').val(''); //初始化树 $.initZtree(); //重置参数 $.reSetParam(); //判断父节点是否存在,存在则展开 if(pNode != null){ treeNode.expandNode(pNode, true, false, false); } } else { Tip.show({ content: "目录删除失败![" + result.message + "]" }); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { $("#delNode").attr('disabled', false); $.fxAlert.Alert('提示', '服务器内部错误!'); } }; addForm.ajaxSubmit(options); return false; }); }); //批量导入 $('#batchImport').click(function () { $(".modal1").show(); return false; }); $('#batchImport').click(function () { $('.xlsFile').val(''); $('.filename').parent().css("height", "30px"); $('.oneline_filename').html(''); $('.maskHide').hide(); var importResult = $('.importResult'); importResult.hide(); $('#exportIn').click(function () { var xlsFile = $('.xlsFile').val(); if (xlsFile == '') { Tip.show({ content: "请选择需要导入的excel文件!" }); return false; } var index = xlsFile.lastIndexOf("."); var ext = xlsFile.substr(index + 1); console.log(ext); if ((ext != 'xls') && (ext != 'xlsx')) { Tip.show({ content: "请选择需要导入的excel文件!" }); return false; } var hideForm = $('#categoryImport'); var options = { dataType: "json", beforeSubmit: function () { $('.maskHide').show(); }, success: function (result) { $('.maskHide').hide(); if (result.success) { $.fxAlert.AlertCallback('提示', '批量目录导入成功!', function () { $(".modal-box").hide(); $.initZtree(); }); } else if (result.errcode == 'XlsParserError') { $.fxAlert.Alert('提示', result.message); } else { var data = result.data; var filePath = data.filePath; importResult.show(); $('a', importResult).attr('href', filePath); $('a span', importResult).click(); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { $.fxAlert.Alert('提示', '服务器内部错误!'); } }; hideForm.ajaxSubmit(options); return false; }) }); $("#file_upload").on("change",function(){ var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var dataFile; var dataType; if (fileObj && fileObj.files && fileObj.files[0]) { dataFile = fileObj.files[0]; dataType = dataFile.type; if (!(dataType == "image/png"||dataType == "image/jpeg"||dataType == "image.jpg"||dataType=="image/png")){ Tip.show({ content: "文件格式不正确!" }); showImg(''); return; } if (dataFile.size > 307200) { Tip.show({ content: "图片大小不得超过300KB!" }); showImg(''); return; } dataURL = windowURL.createObjectURL(fileObj.files[0]); showImg(dataURL); } });});$.extend({ // 初始化树函数 initZtree: function () { var setting = { edit: { enable: false }, callback: { onClick: $.nodeClick }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pid", rootPId: "0" } } }; $.ajax({ url: _base + "/category/getCategoryTree.do", dataType: "json", async: false, success: function (result) { if (result.success) { var zNodes = result.data; treeNode = $.fn.zTree.init($("#tree"), setting, zNodes); } else { $.fxAlert.Alert('提示', result.message); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { $.fxAlert.Alert('提示', '服务器内部错误!'); } }); }, // 节点选择函数 nodeClick: function (event, treeId, treeNode) { // 选中节点 selectedNodeCode = ''; selectedNodeName = ''; selectedNodeLevel = ''; selectedParentNode = ''; $('.tr-img').hide(); showImg(''); selectedNodeCode = treeNode.id; selectedNodeName = treeNode.name; selectedNodeLevel = treeNode.nodeLevel; selectedNodeImgUrl = treeNode.imgUrl; var pNode = treeNode.getParentNode(); if(pNode != null){ selectedParentNode = pNode.name; } //如果是三级目录则显示图标 if(selectedNodeLevel == lastNodeLevel){ $('.tr-img').show(); showImg(selectedNodeImgUrl); } $('#parentNodeName').val(selectedParentNode); $('#categoryName').val(selectedNodeName); $('#hCategoryCode').val(selectedNodeCode); $('#operTypeHid').val('UPDATE'); $('#addCategoryBtn').hide(); $('#modifyCategoryBtn').show(); }, //重新设置参数 reSetParam: function () { selectedNodeCode = ''; selectedNodeName = ''; selectedNodeLevel = ''; $('.tr-img').hide(); showImg(''); $('#parentNodeName').val(''); $('#hCategoryCode').val(''); $('#categoryName').val(''); $('#operTypeHid').val('ADD'); $('#addCategoryBtn').show(); $('#modifyCategoryBtn').hide(); }});function showImg(src) { if (!src) { $('.inputfilebtn img').removeAttr('src').hide(); return } $('.inputfilebtn img').show(); if ($('.inputfilebtn img').length > 0) { $('.inputfilebtn img').attr('src', src); return; } var $img = $('<img src="' + src + '"></img>'); $img.css({ "width": "60px", height: "60px", position: "absolute", "z-index": "500", top: "0", left: "0" }) $(".inputfilebtn").append($img);}阅读全文
0 0
- 关于zTree的使用
- 关于zTree的使用总结
- 关于zTree插件的使用
- 关于jquery中的zTree控件的使用
- 关于Ztree的一些使用心得
- 关于ztree的用法
- 关于使用了ztree后排序的问题
- zTree-zTree Tree的 基础使用
- zTree的简单使用
- ZTREE的使用
- ZTree的使用
- ztree的使用
- Ztree+struts的使用
- jquery-ztree的使用
- ztree简单的使用
- zTree的使用教程
- ztree的使用
- ZTree的使用
- Application中的初始化
- google/seq2seq项目infer中的bug
- 在YII2中使用swiftmailer给多账号发送邮件和附件
- CS231n课程笔记翻译
- Spring中classpath中通配符号的使用
- 关于zTree的使用
- .net 判断datatable当中是否存在列名和具体数据
- JAVA JSON
- spring aop 报错Pointcut is not well-formed: expecting ‘name pattern’ at character position 48 executi
- 在美国,信用到底能有多重要?
- ArcGIS Runtime SDK for .NET 100.0中如何执行.gpk（二）
- Linux centOS 硬盘分区挂载
- 处理Gradle中的这个文件下载慢的问题的？
- vue踩坑不完全指北(3)
