`
lipengcheng0116
  • 浏览: 19279 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs4 TreePanel 实例

阅读更多

Ext.app.AdSitePopedomForm = Ext.extend(Ext.Window,
{
    title: '网站功能授权',
    id: 'am-adsitepopedom',
    autoScroll: true,
    xtype: "window",
    width: 400,
    height: 540,
    layout: "absolute",
    modal: true,
    initComponent: function () {
        var userId = Ext.getCmp("am-usergrid").userId;
        var mytree = new Ext.tree.TreePanel({
            id: 'ppdTree',
            x: 5,
            y: 5,
            width: 378,
            height: 470,
            useArrows: true,
            autoScroll: true,
            animate: true,
            enableDD: true,
            containerScroll: true,
            store: new Ext.data.TreeStore
                        ({
                            proxy:
                            {
                                type: 'ajax',
                                url: 'data/User/UserPopedom.aspx?parameter=ppdTree&userId=' + userId
                            },
                            root:
                            {
                                id: 0,
                                text: "选择权限",
                                leaf: false,
                                expandable: true,
                                expanded: true
                            },
                            sorters: [
                            {
                                property: 'leaf',
                                direction: 'ASC'
                            },
                            {
                                property: 'text',
                                direction: 'ASC'
                            }]
                        })
        });
        mytree.on('checkchange', function (node, checked) {
            node.expand();
            node.checked = checked;
            node.eachChild(function (child) {
                child.set('checked', checked);
                child.fireEvent('checkchange', child, checked);
            });
        }, mytree);



        this.items =
        [
           mytree,
			{
			    xtype: "textfield",
			    hidden: true,
			    name: "Id",
			    id: "Id",
			    value: userId
			}
         ];
        this.buttons =
	    [
		   {
		       text: '确认',
		       xtype: 'button',
		       width: 30,
		       handler: function () {
		           var b = mytree.getChecked();
		           var checkids = new Array; // 存放选中id的  数组  
		           for (var i = 0; i < b.length; i++) {
		               if (b.length == 1) {
		                   checkids = b[i].data.id;
		               }
		               else {
		                   if (i < b.length - 1) {
		                       checkids += b[i].data.id + ",";
		                   }
		                   if (i == b.length - 1) {
		                       checkids += b[i].data.id;
		                   }
		               }

		               // checkid.push(b[i].text); // 添加id到数组  
		           }
		           Ext.Ajax.request({
		               url: "data/User/UserPopedom.aspx?parameter=poped",
		               method: "POST",
		               params: { ppdIds: checkids, userId: userId }, //发送的参数
		               success: function (response, option) {
		                   response = Ext.JSON.decode(response.responseText);
		                   if (response.success == true) {
		                       if (response.flag == true) {
		                           Ext.MessageBox.alert("提示", "权限分配成功!");

		                           //关闭当前窗体
		                           var adpoped = Ext.getCmp("am-adsitepopedom");
		                           adpoped.close();

		                           //刷新列表
		                           var adGrid = Ext.getCmp("am-usergrid");
		                           adGrid.store.load();
		                       }
		                       else {
		                           Ext.MessageBox.alert("错误信息", "权限分配失败!");
		                       }
		                   }
		                   else {
		                       Ext.MessageBox.alert("错误信息", response.msg);
		                   }
		               },
		               failure: function () {
		                   Ext.Msg.alert("提示", "权限分配<br>没有捕获到异常");
		               }
		           });
		       }
		   },
            {
                text: '取消',
                xtype: 'button',
                width: 30,
                handler: function () {
                    var windows = Ext.getCmp('am-adsitepopedom');
                    windows.close();
                }
            }
        ];
        Ext.app.AdSitePopedomForm.superclass.initComponent.call(this);
    }
});
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CtManager.BLL;
using CtManager.Model;
using Newtonsoft.Json;

public partial class Data_User_UserPopedom : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["parameter"] == null)
        {
            Response.Write("");
            return;
        }

        string parameter = Request["parameter"];
        if (parameter == "ppdTree") Response.Write(AdvertisingTreePPDData());
        else if (parameter == "poped") Response.Write(DistributeAuthority());
        else Response.Write("");
    }
    /// <summary>
    /// 权限分配方法
    /// </summary>
    /// <returns></returns>
    public string DistributeAuthority()
    {
        try
        {
            if (UserInfoManager.ModifyUserInfoPopedomById(Request["ppdIds"], Request["userId"])) return "{success:true,flag:true}";
            else return "{success:true,flag:false}";
        }
        catch (Exception /*ex*/)
        {
            return "{success:true,flag:false}";
        }
    }

    /// <summary>
    /// 广告位 树的Json数据源(用于授权 数据加上复选框) 用户权限初始化
    /// </summary>
    /// <returns></returns>
    public string AdvertisingTreePPDData()
    {
        IList<PopeDom> ppdList = UserInfoManager.CreatePopedomTree(Request["userId"]);

        return JavaScriptConvert.SerializeObject(ppdList).Replace("Mchecked", "checked");
    }
}
 
分享到:
评论

相关推荐

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法...

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    // 获取TreePanel实例 var tree = Ext.getCmp('treeId'); // 监听checkchange事件 tree.on('checkchange', function(node) { // 在这里处理被选中的节点 }); ``` #### 2. 使用cascade方法遍历所有节点 `cascade`...

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    1. **配置TreePanel**:首先,我们需要创建一个TreePanel实例,并为其配置必要的属性,如`rootVisible`(控制是否显示根节点)、`lines`(控制是否显示连接线)和`autoScroll`(是否自动滚动以显示全部内容)。...

    extjs4 MVC2 TreePanel动态JSON实现

    初始化TreePanel实例 接下来,创建一个名为`TreeMater`的`TreePanel`实例,并将其配置为西边区域的面板。该面板绑定了之前定义的`TreeStore`,并设置了面板的一些基本样式和行为。 ```javascript var TreeMater =...

    extjs TreePanel

    - **loader**: TreePanel的加载器,用于从服务器获取或更新节点数据,通常是`Ext.tree.TreeLoader`实例。 - **selModel**: 树的选择模型,决定了用户如何选择树中的节点,默认是`Ext.tree.DefaultSelectionModel`...

    jsp+access+extjs动态树实例

    4. **ExtJS前端**:在ExtJS中创建TreePanel实例,配置store以接收JSP返回的JSON数据。通过监听TreePanel的事件,实现用户的交互操作,如点击节点时加载子节点数据。 5. **递归加载**:为了实现无限层级的树,需要在...

    extjs关于treePanel+chekBox全部选中以及清空选中问题探讨

    首先,我们要创建一个 TreePanel 实例,并在其中设置相应的节点(nodes),每个节点可以包含一个或多个属性,例如 id、text、checked 等。checked 属性用于标记该节点是否被选中。TreePanel 需要监听特定的事件,如...

    springmvc+extjs4实例树

    标题中的“springmvc+extjs4实例树”指的是一个结合了SpringMVC和ExtJS4技术的实战项目,主要用于创建一个具有树形结构的用户界面。这个项目可能用于展示层次结构的数据,例如组织架构、文件系统或者数据库的分类...

    ExtJS布局之border实例

    ### ExtJS布局之border实例详解 #### 一、Border布局简介 在ExtJS框架中,`border`布局是一种非常常见的布局方式,它将容器划分为五个区域:north(北)、south(南)、east(东)、west(西)以及center(中心)。...

    EXTJS 树的实例

    在这个“EXTJS 树的实例”中,我们将深入探讨EXTJS树的基本制作过程。 1. **EXTJS Tree的基本概念** EXTJS的树由一系列可扩展的树节点组成,每个节点都可以有子节点,形成层次结构。树组件提供了丰富的功能,包括...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    ComboBoxTree是ExtJS4中的一个自定义组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能。ComboBox通常用于提供一个下拉列表供用户选择,而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者...

    ExtJs TreePanel应用

    ExtJs TreePanel是一种在Web应用程序中用于展示层次结构数据的强大组件。它被广泛应用于构建具有树状结构的导航菜单、文件系统目录视图或者组织结构图。TreePanel结合了丰富的功能和灵活的定制性,使其成为ExtJs框架...

    EXTjs 简单布局实例

    //实例菜单树形 menuTree:new Ext.tree.TreePanel({ title:'功能菜单', region:'west', bodyStyle:'background:transparent url(images/default/panel/group-lr.gif) repeat-x 0 bottom;', id:'extExample-tree', ...

    JavaScript的ExtJS框架中数面板TreePanel的用法实例解析_.docx

    4. 最后,在页面加载完成后,通过`Ext.onReady`回调函数初始化并显示TreePanel。 安全性方面,当从服务器获取数据时,需要注意防止跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。可以通过设置适当的HTTP头、验证请求...

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...

    JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

    接着,创建TreePanel实例,并将其渲染到页面上的指定div元素中。通过设置TreePanel的loader属性为TreeLoader,并指定dataUrl为Servlet的URL,TreePanel组件就能够通过异步请求的方式从服务器获取数据,并将其加载到...

    ExtJS5.0 树形菜单实例

    4. **定义TreePanel** 创建一个Ext.tree.Panel,配置上述的store 和其他属性。例如: ```javascript var tree = Ext.create('Ext.tree.Panel', { title: '树形菜单', width: 200, height: 200, store: ...

    ASP.NET运用ExtJs与WCF交互生成Tree目录树实例

    开发者会编写JavaScript代码来实例化TreePanel,设置其配置项,如URL(指向WCF服务的地址),并监听各种事件,如节点点击、拖放等。 文件名称"codefans.net"可能是指一个示例代码或教程资源,通常这种资源会包含...

Global site tag (gtag.js) - Google Analytics