How to implement menu Tree by Jquery Tree plug-in zTree
This article mainly introduces the "Jquery tree plug-in zTree how to achieve the menu tree", in the daily operation, I believe that many people have doubts in the Jquery tree plug-in zTree how to achieve the menu tree, Xiaobian consulted all kinds of information, sorted out a simple and easy-to-use method of operation, hope to answer the "Jquery tree plug-in zTree how to achieve the menu tree" doubt helpful! Next, please follow the editor to study!
The specific code is as follows
Title var settingLeft = {view: {dblClickExpand: false,// when double-clicking a node Whether to automatically expand the identity showLine of the parent node: whether false,// displays the connection between nodes showIcon: true, fontCss: {'color':' white', 'font-weight':' normal'}, / / font style function selectedMulti: false / / sets whether multiple nodes can be selected at the same time} Check: {/ / chkboxType: {"Y": "ps", "N": "ps"}, chkStyle: "checkbox", / / check box type enable: false / / whether CheckBox is displayed on each node Data: {simpleData: {/ / simple data model enable: true, idKey: "id", pIdKey: "pId", rootPId: ""}} Callback: {beforeClick: function (treeId, treeNode) {zTree = $.fn.zTree.getZTreeObj ("menu_tree_vehicle") If (treeNode.isParent) {zTree.expandNode (treeNode); / / if it is a parent node, expand the node} else {zTree.checkNode (treeNode,! treeNode.checked, true, true) / / Click the check box, and click again to uncheck}} / /, / / onCheck: onCheck}} (function () {/ / initialize menu tree var zNodes = [{id: 0, pId:-1, name: "first-level department", open: true}, {id: 1, pId: 0, name: "second-level department 1", open: false}, {id: 2, pId: 1, name: "level 3 department 1"} {id: 3, pId: 1, name: "level 3 department 2"}, {id: 4, pId: 0, name: "level 2 department 2", open: false}, {id: 5, pId: 4, name: "level 3 department 3"}, {id: 6, pId: 4, name: "level 3 department 4", open: false} {id: 7, pId: 6, name: "level 4 department 1"}, {id: 8, pId: 6, name: "level 4 department 2"}, {id: 9, pId: 0, name: "level 2 department 3"}, {id: 10, pId: 0, name: "level 2 department 4"}] $.fn.zTree.init ($("# menu_tree_left"), settingLeft, zNodes);}); at this point, the study on "how the Jquery tree plug-in zTree implements the menu tree" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
