JQuery easyui 搭建前端框架

来源：互联网发布：乐视视频下载mac 编辑：程序博客网时间：2024/06/10 01:46

JQuery easyui 搭建前端框架

最近，一直在弄前台的问题，最开始一个<iframe></iframe>给我弄的头大，现在能够搭建出一个框架了，用作前端。先看一下截图：

整体是easyui的布局，然后左边是一个简单的平滑树easyui 树的简单使用。点击树的时候，在右侧会新增加一个tab页，用来显示子页面。

下面是代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script type="text/javascript" src="../jqueryeasyui/jquery-2.2.3.js"></script>    <script type="text/javascript" src="../jqueryeasyui/jquery.easyui.min.js"></script>    <script type="text/javascript" src="../jqueryeasyui/easyui-lang-zh_CN.js"></script>    <script type="text/javascript" src="test.js"></script>    <link rel="stylesheet" type="text/css" href="../jqueryeasyui/themes/default/easyui.css"/>    <link rel="stylesheet" type="text/css" href="../jqueryeasyui/themes/icon.css"/>    <title>123</title></head><body><div class="easyui-layout" data-options="fit:true">    <div data-options="region:'north'" style="height:70px; background-color: cornflowerblue;">        <h1>XX有限责任公司OA工作流系统</h1>    </div>    <div data-options="region:'south'" style="height: 25px;background-color: cornflowerblue;">        <div style="text-align: right;margin-top: 3px;">XX有限责任公司</div>    </div>    <!--    <div data-options="region:'east',split:true" title="East" style="width: 100px;">            <h1>east</h1>        </div>-->    <div data-options="region:'west',split:true" title="菜单" style="width: 200px;">        <div class="easyui-panel" data-options="fit:true">            <ul id="mytree" class="easyui-tree" data-options="animate:true,lines:true"></ul>        </div>    </div>    <div data-options="region:'center'" data-options="fit:true">        <div id="mainTabs" class="easyui-tabs" data-options="fit:true">        </div>    </div></div></body></html>

对应的js文件

//官方平滑树function convert(rows){    function exists(rows, parentId){        for(var i=0; i<rows.length; i++){            if (rows[i].id == parentId) return true;        }        return false;    }    var nodes = [];    // get the top level nodes    for(var i=0; i<rows.length; i++){        var row = rows[i];        if (!exists(rows, row.parentId)){            nodes.push({                id:row.id,                text:row.name,                memo:row.memo            });        }    }    var toDo = [];    for(var i=0; i<nodes.length; i++){        toDo.push(nodes[i]);    }    while(toDo.length){        var node = toDo.shift();// the parent node        // get the children nodes        for(var i=0; i<rows.length; i++){            var row = rows[i];            if (row.parentId == node.id){                var child = {id:row.id,text:row.name,memo:row.memo};                if (node.children){                    node.children.push(child);                } else {                    node.children = [child];                }                toDo.push(child);            }        }    }    return nodes;}function addNewTab(tabname){    //创建一个新的窗口，在mainlayout上    if(!$("#mainTabs").tabs('getTab', tabname)) {        $("#mainTabs").tabs('add', {            title: tabname,            selected: true,            closable: true,            content: "<iframe src='" +  'http://www.baidu.com' + "' style='width:100%;height:100%'  frameborder='no' border='0' marginwidth='0' marginheight='0' scrolling='yes' />"        });    }    else {        $('#mainTabs').tabs('select', tabname);    }}$(function () {    $('#mytree').tree({        url: 'tree_data2.json',        loadFilter: function(rows){            return convert(rows);        }    });    //点击事件    $('#mytree').tree({        onClick: function(node){            if($('#mytree').tree('isLeaf',node.target)){                // alert node text property when clicked                //alert(node.text);                addNewTab(node.text);            }        }    });});

json文件：

[  {    "id": 1,    "parendId": 0,    "name": "Foods",    "memo":"sssccc"  },  {    "id": 2,    "parentId": 1,    "name": "Fruits",    "memo":"sssc"  },  {    "id": 3,    "parentId": 1,    "name": "Vegetables",    "memo":"sssccc"  },  {    "id": 4,    "parentId": 2,    "name": "apple",    "memo":"sssccc"  },  {    "id": 5,    "parentId": 2,    "name": "orange",    "memo":"sssccc"  },  {    "id": 6,    "parentId": 3,    "name": "tomato",    "memo":"sssccc"  },  {    "id": 7,    "parentId": 3,    "name": "carrot",    "memo":"sssccc"  },  {    "id": 8,    "parentId": 3,    "name": "cabbage",    "memo":"sssccc"  },  {    "id": 9,    "parentId": 3,    "name": "potato",    "memo":"sssccc"  },  {    "id": 10,    "parentId": 3,    "name": "lettuce",    "memo":"sssccc"  },  {    "id": 11,    "parentId": 77,    "name": "another",    "memo":"sssccc"  },  {    "id": 12,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 13,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 14,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 15,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 16,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 17,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 18,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 19,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 20,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 21,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 22,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 23,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 24,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 25,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 26,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 27,    "parentId": 11,    "name": "another",    "memo":"sssccc"  },  {    "id": 28,    "parentId": 11,    "name": "another",    "memo":"sssccc"  }]

下面点击左侧树，右侧效果：

0 0