JQuery EasyUI combines the zTree tree structure to create a web page, jqueryztree

JQuery EasyUI combines the zTree tree structure to create a web page, jqueryztree

JQuery EasyUI combines the zTree tree structure to create web pages. easyui is relatively simple to use. It encapsulates some functions of jquery and makes it easier to use. However, after version 1.2.3, the commercial use of easyui requires payment, zTree is a jquery tree plug-in developed by Chinese experts. It feels very useful and powerful, and it is completely free of charge. It is also very good for API operations. recommendation

Easyui is a jQuery-based framework that integrates various user interface plug-ins.

Easyui provides the necessary functions to build modern, interactive javascript applications.

With easyui, you do not need to write too much javascript code. Generally, you only need to use some html tags to define the user interface.

The complete HTML webpage framework.

Easyui saves product development time and scale.

Easyui is simple but powerful.

You need to import the following js files and Style Sheets

Easyui/themes/default/easyui.css
Easyui/themes/icon.css
Jquery-1.8.3.js
Easyui/jquery. easyui. min. js
Ztree/jquery. ztree. all-3.5.js (this file includes core, exhide, exedit, excheck)
Ztree/zTreeStyle.css

<Script type = "text/javascript"> // ztree menu settings var zTreeObj, setting = {view: {selectedMulti: false}, // Add edit settings: modify Tree node name/delete Tree node edit: {enable: true}, data: {simpleData: {enable: true }}, callback: {onClick: zTreeOnClick }}; // callback function: Click event function zTreeOnClick (event, treeId, treeNode, clickFlag) {alert (treeNode. id + "," + treeNode. name); var content = '<div style = "width: 100%; height: 100%; overf Low: hidden; "> '+' <iframe src =" '+ treeNode. url + '"scrolling =" auto "style =" width: 100%; height: 100%; border: 0; "> </iframe> </div>'; if (treeNode. url! = Undefined & treeNode. url! = "") {// Specifies whether treeNode exists in the center. name tabs if ($ ("# tt "). tabs ('exists', treeNode. name) {$ ("# tt "). tabs ('select', treeNode. name);} else {$ ("# tt "). tabs ('add', {title: treeNode. name, content: content, closable: true}) }}; event. preventDefault () ;}; // zTreeNodes tree menu data zTreeNodes = [{"id": 1, "pId": 0, "name": ""}, {"id": 11, "pId": 1, "name": "Nana", "url": "http://man.linuxde.net/" },{ "id": 12, "pId": 1, "name ":" Robin "," url ":" http://www.baidu.com "},{" id ": 13," pId ": 1," name ":" hancook "," url ": "http://www.google.cn/" },{ "id": 2, "pId": 0, "name": "parent node 2", "open": true }, {"id": 21, "pId": 2, "name": "leaf node 2-1" },{ "id": 22, "pId": 2, "name": "leaf node 2-2" },{ "id": 23, "pId": 2, "name": "leaf node 2-3 "}, {"id": 3, "pId": 0, "name": "parent node 3", "open": true },{ "id": 31, "pId": 3, "name": "leaf node 3-1" },{ "id": 32, "pId": 3, "name ": "leaf node 3-2" },{ "id": 33, "PId": 3, "name": "leaf node 3-3"}]; // 3. generate a tree menu $ (document ). ready (function () {zTreeObj = $. fn. zTree. init ($ ("# tree"), setting, zTreeNodes) ;}); // 4. object tab registration right-click event $ (document ). ready (function () {$ ("# tt "). tabs ({onContextMenu: function (e, title, index) {// block the default system right-click event e. preventDefault (); $ ('# mm '). menu ('show ', {left: e. pageX, top: e. pageY}) ;}}) ;}); // obtain the selected panel object $ (document ). ready (function () {$ ("# tt "). tabs ({// Obtain the selected panel object onSelect: function (title, index) {// 5. click Event binding for menu $ ("# mm "). menu ({onClick: function (item) {alert (item. name); // if (item. name = 'current') {$ ('# tt '). tabs ('close', title); // when you click to close other tabs} else if (item. name = 'others ') {var tabs = $ (' # tt '). tabs ('tabs'); $ (tabs ). each (function () {if ($ (this ). panel ('options '). title! = 'Message Center' & $ (this). panel ('options'). title! = Title) {$ ('# tt '). tabs ('close', $ (this ). panel ('options '). title) ;}}); // when you click Close all tabs} else if (item. name = 'all') {var tabs = $ ('# tt '). tabs ('tabs'); $ (tabs ). each (function () {if ($ (this ). panel ('options '). title! = 'Message Center') {$ ('# tt '). tabs ('close', $ (this ). panel ('options '). title) ;}}) ;}}}) ;}}}) </script>

Some corresponding htm code

<Body class = "easyui-layout"> <div data-options = "region: 'north', title: 'bei Bei: Hong Qigong ', split: true "style =" height: 100px; "> </div> <div data-options =" region: 'south', title: 'Southern Emperor: A lamp Master', split: true "style =" height: 100px; "> </div> <div data-options =" region: 'east', iconCls: 'icon-reload', title: 'dongxie: Huang yao', split: true "style =" width: 100px; "> </div> <div data-options =" region: 'west', title: 'Western poison: Ouyang feng', split: true "style =" width: 250px; "> <Div id = "aa" data-options = "fit: 'true'" class = "easyui-accordion"> <div title = "Zhao Min" data-options = "iconCls: 'icon-save' "> 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.