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