当前位置: 代码迷 >> JavaScript >> ext js tree 带搜寻(支持树枝节点和叶子节点)+ 大select(mutiple)
  详细解决方案

ext js tree 带搜寻(支持树枝节点和叶子节点)+ 大select(mutiple)

热度:417   发布时间:2013-11-04 16:56:03.0
ext js tree 带搜索(支持树枝节点和叶子节点)+ 大select(mutiple)
<%@page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@include file="/common/path_header.jsp" %>
<%@include file="/common/grid_header.jsp" %>
<%@include file="/common/ext_header.jsp" %>
<html>
    <head>
        <title>账户树</title>
		<script src="${path}/script/jquery/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            var obj = window.dialogArguments;
        	var retVal = "";
        	var selectDept  = "";//当前被点击的部门
        	var singleSelect = obj.singleSelect;
        	var areadySelectusersName = obj.areadySelectusersName;//所有用户名
        	var areadySelectusersId = obj.areadySelectusersId;//所有用户id
        	var areadySelectusersEmail = obj.areadySelectusersEmail;//所有email
            //异步树节点数据请求
            var requestConfig = {
                url : obj.treeUrl,
                callback: function(options, success, response){
                    acctInfo = Ext.decode(response.responseText);
                    var acctTree = Ext.getCmp("acct-tree");
                    acctTree.root.appendChild(acctInfo);
                    acctTree.expandAll();
                }
            };
            Ext.Ajax.request(requestConfig);
            
            AcctPanel = function(){
                AcctPanel.superclass.constructor.call(this, {
                    id: 'acct-tree',
					checkModel:'cascade',
                    split: true,
                    header: false,
                    width: 280,
                    minSize: 175,
                    maxSize: 500,
                    collapsible: true,
                    margins: '0 0 5 5',
                    cmargins: '0 0 0 0',
                    rootVisible: false,
                    lines: false,
                    autoScroll: true,
                    animCollapse: false,
                    animate: false,
                    collapseMode: 'mini',
                    loader: new Ext.tree.TreeLoader({
                        preloadChildren: true,
                        clearOnLoad: false
                    }),
                    root: new Ext.tree.AsyncTreeNode({
                        text: 'Ext JS',
                        id: 'root',
                        expanded: true,
                        children: []
                    }),
                    collapseFirst: false,
                    listeners: {
						'click':function (node){
						    selectDept = node.text;
							jQuery.ajax({
					            url: path + '/productpool/findUserTreeAll.do',
					            type: "post",
					            data: {
					                deptids: node.id
					            },
					            dataType: "json",
					            success: function(d){
					                 var $select1 = jQuery("#select1");
					                 $select1.html("");//先清空已有数据
					                 jQuery.each(d.children,function (k,v){
					                     var uid = v.id;
					                     var uname = v.text;
					                     var option = jQuery('<option value="'+uid+'">'+uname+'</option>');
					                     option.attr("title",v.email);
						                 $select1.append(option);
					                 });
					            },
					            error: function(a, b, c){
									jQuery.ligerDialog.error(b);
					            }
					        });
						},
                        'checkchange': function(node, checked){
                            //树节点checked事件监听
                            //处理所有父节点
                            node.cascade(function(node){
                                node.attributes.checked = checked;
                                node.ui.checkbox.checked = checked;
								if(retVal.indexOf(node.id)<0)//去重复
								   retVal += node.id + "|" + node.text+",";
                                node.eachChild(function(child){
                                    child.ui.toggleCheck(checked);
                                    child.attributes.checked = checked;
                                    child.fireEvent('checkchange', child, checked);
                                });
                            });
                        }
                    }
                
                });
                
            };
            
            Ext.extend(AcctPanel, Ext.tree.TreePanel, {
                initComponent: function(){
                    this.hiddenPkgs = [];
                    Ext.apply(this, {
                        tbar: [' ', new Ext.form.TextField({
                            width: 200,
                            emptyText: '',
                            enableKeyEvents: true,
                            listeners: {
                                render: function(f){
                                    this.filter = new Ext.tree.TreeFilter(this, {
                                        clearBlank: true,
                                        autoClear: true
                                    });
                                },
                                keydown: {
                                    fn: this.filterTree,
                                    buffer: 350,
                                    scope: this
                                },
                                scope: this
                            }
                        }), ' ', ' '            
                        ]
                    })
                    AcctPanel.superclass.initComponent.call(this);
                },
                
                filterTree: function(t, e){
                    var text = t.getValue();
                    Ext.each(this.hiddenPkgs, function(n){
                        n.ui.show();
                    });
                    if (!text) {
                        this.filter.clear();
                        return;
                    }
                    this.expandAll();
                    
                    var re = new RegExp('^' + Ext.escapeRe(text), 'i');
                    this.filter.filterBy(function(n){
                        var textval = n.text; 
                        return !n.isLeaf() || re.test(n.text); 
                    });
                    
                    this.hiddenPkgs = [];
                    var me = this;
                    this.root.cascade(function(n){
                        if(!n.isLeaf()&& n.ui.ctNode.offsetHeight<3&& !re.test(n.text)){ 
			                n.ui.hide(); 
			                me.hiddenPkgs.push(n); 
			            } 
			            if(n.id!='root'){ 
			                if(!n.isLeaf() && n.ui.ctNode.offsetHeight >= 3 && me.hasChild(n,re)==false&& !re.test(n.text)){
			                    n.ui.hide(); 
			                    me.hiddenPkgs.push(n); 
			                } 
			            } 
                    });
                },
                hasChild :function (n,re){ 
		            var str=false; 
		            n.cascade(function(n1){ 
		                 if(re.test(n1.text)){ 
		                     str = true; 
		                     return; 
		                 } 
		             }); 
		             return str; 
		        },
                selectClass: function(cls){
                    if (cls) {
                        var parts = cls.split('.');
                        var last = parts.length - 1;
                        var res = [];
                        var pkg = [];
                        for (var i = 0; i < last; i++) { 
                            var p = parts[i];
                            var fc = p.charAt(0);
                            var staticCls = fc.toUpperCase() == fc;
                            if (p == 'Ext' || !staticCls) {
                                pkg.push(p);
                                res[i] = 'pkg-' + pkg.join('.');
                            }
                            else 
                                if (staticCls) {
                                    --last;
                                    res.splice(i, 1);
                                }
                        }
                        res[last] = cls;
                        
                        this.selectPath('/root/acctdocs/' + res.join('/'));
                    }
                }
            });
            Ext.onReady(function(){
                var acct = new AcctPanel();
                acct.on('click', function(node, e){
                    if (node.isLeaf()) {
                    }
                });
                acct.render("acctTree");
				jQuery(".x-panel-body-noheader").css("overflow","hidden");
				bindEvent();
				if(areadySelectusersName)
				   createOptions();//如果已经有选择的人员则自动添加已选人员
            });
            
           /**
           **生成option
           **/ 
           var areadyDept;
           function  createOptions (){
               areadyDept = true;//是否是带过来的
               var usersName = areadySelectusersName.split(",");
               var usersId = areadySelectusersId.split(",");
               var usersEmails = areadySelectusersEmail.split(",");
               jQuery.each(usersName,function (k,v){
					var $tmpOptions =  jQuery('<option value="'+usersId[k]+'">'+v+'</option>');
				    var email = usersEmails[k];
					$tmpOptions.attr("title",email);
					$tmpOptions.attr("class","isAready");//是带过来的
					$tmpOptions.appendTo('#select2');
               });
           }
            
            
            /**option点击事件**/
            function singleSel(srcEle){
                var hasOtherSelect = jQuery(srcEle).find("option:selected");
                if(hasOtherSelect.length>1){
                  //说明已经有其他选过的
                  var selectedOp = jQuery(srcEle).find("option:selected");
                  selectedOp.attr("selected",false);
                  jQuery(selectedOp[0]).attr("selected",true);
                  //alert("每个部门职能选择一个会签人!");
                }
            }
            /**验证是否已经添加过**/
            function validateRepeat(validateVal,destEle){
                if(singleSelect){
			       jQuery.each(destEle,function(k,v){
	            		if(jQuery.trim(jQuery(v).text()).indexOf(jQuery.trim(validateVal).substring(validateVal.indexOf("/")+1))>=0){
	            		   var txt = jQuery(v).text();
	            		   jQuery(v).text(txt.substring(0,txt.indexOf("/")>=0?txt.indexOf("/"):txt.length-1)).appendTo(jQuery('#select1'));//移除重复值
	            		   return false;
	            		}
	            	});
			    }else{
	            	jQuery.each(destEle,function(k,v){
	            		if(jQuery.trim(jQuery(v).text()) == jQuery.trim(validateVal)){
	            		   jQuery(v).remove();//移除重复值
	            		   return false;
	            		}
	            	});
			    }
            	return true;
            }
            
            //多选事件
            function bindEvent(){
	            jQuery('#confirm').click(function(){
					window.close();
				});
	            jQuery('#cancel').click(function(){
					var $options1 = jQuery('#select1 option');
					var $options2 = jQuery('#select2 option');
					$options1.remove();
					$options2.remove();
				});
				
	            jQuery('#add').click(function(){
					var $options = jQuery('#select1 option:selected');//获取当前选中的项
					var srcEleOp = jQuery('#select2 option');
					var $remove = $options.remove();//删除下拉列表中选中的项
					jQuery.each($options,function (k,v){
					    var thiz = $(v);
						var thizClass = thiz.attr("class");
						var thizId = thiz.attr("id");
						if("isAready" == thizClass)
						   selectDept  = thizId;
						var text = thiz.text()+"/"+selectDept;
						validateRepeat(text,jQuery('#select2 option'));//验证是否已经添加
						var $tmpOptions
						if("isAready" == thizClass){
					      $tmpOptions =  jQuery('<option class="isAready"  value="'+thiz.val()+'">'+text+'</option>');
					    }else{
						  $tmpOptions  =  jQuery('<option value="'+thiz.val()+'">'+text+'</option>');
					    }
					    var email = thiz.attr("title");
						$tmpOptions.attr("title",email);
						$tmpOptions.appendTo('#select2');
					});
				});
				
				jQuery('#remove').click(function(){
					var $removeOptions = jQuery('#select2 option:selected');
					var $remove = $removeOptions.remove();//删除下拉列表中选中的项
					jQuery.each($removeOptions,function (k,v){
					     var thiz = $(v);
					    var thizClass = thiz.attr("class");
						var text = thiz.text().substring(0,thiz.text().indexOf("/"));
						var text1 = thiz.text().substring(thiz.text().indexOf("/")+1);
						var $tmpOptions
					    if("isAready" == thizClass){
					      $tmpOptions =  jQuery('<option class="isAready" id="'+text1+'" value="'+thiz.val()+'">'+text+'</option>');
					      $tmpOptions.data("dep",text1);
					    }else{
						  $tmpOptions =  jQuery('<option value="'+thiz.val()+'">'+text+'</option>');
					    }
						var email = thiz.attr("title");
						$tmpOptions.attr("title",email);
						$tmpOptions.appendTo('#select1');
					});
				});
				
				jQuery('#addAll').click(function(){
					var $options = jQuery('#select1 option');
					var $remove = $options.remove();//删除下拉列表中选中的项
					jQuery.each($options,function (k,v){
					    var thiz = $(v);
					    var thizClass = thiz.attr("class");
						var thizId = thiz.attr("id");
						if("isAready" == thizClass)
						   selectDept  = thizId;
						var text = thiz.text()+"/"+selectDept;
						validateRepeat(text,jQuery('#select2 option'));//验证是否已经添加
						var $tmpOptions =  jQuery('<option value="'+thiz.val()+'">'+text+'</option>');
						var email = thiz.attr("title");
						$tmpOptions.attr("title",email);
						$tmpOptions.appendTo('#select2');
					});
				});
				
				jQuery('#removeAll').click(function(){
					var $options = jQuery('#select2 option');
					var $remove = $options.remove();//删除下拉列表中选中的项
					jQuery.each($options,function (k,v){
					    var thiz = $(v);
					    var thizClass = thiz.attr("class");
						var text = thiz.text().substring(0,thiz.text().indexOf("/"));
						var text1 = thiz.text().substring(thiz.text().indexOf("/")+1);
						var $tmpOptions
					    if("isAready" == thizClass){
					      $tmpOptions =  jQuery('<option class="isAready" id="'+text1+'" value="'+thiz.val()+'">'+text+'</option>');
					      $tmpOptions.data("dep",text1);
					    }else{
						  $tmpOptions =  jQuery('<option value="'+thiz.val()+'">'+text+'</option>');
					    }
						var email = thiz.attr("title");
						$tmpOptions.attr("title",email);
						$tmpOptions.appendTo('#select1');
					});
				});
				
				//双击事件
				jQuery('#select1').dblclick(function(){
					var $options = jQuery('option:selected', this);//注意此处“option”与“:”之间的空格,有空格是不可以的
					var $remove = $options.remove();//删除下拉列表中选中的项
					jQuery.each($options,function (k,v){
					    var thiz = $(v);
						var thizClass = thiz.attr("class");
						var thizId = thiz.attr("id");
						if("isAready" == thizClass)
						   selectDept  = thizId;
						var text = thiz.text()+"/"+selectDept;
						validateRepeat(text,jQuery('#select2 option'));//验证是否已经添加
						var $tmpOptions
						if("isAready" == thizClass){
					      $tmpOptions =  jQuery('<option class="isAready"  value="'+thiz.val()+'">'+text+'</option>');
					    }else{
						  $tmpOptions  =  jQuery('<option value="'+thiz.val()+'">'+text+'</option>');
					    }
					    var email = thiz.attr("title");
						$tmpOptions.attr("title",email);
						$tmpOptions.appendTo('#select2');
					});
				});
				//双击事件
				jQuery('#select1').click(function(){
				    if(singleSelect){
				       singleSel(this);
				    }
				});
				
				jQuery('#select2').dblclick(function(){
					var $options = jQuery('#select2 option:selected');
					var $remove = $options.remove();//删除下拉列表中选中的项
					jQuery.each($options,function (k,v){
					    var thiz = $(v);
					    var thizClass = thiz.attr("class");
						var text = thiz.text().substring(0,thiz.text().indexOf("/"));
						var text1 = thiz.text().substring(thiz.text().indexOf("/")+1);
						var $tmpOptions
					    if("isAready" == thizClass){
					      $tmpOptions =  jQuery('<option class="isAready" id="'+text1+'" value="'+thiz.val()+'">'+text+'</option>');
					      $tmpOptions.data("dep",text1);
					    }else{
						  $tmpOptions =  jQuery('<option value="'+thiz.val()+'">'+text+'</option>');
					    }
						var email = thiz.attr("title");
						$tmpOptions.attr("title",email);
						$tmpOptions.appendTo('#select1');
					});
				});
            }
            
            window.onbeforeunload = function (){
                    var mustSel = "法律部,合规部,清算部,风险控制部";//必选的四个部门
                    var $options = jQuery('#select2 option');//获取当前选中的项
                    var vFlag = 0;
					var ids = "";
					var names = "";
					var emails = "";
					jQuery.each($options,function (k,v){
					    var thiz = $(v);
					    var txt = thiz.text();
					    if(txt.indexOf("法律部")>=0||txt.indexOf("合规部")>=0||txt.indexOf("清算部")>=0||txt.indexOf("风险控制部")>=0){
					    	vFlag++;
					    }
					    ids += thiz.val()+",";
					    names += thiz.text()+",";
					    emails += thiz.attr("title")+",";
					});
					retVal += ids.substring(0,ids.length-1) + "|" + names.substring(0,names.length-1)+"|"+emails.substring(0,emails.length-1);
						window.returnValue = retVal;
					/*
					if(vFlag<4){
						alert(mustSel+"四个部门为必选部门,请您核对!");
						return false;
					}else{
					    retVal += ids.substring(0,ids.length-1) + "|" + names.substring(0,names.length-1)+"|"+emails.substring(0,emails.length-1);
						window.returnValue = retVal;
					}*/
            }
            //判断字符串是否重复
            function fun(str){
				var arrays = new Array();
				var flag = true;
				for(var i=0;i<str.length;i++){
					var temS = str.charAt(i);
					if(str.replace(temS,"").indexOf(temS) > -1){
						flag = false;
						break;
					}
					arrays.push(temS);
				}
				if(flag){
					str = arrays.sort().join("");
				}else{
					str = "";
				}
				alert(str);
		    }
        </script>
		<style>
			.x-tree-node-cb{
				margin-bottom:-7px;
			}
			select,option{
				border:3px solid lightblue;
				margin-left:15px;
				margin-top:15px;
			}
		</style>
    </head>
    <body>
	    <span class="spanbtn" style="cursor: pointer;" id="confirm"><img id="confirmImg" src="img/confirmBtn.jpg"/></span>
	    <span class="spanbtn" style="cursor: pointer;" id="cancel"><img id="cancelImg" src="img/cancelBtn.jpg"/></span>
        <div id="acctTree" style="float:left;">
        </div>
        <div class="multipleDiv" style="float:left;">
	    	<select multiple id="select1" style="width:150px;height:500px;float: left;">
	    	</select>
		    <div style="float: left;margin: 130px 0 0 10px;">
		    	<span class="spanbtn" style="cursor: pointer;" id="add"><img id="addImg" src="img/add.jpg"/></span><br>
		    	<span class="spanbtn" style="cursor: pointer;"  id="remove"><img id="removeImg" src="img/del.jpg"/></span><br>
		    	<span class="spanbtn" style="cursor: pointer;"  id="addAll"><img id="addAllImg" style="margin-left:5px;" src="img/addAll.jpg"/></span><br>
		    	<span class="spanbtn" style="cursor: pointer;"  id="removeAll"><img id="remoeAllImg" style="margin-left:3px;" src="img/delAll.jpg"/></span>
		    </div>
	    	<select multiple id="select2" style="width:150px;height:500px;float: left;">
	    	</select>
	    </div>
    </body>
</html>

?

  相关解决方案