JQuery 有关于 ZTree 插件

最新推荐文章于 2025-03-19 10:16:01 发布

iteye_1503

最新推荐文章于 2025-03-19 10:16:01 发布

阅读量108

点赞数

文章标签： javascript ViewUI

本文详细介绍了使用ZTree实现多级菜单的动态加载与选择功能，并阐述了如何通过art.dialog.data将选择的数据传递到另一页面的过程。重点突出了复选框事件处理、数据获取与传递的关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var zTree1; var setting; var retrunObj; setting = { check: { enable : true }, async: { enable: true, otherParam: {"conditionMap.mtType":"${conditionMap.mtType}"}, url: "${ctx}/portal/inventoryTypeAction!getTree.action" }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId" } }, callback: { beforeExpand: function(){return true;}, beforeCollapse: function(){return true;}, onClick: zTreeOnClick, onCheck: onCheck } }; var zNodes =[]; function zTreeOnClick(event, treeId, treeNode) { if (treeNode) { $.dialog.data("selTypeData",treeNode); $.dialog.close(); } } //选择复选框事件 function onCheck(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("dropdownMenu"); nodes = zTree.getCheckedNodes(true); //获得所有被选中节点，包括父节点和子节点 var v = ""; vid = ""; for (var i=0, l=nodes.length; i<l; i++) { if( nodes[i].isParent == false) { //如果是叶子节点的话才取出来 v += nodes[i].name + ","; vid += nodes[i].id + ","; } } if (v.length > 0 ) v = v.substring(0, v.length-1); if (vid.length > 0 ) vid = vid.substring(0, vid.length-1); var data =[]; data[0] = vid; data[1] = v; art.dialog.data('returnData',data); //传递数据到另一页面 } function reloadTree() {zTree1 = $.fn.zTree.init($("#dropdownMenu"),setting, zNodes);} $(function(){reloadTree();});

注意点一：当用复选框时我们可以用art.dialog.data 来把我们需要的数据传递到另一页面，需要一条数据时用selTypeData传递

注意点二：嫑随便更改treeNode的值，节点的数据是程序通过异步去后台加载过来的

关于JQuery的资料：http://www.baby666.cn/v3/main.php#_zTreeInfo

关于artDialog的资料：http://www.planeart.cn/demo/artDialog/index.html