您的位置：首页 > Web前端 > JavaScript

EXTJS学习系列提高篇:第十篇(转载)作者殷良胜,制作树形菜单之四

2008-11-03 16:14 926 查看
这篇文章显示树形菜单的方式则不再采用layout:'accordion'布局方式.显示的效果就是一棵完整的树.这种效果适合菜单根级节点较多的情况下,因为如果根节点较多,再使用'accordion'布局就会导致树不能够完整显现,或者即使显示了,页面的高度还是有限的,即使出现滚动条,看起来也还是很不舒服的.具体哪种用法,只能够结合具体的项目需求.

树的显示,Ext将其封装的太简单,仅仅几行代码,效果却非同凡响.同时在这个树形菜单里面也同样实现了在节点右键出现菜单的操作.

还是让我们先看看效果图吧.

1,页面客户端代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="Example_TreeAutoLoad_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>无标题页</title>

<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />

<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-purple.css" />

<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ExtJS/ext-all.js"></script>

<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>

<style type="text/css">

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<script type="text/javascript">

function makeTree()

</script>

<script type="text/javascript">

function ready()

Ext.onReady(ready);

</script>

</div>

</form>

</body>

</html>

2,后台代码,这里仅仅将Cs的逻辑部分贴出来,供大家参考.相关实体类的实现请参看提高篇的第七篇文章

using Ext;

using System.Collections.Generic;

using Newtonsoft.Json;

public partial class Json2 : System.Web.UI.Page

这个功能很具有实用价值,只需对数据库的表换下就能够在不修改任何代码的情况下直接运行.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航