时间：2021-07-01 10:21:17 帮助过：5人阅读
easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单，但是功能非常强大。
需要的导入以下几种js文件和样式表
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(该文件包括core,exhide,exedit,excheck)
ztree/zTreeStyle.css
相应的htm 部分代码
<body class="easyui-layout">
<p data-options="region:'north',title:'北丐:洪七公',split:true" style="height:100px;"></p>
<p data-options="region:'south',title:'南帝:一灯大师',split:true" style="height:100px;"></p>
<p data-options="region:'east',iconCls:'icon-reload',title:'东邪:黄药师',split:true" style="width:100px;"></p>
<p data-options="region:'west',title:'西毒:欧阳锋',split:true" style="width:250px;">
<p id="aa" data-options="fit:'true'" class="easyui-accordion">
<p title="赵敏" data-options="iconCls:'icon-save'" >
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</p>
<p title="大玉儿" data-options="iconCls:'icon-reload',selected:true" >
// ztree属性结构
<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</p>
<p title="婉容儿" >
who?
</p>
</p>
</p>
<p data-options="region:'center',title:'中神通:周伯通'">
// tabs 面板
<p id="tt" class="easyui-tabs" data-options="fit:true">
<p title="小龙女"data-options="closable:true" ></p>
<p title="沐剑屏" data-options="closable:true" ></p>
<p title="阿珂" data-options="iconCls:'icon-reload',closable:true"></p>
</p>
</p>
// menu菜单栏
<p id="mm" class="easyui-menu" style="width:120px;">
<p name="current">关闭当前选项卡</p>
<p name="others">关闭其他选项卡</p>
<p class="menu-sep"></p>
<p data-options="iconCls:'icon-cancle'" name="all">关闭所有选项卡</p>
</p>
</body>相关推荐：
zTree异步加载展开第一级节点方法实现
ztree实现左边动态生成树右边为内容详情功能实例分享
实例详解jQuery 利用ztree实现树形表格
以上就是实例详解jQuery EasyUI结合zTree树形结构制作web页面的详细内容，更多请关注Gxl网其它相关文章！