<%@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>