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

ExtJs 实现select列表选中项时添加删除

 
阅读更多
昨天空闲的时候,弄了一下双向链表的例子,供大家参考,匆忙做的,如果有问题请及时回复,部分代码以打包的形式上传。



Ext.namespace('Ext.role');
Ext.role.rights = function() {
	/* ----------------------- private属性 ----------------------- */
	var win, okBtn, cancelBtn, nav, tn = 1, sysId; 

	/* ----------------------- private方法 ----------------------- */
	// 创建表格
	function createGrid(){
		var store = new Ext.data.Store({
			proxy:  new Ext.data.HttpProxy({
            	url: attrCurrMgr.Contants.selectOrgGridLoadUrl
            }),
		    // 返回数据解析器配置
		    reader: new Ext.data.JsonReader(
		    	{   
		        	root:'data',  
		        	totalProperty:'totalCount',
		        	id: 'roleId'
		         }, 
		        [	{name: 'roleId', mapping: 'roleId'},
            		{name: 'roleName', mapping: 'roleName'}
        		]
        	)
    	});
		attrCurrMgr.Contants.selectOrgGrid = new Ext.grid.GridPanel({
		    el: 'selectOrgGrid_div',
	        store: store,
	        loadMask: true,
	        //bodyStyle:'width:100%', 
	        //height: 400,
	        cm: new Ext.grid.ColumnModel([
			{header: "角色名称", id:'orgName', width: 200, sortable: true, locked:false, dataIndex: 'roleName'}
	        ]),
	        tbar: new Ext.Toolbar({items:[{id:'delrightbutton',text:"删除角色",handler: delRightClick},'-']}),
	        sm: new Ext.grid.RowSelectionModel({singleSelect:false})
    	});
    	
    	attrCurrMgr.Contants.selectOrgGrid.render(); 
	}
	//删除角色权限
	function delRightClick(){
	 	var c = attrCurrMgr.Contants.selectOrgGrid.getSelectionModel().getSelections();
       	if (c.length > 0) 
       		Ext.MessageBox.confirm('消息', '确认要删除所选记录?', doDelete);
       	else 
          	Ext.MessageBox.alert('警告', '最少需要选择一条记录!');    
	}
	function doDelete(btn){
	  	if(btn == 'yes') {	
			var m = attrCurrMgr.Contants.selectOrgGrid.getSelectionModel().getSelections();
			var jsonData ="";
	        for(var i = 0, len = m.length; i < len; i++){        		
				var ss =  m[i].get('roleId');
				if(i==0)
	           		jsonData = jsonData + ss ;
			   	else
					jsonData = jsonData + "," + ss;							
	        }
            // 提交删除的参数配置
			var config = {
				url : attrCurrMgr.Contants.SelectOrgDelUrl,
				failure: function() {
					Ext.MessageBox.alert('错误信息', '删除选择的角色失败!');
				},
	            success: function(){
				    Ext.MessageBox.alert('消息', '删除选择的角色成功!');   
	            },
	            callback: function(){            	
	            	attrCurrMgr.Contants.selectOrgGrid.store.load();
	            },            
	            method: 'POST',
	            params:{delData:jsonData}	
			};
			this.transId = Ext.Ajax.request(config);				
		}
    }	
  
	// 创建窗口
	function createWindow() {
		if (win) return;
		attrCurrMgr.Contants.treePanel = new RoleTreePanel();
		win = new Ext.Window( {
			minimizable: true,
			iconCls : 'bdSelector',
			header:true,
			title:'角色设置',
			shadow:true,
			closable:true,
			resizable:false,
			animCollapse: true,
    		closeAction: 'hide',
			width: 580,
			height: 530,
			layout : 'border',
			plain : true,
			modal : true,
			items : [
				attrCurrMgr.Contants.treePanel,  
				{   region: 'center',
            		split:false,
		            border:false,
		            layout:'fit',
		            items:[{contentEl: 'right-center'}]
				},
			    {   region:"east",
				    contentEl:'right-east',
				    width: 225,
				    layout:'fit',
				    items:attrCurrMgr.Contants.selectOrgGrid
				}]
		});
		win.on('show', function() {
			attrCurrMgr.Contants.treePanel.reset();
			attrCurrMgr.Contants.selectOrgGrid.store.baseParams={sysId:sysId};
			attrCurrMgr.Contants.selectOrgGrid.store.load();
		});		
		win.on('minimize', function(){
    		win.toggleCollapse();
		});

		cancelBtn = win.addButton( {
			text : '关闭',
			tabIndex : tn++
		}, onWinHide, this);
	}
	// 隐藏窗口
	function onWinHide() {
		win.hide();
	}	

	/* ----------------------- public方法 ----------------------- */
	return {
		showDialog : function(obj) {
		    if(obj.sysId) sysId = obj.sysId;
		    else sysId = undefined;
		    attrCurrMgr.curSysId = sysId;
			if(!attrCurrMgr.Contants.selectOrgGrid) createGrid();     //创建表格,不存在才创建
			createWindow();   //创建window
			win.show(obj.td);
			if (!nav) nav = new Ext.KeyNav(win.getEl(), {"esc" : onWinHide});
		}
	}; // return
}();	


/**
* 普通权限树
**/
RoleTreePanel = function() {
    RoleTreePanel.superclass.constructor.call(this, {
        region: 'west',
        layout: 'fit',
        width: 240,
        el:'orgTree_div',
        collapsible: true,
        split:true,
        margins:'3 0 3 3',
        cmargins:'0 0 0 0',
        lines:true,
        autoScroll:true,
        rootVisible:false,
        loader: new Ext.tree.TreeLoader({
        	dataUrl: attrCurrMgr.Contants.orgTreeLoadUrl,
        	baseParams: {parentId: attrCurrMgr.Contants.rootNodeRoleId}
        }),  
        root: new Ext.tree.AsyncTreeNode({
        	text: '角色选择',
        	draggable:false,
        	expanded:true,
        	iconCls : 'iconleaf',
        	id: attrCurrMgr.Contants.rootNodeRoleId
    	})
    });
    this.on('beforeload', function(node){
       	this.loader.baseParams.parentId = node.id;
    });
    // 注册事件,点击树时刷新表格并设置当前活动节点
  	this.on('click',  function(node, e){
		this.currentNode = node;
		attrCurrMgr.Contants.nodeId = node;
  	});
    //new Ext.tree.TreeSorter(this, {folderSort:true});
};
Ext.extend(RoleTreePanel, Ext.tree.TreePanel, {
	currentNode: undefined,
	////重置树,如果选择了,则要去掉
	reset:function() {
//	    var selectNodeIds = this.getChecked();
//	    if(selectNodeIds.length>0) {
//	    	for(var i=0;i<selectNodeIds.length;i++) {
//	    		var node = this.getNodeById(selectNodeIds[i]);
//	    		if(node.attributes.checked) {
//	    			node.getUI().checkbox.checked = false;   //设置ui
//	    			node.attributes.checked = false;         //设置checked为false,否则取数据时还是选择了
//	    		}
//	    	}
//	    }
	}
});
//Ext.override(Ext.tree.TreeNodeUI, { 
//	onClick : function(e){ 
//		var checked = this.checkbox.checked;
//		this.checkbox.defaultChecked = checked;
//        this.node.attributes.checked = checked;
//		this.fireEvent('checkchange', this.node, this.checkbox.checked); 
//	} 
//});
  • 大小: 71.5 KB
  • 大小: 60.1 KB
  • Ext.rar (5.4 KB)
  • 下载次数: 115
分享到:
评论

相关推荐

    ExtJS日期多选组件源码

    2. **多选逻辑**:实现多选功能的关键在于如何记录用户的选择并允许他们添加和删除日期。这可能涉及到在组件内部维护一个日期数组,以及与用户交互的UI元素,如复选框或按钮。 3. **UI交互**:为了让用户直观地看到...

    Extjs treeselector 树结构选择器

    6. **Node Interface(节点接口)**:所有树节点都实现了这个接口,提供了添加、删除、查找、遍历等操作。`Ext.data.NodeInterface`扩展了`Ext.data.Model`,提供了额外的树特性。 7. **Events(事件)**:...

    extjs tree 学习资料

    - **选中节点**:使用`select()`,`deselect()`方法。 5. **事件监听** - **节点点击事件**:如`itemclick`,`itemdblclick`等。 - **节点展开/折叠事件**:如`beforeexpand`,`expand`,`beforecollapse`,`...

    Extjs,Jquery,Dhtmlxtree之上的树

    本篇文章主要探讨了三种流行的JavaScript库——Extjs、Jquery、Dhtmlxtree中实现树形结构(Tree)的方法及其差异。树形结构在用户界面设计中扮演着重要的角色,尤其是在展现具有层级关系的数据时。下面我们将分别...

    extjs帮助文档pdf版

    ### ExtJS核心API详解 #### 1. Ext 类 (P.2) - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用...

    ext简单的增删改查

    在这个"EXT简单的增删改查"项目中,开发者利用EXTJS与SQLServer数据库相结合,实现了基本的数据管理功能,包括添加(Add)、删除(Delete)、修改(Update)和查询(Query)。 1. EXTJS的基本概念: - 组件...

    使用右键实现增删改查的树形结构设计

    我们将重点介绍前端实现的细节,包括如何定义树形结构、如何响应用户的右键点击事件以及如何处理数据的增加、删除和修改。 #### 核心概念与技术 在实现这一功能前,我们需要了解以下几个核心概念和技术: 1. **...

    ExtAspNet_v2.3.2_dll

    -重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...

Global site tag (gtag.js) - Google Analytics