Update quickConfig.jsp

src/main/webapp/WEB-INF/views/formview/quickConfig.jsp

@@ -9,16 +9,32 @@
 <c:set var="ctx" value="${pageContext.request.contextPath}" />
 
 <%
-com.cesgroup.cesmonitor.service.LoginUser user=com.cesgroup.cesmonitor.common.Util.getLoginUser();
- Integer myUserId = null;
-if(null!=user){
-	myUserId = user.getUserid();
-}
+    com.cesgroup.cesmonitor.service.LoginUser user = com.cesgroup.cesmonitor.common.Util.getLoginUser();
+			Integer myUserId = null;
+			if (null != user) {
+				myUserId = user.getUserid();
+			}
 %>
-<script>var myUserId = "<%= myUserId %>"</script>
+<script>var myUserId = "<%=myUserId%>"
+	
+</script>
 
 <link rel="stylesheet" type="text/css"
 	href="${ctx}/styles/jquery-ui.css" />
+<link href="${ctx}/styles/jquery.searchableSelect.css" rel="stylesheet"
+	type="text/css">
+<style>
+/* .table-forms-td-right select {
+    vertical-align: middle;
+}
+select {
+     font-family: Arial, Tahoma, Verdana, sans-serif; 
+     font-size: 1em; 
+    height: 24px;
+    padding: 3px 3px 3px 0;
+     background-color: #fff;
+} */
+</style>
 <div class="header-title-nobg table com-head">
 	<div>
 		<h1>快速访问配置</h1>
@@ -129,7 +145,7 @@ if(null!=user){
 											<div class="form-input-margin"></div> <select id="selectHost"
 											name="selectHost" autocomplete="off">
 												<option value="0" selected="selected">请选择主机</option>
-										</select>
+										</select> <!-- 已有图形 添加时的显示框 -->
 											<div class="form-input-margin"></div> <select
 											id="selectPicture" name="selectPicture" autocomplete="off">
 												<option value="0" selected="selected">请选择图形</option>
@@ -236,12 +252,15 @@ if(null!=user){
 											id="selectHost2" name="new_condition[operator]"
 											autocomplete="off">
 												<option value="0" selected="selected">请选择主机</option>
-										</select>
+										</select> <!--无图形时 创建-->
 											<div class="form-input-margin"></div> <select
 											id="selectPicture2" name="new_condition[operator]"
 											autocomplete="off">
 												<option value="0" selected="selected">请选择图形</option>
 										</select>
+
+
+
 											<div class="form-input-margin"></div> <input type="text"
 											id="new_condition_value2" name="new_condition[value]"
 											placeholder="请在此输入快速访问图形名称" maxlength="255"
@@ -274,693 +293,934 @@ if(null!=user){
 	</div>
 </div>
 <script src="${ctx}/js/vendors/jquery-ui.js"></script>
+<script src="${ctx}/js/jquery.searchableSelect.js"></script>
 <script>
 	var graphArray = new Array();
 	var removeArray = new Array();
 	var oldData = new Array();
 	MMenu.def_label = 'network';
-	var myGroupId,groupAll,tb,cbs,cbsLen,isChecked;
+	var myGroupId, groupAll, tb, cbs, cbsLen, isChecked;
 	var thisUserId = myUserId;
-	 jQuery( "#dialog-modal" ).dialog({
-	      height: 140,
-	      modal: true
-	    });
-	 jQuery.ajax({
-			  method: "get",
-			  url: "${ctx}/quickaccess/findFastGroupGraphByUserId.json",
-			  data : {
-  				userId : thisUserId,
-  			  },
-			  success:function(data) {
-				   var html='';
-				   if(data.length!=0){
-					   for(var i=0;i<data.length;i++){
-						   var htmlInner="";
-						   for(var j=0;j<data[i].graphName.length;j++){
-						       htmlInner += '<span>'+data[i].graphName[j]+'</span>&nbsp;&nbsp;&nbsp;';
-						     }
-						  html += '<tr><td><input type="checkbox" id="groups_'+i+'" name="groups['+i+']" value="'+data[i].groupId+'"></td>'+
-						        '<td><a id='+data[i].groupId+' onClick="quickConfig(this.id,this.innerHTML);">'+data[i].groupName+'</a></td>'+
-							     '<td class="graphName">'+htmlInner+'</td></tr>';
-					   }
-				   }else{
-					   html='<tr class="nothing-to-show"><td colspan="4">未发现数据</td></tr>';
-				   }
-				  jQuery('#main-group').html(html);
-				//多选删除 
-					     groupAll=jQuery("#all_groups");
-					 	 tb=jQuery("#main-group");
-					     cbs=tb.find("input[type=checkbox]");
-					     cbsLen=cbs.length;
-					     jQuery("#totalNum").html(cbsLen);
-					     //点击全选全不选
-					     groupAll.click(function(){
-							 isChecked=jQuery(this).prop("checked");
-							 console.log(isChecked)
-							 if (isChecked) {
-					             cbs.prop("checked", true);
-					             jQuery("#deletedSure").removeAttr("disabled");
-					         } else {
-					             cbs.prop("checked", false);
-					             jQuery("#deletedSure").attr("disabled","disabled");
-					         }
-							 jQuery("#selected_count").html(cbsLen+' 选择');
-						 });
-					     //点击某一个 
-					     cbs.on('click',function(){
-							 var $selCheckBox = tb.find(":checkbox:checked");
-							 if ($selCheckBox.length === cbsLen) {
-								 groupAll.prop("checked", true);
-					         } else {
-					        	 groupAll.prop("checked", false);
-					         }
-							 if($selCheckBox.length == 0){
-								 jQuery("#deletedSure").attr("disabled","disabled");
-							 }else{
-								 jQuery("#deletedSure").removeAttr("disabled");
-							 }
-							 jQuery("#selected_count").html($selCheckBox.length+' 选择');
-						 })
-			  },
-			  error:function(err){
-				  alert(err);
-			  }
-		  });
-	 //点击批量删除确认键
-	 
-	 function del() {
-	var msg = "确定删除";
-	if (confirm(msg)==true){
-			 var inputIds=[];
-			 if(isChecked){
-				 cbs.each(function(i,ele){
-					  inputIds.push(jQuery(cbs[i]).val());
-				 })
-				 
-			 }else{
-				 var selCheckBox = tb.find(":checkbox:checked");
-				 selCheckBox.each(function(i,ele){
-					  inputIds.push(jQuery(selCheckBox[i]).val());
-				 })
-			 }
-			 var myinputIds = inputIds.toString();
-			 jQuery.ajax({
-	 			  method: "get",
-	 			  url: "${ctx}/quickaccess/deleteByFastGroupId.json",
-	 			  data:{
-	 				 fastGroupGraphIds:myinputIds
-	 			  },
-	 			  success:function(data) {
-	 					if(isChecked){
-	 						jQuery('#main-group').html('<tr class="nothing-to-show"><td colspan="4">未发现数据</td></tr>');
-	 					}else{
-	 						inputIds.each(function(item){
-	 							jQuery("#"+item).parents('tr').remove();
-	 						})
-	 					}
-	 			  }
-	 		  });
-
-			 jQuery("#selected_count").html(0+' 选择');
-	}else{
-	 return; 
+	jQuery("#dialog-modal").dialog({
+		height : 140,
+		modal : true
+	});
+	
+	jQuery.ajax({
+				method : "get",
+				url : "${ctx}/quickaccess/findFastGroupGraphByUserId.json",
+				data : {
+					userId : thisUserId,
+				},
+				success : function(data) {
+					debugger;
+					var html = '';
+					if (data.length != 0) {
+						for (var i = 0; i < data.length; i++) {
+							var htmlInner = "";
+							for (var j = 0; j < data[i].graphName.length; j++) {
+								htmlInner += '<span>' + data[i].graphName[j]
+										+ '</span>&nbsp;&nbsp;&nbsp;';
+							}
+							html += '<tr><td><input type="checkbox" id="groups_'+i+'" name="groups['+i+']" value="'+data[i].groupId+'"></td>'
+									+ '<td><a id='
+									+ data[i].groupId
+									+ ' onClick="quickConfig(this.id,this.innerHTML);">'
+									+ data[i].groupName
+									+ '</a></td>'
+									+ '<td class="graphName">'
+									+ htmlInner
+									+ '</td></tr>';
+						}
+					} else {
+						html = '<tr class="nothing-to-show"><td colspan="4">未发现数据</td></tr>';
+					}
+					jQuery('#main-group').html(html);
+					//多选删除 
+					groupAll = jQuery("#all_groups");
+					tb = jQuery("#main-group");
+					cbs = tb.find("input[type=checkbox]");
+					cbsLen = cbs.length;
+					jQuery("#totalNum").html(cbsLen);
+					//点击全选全不选
+					groupAll.click(function() {
+								isChecked = jQuery(this).prop("checked");
+								console.log(isChecked)
+								if (isChecked) {
+									cbs.prop("checked", true);
+									jQuery("#deletedSure").removeAttr(
+											"disabled");
+								} else {
+									cbs.prop("checked", false);
+									jQuery("#deletedSure").attr("disabled",
+											"disabled");
+								}
+								jQuery("#selected_count").html(cbsLen + ' 选择');
+							});
+					//点击某一个 
+					cbs.on('click',
+									function() {
+										var $selCheckBox = tb
+												.find(":checkbox:checked");
+										if ($selCheckBox.length === cbsLen) {
+											groupAll.prop("checked", true);
+										} else {
+											groupAll.prop("checked", false);
+										}
+										if ($selCheckBox.length == 0) {
+											jQuery("#deletedSure").attr(
+													"disabled", "disabled");
+										} else {
+											jQuery("#deletedSure").removeAttr(
+													"disabled");
+										}
+										jQuery("#selected_count").html(
+												$selCheckBox.length + ' 选择');
+									})
+				},
+				error : function(err) {
+					alert(err);
+				}
+			});
+	//点击批量删除确认键
+
+	function del() {
+		var msg = "确定删除";
+		if (confirm(msg) == true) {
+			var inputIds = [];
+			if (isChecked) {
+				cbs.each(function(i, ele) {
+					inputIds.push(jQuery(cbs[i]).val());
+				})
+
+			} else {
+				var selCheckBox = tb.find(":checkbox:checked");
+				selCheckBox.each(function(i, ele) {
+					inputIds.push(jQuery(selCheckBox[i]).val());
+				})
+			}
+			var myinputIds = inputIds.toString();
+			jQuery
+					.ajax({
+						method : "get",
+						url : "${ctx}/quickaccess/deleteByFastGroupId.json",
+						data : {
+							fastGroupGraphIds : myinputIds
+						},
+						success : function(data) {
+							if (isChecked) {
+								jQuery('#main-group')
+										.html(
+												'<tr class="nothing-to-show"><td colspan="4">未发现数据</td></tr>');
+							} else {
+								inputIds.each(function(item) {
+									jQuery("#" + item).parents('tr').remove();
+								})
+							}
+						}
+					});
+
+			jQuery("#selected_count").html(0 + ' 选择');
+		} else {
+			return;
+		}
 	}
+
+	var selectData = 0;
+	//点击快速访问组的每一项 
+	function quickConfig(ele, name) {
+		debugger;
+		myGroupId = ele;
+		console.log(ele, name)
+		jQuery('#main-content').css('display', "none");
+		jQuery('#main-config1').css('display', "block");
+		jQuery('#main-config2').css('display', "none");
+		jQuery('#chartOverviewSetting').css('display', "none");
+		jQuery('#fastgroup').val(name)
+		jQuery
+				.ajax({
+					method : "get",
+					url : "${ctx}/quickaccess/getGraphsByFastGroupId.json",
+					data : {
+						FastGroupId : ele
+					},
+					success : function(data) {
+						var addHtml = '';
+						for (var k = 0; k < data.length; k++) {
+							addHtml += '<tr id="'+data[k].id+'"><td><span>'
+									+ data[k].name
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].groupname
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].hostname
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].graphname
+									+ '</span></td>'
+									+ '<td class="nowrap">'
+									+ '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>';
+						}
+
+						jQuery('#addHtml1').html(addHtml);
+						//console.log(jQuery('#addHtml1'))
+						oldData = data;
+					},
+					error : function(err) {
+						alert(err);
+					}
+				});
+
+		//列表
+		jQuery
+				.ajax({
+					method : "get",
+					url : "${ctx}/quickaccess/listHostGroupsWithHosts.json",
+					data : null,
+					success : function(data) {
+						var html = '', html1 = '';
+						html = '<option selected="selected">选择主机组</option>';
+						for (var i = 0; i < data.length; i++) {
+							html += '<option data-value="'+data[i].groupid+'">'
+									+ data[i].name + '</option>';
+						}
+						html1 = '<option selected="selected">选择主机</option>';
+						for (var j = 0; j < data[0].hosts.length; j++) {
+							html1 += '<option data-value="'+data[0].hosts[j].hostid+'">'
+									+ data[0].hosts[j].name + '</option>';
+						}
+						jQuery('#selectHost').html(html1);
+						jQuery('#hostGroup').html(html);
+						selectData = data;
+					}
+				});
+
+	};
+	//点击快速访问配置按钮 
+	function chartOverviewConfig() {
+		jQuery('#main-content').css('display', "none");
+		jQuery('#main-config1').css('display', "none");
+		jQuery('#chartOverviewSetting').css('display', "none");
+		jQuery('#main-config2').css('display', "block");
+		//url: "${ctx}/cesmonitor/quickaccess/findGraphByHostId.json?hostId=10246",
+		jQuery.ajax({
+			method : "get",
+			url : "${ctx}/quickaccess/listHostGroupsWithHosts.json",
+			data : null,
+			success : function(data) {
+				var html = '', html1 = '';
+				html = '<option selected="selected">选择主机组</option>';
+				for (var i = 0; i < data.length; i++) {
+					html += '<option data-value="'+data[i].groupid+'">'
+							+ data[i].name + '</option>';
+
+				}
+				html1 = '<option selected="selected">选择主机</option>';
+				/* for(var j=0;j<data[0].hosts.length;j++){
+					 html1 += '<option data-value="'+data[0].hosts[j].hostid+'">'+data[0].hosts[j].name+'</option>';
+				  } */
+				jQuery('#selectHost2').html(html1);
+				jQuery('#hostGroup2').html(html);
+				selectData = data;
+			}
+		});
+
+	};
+
+	jQuery("#hostGroup").change(
+					function() {
+						var group = jQuery("#hostGroup").val(); //获取群组下拉菜单的值 
+						for (var i = 0; i < selectData.length; i++) {
+							if (group == selectData[i].name) {
+								var html = '';
+								html = '<option selected="selected">请选择主机</option>';
+								for (var j = 0; j < selectData[i].hosts.length; j++) {
+									html += '<option data-value="'+selectData[i].hosts[j].hostid+'">'
+											+ selectData[i].hosts[j].name
+											+ '</option>';
+								}
+
+							}
+						}
+						jQuery("#selectHost").html(html);
+						var html2 ='<option>请选择图形</option>';
+						//对应图形清空
+						jQuery(".searchable-select-holder").html(html2);
+						jQuery(".searchable-select-dropdown").css("display","none")
+					});
+
+	jQuery("#hostGroup2").change(
+					function() {
+						var group = jQuery("#hostGroup2").val(); //获取群组下拉菜单的值 
+						for (var i = 0; i < selectData.length; i++) {
+							if (group == selectData[i].name) {
+								var html = '';
+								html = '<option selected="selected">请选择主机</option>';
+								for (var j = 0; j < selectData[i].hosts.length; j++) {
+									html += '<option data-value="'+selectData[i].hosts[j].hostid+'">'
+											+ selectData[i].hosts[j].name
+											+ '</option>';
+								}
+							}
+						}
+						var html2 ='<option>请选择图形</option>';
+						jQuery("#selectHost2").html(html);
+						
+						//对应图形清空
+						jQuery(".searchable-select-holder").html(html2);
+						jQuery(".searchable-select-dropdown").css("display","none")
+						
+					});
+
+	
+	function changeHostGroup2() {
+		var group = jQuery("#hostGroup2").val(); //获取群组下拉菜单的值 
+		for (var i = 0; i < selectData.length; i++) {
+			if (group == selectData[i].name) {
+				var html = '';
+				html = '<option selected="selected">请选择主机</option>';
+				for (var j = 0; j < selectData[i].hosts.length; j++) {
+					html += '<option data-value="'+selectData[i].hosts[j].hostid+'">'
+							+ selectData[i].hosts[j].name
+							+ '</option>';
+				}
+			}
+		}
+		jQuery("#selectHost2").html(html);
+		jQuery("#selectPicture2").html('<option>请选择图形</option>');
 	}
+	
+	jQuery("#selectHost").change(
+					function(event) {
+						var group = jQuery("#selectHost").val(); //获取主机组下拉菜单的值
+						var hostId = jQuery("#selectHost").find(
+								"option:selected").attr('data-value');
+						//var hostId = '10647';
+						jQuery
+								.ajax({
+									type : 'post',
+									url : "${ctx}/quickaccess/findGraphByHostId.json", //请求查询所有主机的url
+									data : {
+										hostId : hostId,
 
-	   var selectData=0;
-	   //点击快速访问组的每一项 
-	   function quickConfig(ele,name){
-	            myGroupId = ele;
-		        console.log(ele,name)
-	    		jQuery('#main-content').css('display',"none");
-	    		jQuery('#main-config1').css('display',"block");
-	    		jQuery('#main-config2').css('display',"none");
-	    		jQuery('#chartOverviewSetting').css('display',"none");
-	    		jQuery('#fastgroup').val(name)
-	    		jQuery.ajax({
-		  			  method: "get",
-		  			  url: "${ctx}/quickaccess/getGraphsByFastGroupId.json",
-		  			  data:{
-		  				FastGroupId:ele
-		  			  },
-		  			  success:function(data) {
-		  					var addHtml='';
-		  				 for(var k=0;k<data.length;k++){	
-		  					addHtml+='<tr id="'+data[k].id+'"><td><span>'+data[k].name+'</span></td>'+
-		  					                                 '<td><span>'+data[k].groupname+'</span></td>'+
-		  					                                 '<td><span>'+data[k].hostname+'</span></td>'+
-		  					                                 '<td><span>'+data[k].graphname+'</span></td>'+
-		  					                                 '<td class="nowrap">'+
-		  					                                 '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>' ;
-		  				 }
-		  				 
-		  				  jQuery('#addHtml1').html(addHtml);
-		  				  //console.log(jQuery('#addHtml1'))
-		  				  oldData = data;
-		  			  },
-		  			  error:function(err){
-		  				  alert(err);
-		  			  }
-		  		  });
-	    		jQuery.ajax({
-	  			  method: "get",
-	  			  url: "${ctx}/quickaccess/listHostGroupsWithHosts.json",
-	  			  data:null,
-	  			  success:function(data) {
-	  				   var html='',html1='';
-	  					html ='<option selected="selected">选择主机组</option>';
-	  				   for(var i=0;i<data.length;i++){
-	  					  html += '<option data-value="'+data[i].groupid+'">'+data[i].name+'</option>';
-	  				   }
-	  				   html1 ='<option selected="selected">选择主机</option>'; 
-		  				  for(var j=0;j<data[0].hosts.length;j++){
-		  						 html1 += '<option data-value="'+data[0].hosts[j].hostid+'">'+data[0].hosts[j].name+'</option>';
-		  					  }
-  					  jQuery('#selectHost').html(html1);
-	  				  jQuery('#hostGroup').html(html);
-	  				  selectData=data;
-	  			  }
-	  		  });
-	    		
-	    };
-	    //点击快速访问配置按钮 
-	   function chartOverviewConfig(){
-				 jQuery('#main-content').css('display',"none");
-		   		jQuery('#main-config1').css('display',"none");
-		   		jQuery('#chartOverviewSetting').css('display',"none");
-		   		jQuery('#main-config2').css('display',"block");
-		   		//url: "${ctx}/cesmonitor/quickaccess/findGraphByHostId.json?hostId=10246",
-		   		jQuery.ajax({
-		  			  method: "get",
-		  			  url: "${ctx}/quickaccess/listHostGroupsWithHosts.json",
-		  			  data:null,
-		  			  success:function(data) {
-		  				   var html='',html1='';  	
-	  				       html ='<option selected="selected">选择主机组</option>';
-		  				   for(var i=0;i<data.length;i++){
-		  					  html += '<option data-value="'+data[i].groupid+'">'+data[i].name+'</option>';
-
-		  				   }
-		  				      html1 ='<option selected="selected">选择主机</option>';
-			  				  /* for(var j=0;j<data[0].hosts.length;j++){
-			  						 html1 += '<option data-value="'+data[0].hosts[j].hostid+'">'+data[0].hosts[j].name+'</option>';
-			  					  } */
-	  					  jQuery('#selectHost2').html(html1);
-		  				  jQuery('#hostGroup2').html(html);
-		  				  selectData=data;
-		  			  }
-		  		  });
-		   		
-	   };
-	   	
-	   jQuery("#hostGroup").change(function() {
-   		var group = jQuery("#hostGroup").val();  //获取群组下拉菜单的值 
-        for(var i=0;i<selectData.length;i++){
-           	if(group==selectData[i].name){
-           		var html='';
-           		html ='<option selected="selected">请选择主机</option>';
-           		for(var j=0;j<selectData[i].hosts.length;j++){
-           			html += '<option data-value="'+selectData[i].hosts[j].hostid+'">'+selectData[i].hosts[j].name+'</option>';
-           		}
-           		
-           	}
-           }
-        jQuery("#selectHost").html(html);
-   	});
-	   
-	   jQuery("#hostGroup2").change(function() {
-	   		var group = jQuery("#hostGroup2").val();  //获取群组下拉菜单的值 
-	        for(var i=0;i<selectData.length;i++){
-	           	if(group==selectData[i].name){
-	           		var html='';
-	           		html ='<option selected="selected">请选择主机</option>';
-	           		for(var j=0;j<selectData[i].hosts.length;j++){
-	           			html += '<option data-value="'+selectData[i].hosts[j].hostid+'">'+selectData[i].hosts[j].name+'</option>';
-	           		}	
-	           	}
-	        }
-	        jQuery("#selectHost2").html(html);
-        	jQuery("#selectPicture2").html('<option>请选择图形</option>');
-	   	});
-	   
-	   
-	   jQuery("#selectHost").change(function(event) {
-   		var group = jQuery("#selectHost").val();  //获取主机组下拉菜单的值
-   		var hostId = jQuery("#selectHost").find("option:selected").attr('data-value');
-   		//var hostId = '10647';
-   			jQuery.ajax({
-           		type:'post',
-           		url:"${ctx}/quickaccess/findGraphByHostId.json", //请求查询所有主机的url
-           		data : {
-    				hostId : hostId,
-
-    			},
-           		success:function(data){     			
-                    if(data.length!=0){
-                    	var html='';
-	           			for(var i=0;i<data.length;i++){
-	           				html += '<option data-value="'+data[i].graphid+'">'+data[i].name+'</option>';
-	           		    }
-	           			jQuery("#selectPicture").html(html);
-                    }else{
-                    	html='<option>无数据</option>';
-                    	jQuery("#selectPicture").html(html);
-                    }
-           	    }
-           	});
-    	});
-	   
-	   jQuery("#selectHost2").change(function() {
-	   		var group = jQuery("#selectHost2").val();  //获取主机组下拉菜单的值
-	   		
-	   		var hostId = jQuery("#selectHost2").find("option:selected").attr('data-value');
-	   			jQuery.ajax({
-	           		type:'post',
-	           		url:"${ctx}/quickaccess/findGraphByHostId.json", //请求查询所有主机的url
-	    			data : {
-	    				hostId : hostId,
-	    			},
-	           		success:function(data){
-	           			
-                        if(data.length!=0){
-                        	var html='';
-    	           			for(var i=0;i<data.length;i++){
-    	           				
-    	           				html += '<option data-value="'+data[i].graphid+'">'+data[i].name+'</option>';
-    	           		    }
-    	           			jQuery("#selectPicture2").html(html);
-                        }else{
-                        	html='<option>无数据</option>';
-                        	jQuery("#selectPicture2").html(html);
-                        }
-	           			
-	           	    }
-	           	});
-	    	}); 
-	  jQuery('#addItem').click(function(){
-		  var item0=jQuery('#new_condition_value').val();
-		  var item1=jQuery("#hostGroup").val();
-		  var item2=jQuery("#selectHost").val();
-		  var item3=jQuery("#selectPicture").val();
-		  var addHtml='<tr id="conditions_0"><td><span>'+item0+'</span></td><td><span>'+item1+'</span></td><td><span>'+item2+'</span></td><td><span>'+item3+'</span></td><td class="nowrap"><button type="button" name="remove" class="btn-link remove">移除</button></tr>'
-		  jQuery('#addHtml1').append(addHtml);
-	  });
-	  jQuery("#addHtml1").on("click",".remove",function(){
-		 var ele = this.parentNode.parentNode;
-		  ele.parentNode.removeChild(ele);
-	  })
-	  
-	function saveGraph(){
-			  var uuid = getUuid();
-			  uuid = uuid.replace(/-/g,'')		  
-			  var fastGroupName = jQuery("#fastgroup").val();
-
-			  if("选择主机组" == jQuery("#hostGroup").find("option:selected").val()){
-				  alert("请选择主机组");
-				  return;
-			  } 
-			  if("请选择主机" == jQuery("#selectHost").find("option:selected").val()){
-				  alert("请选择主机");
-				  return;
-			  } 
-			  if("0" == jQuery("#selectPicture").find("option:selected").val()){
-				  alert("请选择图形");
-				  return;
-			  } 
-			  
-			  var userId = thisUserId;
-			  var graphName = jQuery("#new_condition_value").val();
-			  if(graphName == ""){
-				  alert("请输入快速访问图形名称");
-				  return;
-			  }
-			  var groupId = jQuery("#hostGroup").find("option:selected").attr('data-value');
-			  var myGroupName = jQuery("#hostGroup").find("option:selected").val();
-			  var hostId  = jQuery("#selectHost").find("option:selected").attr('data-value'); 
-			  var graphId = jQuery("#selectPicture").find("option:selected").attr('data-value');
-			  var hostName = jQuery("#selectHost").find("option:selected").val();
-			  var selectGraphName = jQuery("#selectPicture").find("option:selected").attr('data-value');
-			  var myGraphname = jQuery("#selectPicture").find("option:selected").val()
-			  
-			  var flag = validateGraph(graphId);
-			  if(flag == "1"){
-				  alert("该图形已存在");
-				  return;
-			  }
-			  
-			  for(var i=0;i<oldData.length;i++){
-				  if(oldData[0].graphname == myGraphname){
-					  alert("该图形已存在");
-					  return;
-				  }
-			  }
-
-			  graphArray.push({id: uuid, fastGroupName: fastGroupName, userId:userId, graphName:graphName, groupId:groupId, hostId:hostId, graphId:graphId});
-			  var graphArrayStr = graphArray.toString();
-
-			  
-			  var id = uuid;
-			  var name = graphName;
-			  var groupname = myGroupName;
-			  var hostname = hostName;
-			  var graphname = myGraphname;
-			  var addHtml = "";
-			  addHtml ='<tr id="'+id+'"><td><span>'+name+'</span></td>'+
-              '<td><span>'+groupname+'</span></td>'+
-              '<td><span>'+hostname+'</span></td>'+
-              '<td><span>'+graphname+'</span></td>'+
-              '<td class="nowrap">'+
-              '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>' ;
-              jQuery('#addHtml1').append(addHtml);
-
-
-		  var fastGroupName = jQuery("#fastgroup").val();
-		  var userId = thisUserId;
-		  var graphName = jQuery("#new_condition_value").val();
-		  var groupId = jQuery("#hostGroup").find("option:selected").attr('data-value');
-		  var hostId  = jQuery("#selectHost").find("option:selected").attr('data-value'); 
-		  var graphId = jQuery("#selectPicture").find("option:selected").attr('data-value');
+									},
+									success : function(data) {
+										if (data.length != 0) {
+											var html = '';
+											for (var i = 0; i < data.length; i++) {
+												//html += '<option data-value="'+data[i].graphid+'">'
+													//	+ data[i].name
+														//+ '</option>';
+														
+												html += '<option value="'+data[i].graphid+'">'
+														+ data[i].name
+														+ '</option>';
+											}
+											jQuery("#selectPicture").html(html);
+											
+											//query + select
+											jQuery(".searchable-select").remove();
+											searchSelect2();
+										} else {
+											html = '<option>无数据</option>';
+											//jQuery("#selectPicture").html(html);
+											jQuery(".searchable-select-holder").html(html);
+											//jQuery("#selectPicture2").html(html);
+											jQuery(".searchable-select-dropdown").css("display","none")
+										}
+									}
+								});
+					});
 
-}
-	  
-	  function getUuid() {
-		    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-		        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-		        return v.toString(16);
-		    });
+	jQuery("#selectHost2").change(
+					function() {
+						var group = jQuery("#selectHost2").val(); //获取主机组下拉菜单的值
+
+						var hostId = jQuery("#selectHost2").find(
+								"option:selected").attr('data-value');
+						jQuery
+								.ajax({
+									type : 'post',
+									url : "${ctx}/quickaccess/findGraphByHostId.json", //请求查询所有主机的url
+									data : {
+										hostId : hostId,
+									},
+									success : function(data) {
+
+										if (data.length != 0) {
+											var html = '';
+											for (var i = 0; i < data.length; i++) {
+												
+												//update
+												/* html += '<option data-value="'+data[i].graphid+'">'
+														+ data[i].name
+														+ '</option>'; */
+												html += '<option value="'+data[i].graphid+'">'
+														+ data[i].name
+														+ '</option>';
+											}
+											jQuery("#selectPicture2").html(html);
+											
+											//调用
+											jQuery(".searchable-select").remove();
+											searchSelect();
+										} else {
+											html = '<option>无数据</option>';
+											jQuery(".searchable-select-holder").html(html);
+											//jQuery("#selectPicture2").html(html);
+											jQuery(".searchable-select-dropdown").css("display","none")										}
+										//saveOption();
+										
+									},
+									error : function(err) {
+										alert(err);
+									}
+								});
+
+					});
+	jQuery('#addItem').click(
+					function() {
+						var item0 = jQuery('#new_condition_value').val();
+						var item1 = jQuery("#hostGroup").val();
+						var item2 = jQuery("#selectHost").val();
+						var item3 = jQuery("#selectPicture").val();
+						
+						var addHtml = '<tr id="conditions_0"><td><span>'
+								+ item0
+								+ '</span></td><td><span>'
+								+ item1
+								+ '</span></td><td><span>'
+								+ item2
+								+ '</span></td><td><span>'
+								+ item3
+								+ '</span></td><td class="nowrap"><button type="button" name="remove" class="btn-link remove">移除</button></tr>'
+						jQuery('#addHtml1').append(addHtml);
+					});
+	jQuery("#addHtml1").on("click", ".remove", function() {
+		var ele = this.parentNode.parentNode;
+		ele.parentNode.removeChild(ele);
+	})
+
+	/*有图形 新增  */
+	function saveGraph() {
+		debugger;
+		var uuid = getUuid();
+		uuid = uuid.replace(/-/g, '')
+		var fastGroupName = jQuery("#fastgroup").val();
+
+		if ("选择主机组" == jQuery("#hostGroup").find("option:selected").val()) {
+			alert("请选择主机组");
+			return;
 		}
-	  
-	  function validateGraph(graphId){
-		  var flag = 0;
-			for(var i = 0; i < graphArray.length; i++){	
-				if(graphArray[i].graphId == graphId){
-					flag = 1;
-				}
+		if ("请选择主机" == jQuery("#selectHost").find("option:selected").val()) {
+			alert("请选择主机");
+			return;
+		}
+	/* 	if ("0" == jQuery("#selectPicture").find("option:selected").val()) {
+			alert("请选择图形");
+			return;
+		} */
+		if (null==jQuery(".searchable-select-holder").html()||""==jQuery(".searchable-select-holder").html()) {
+			alert("请选择图形");
+			return;
+		} 
+
+		var userId = thisUserId;
+		var graphName = jQuery("#new_condition_value").val();
+		if (graphName == "") {
+			alert("请输入快速访问图形名称");
+			return;
+		}
+		var groupId = jQuery("#hostGroup").find("option:selected").attr('data-value');
+		var myGroupName = jQuery("#hostGroup").find("option:selected").val();
+		var hostId = jQuery("#selectHost").find("option:selected").attr(
+				'data-value');
+
+		var hostName = jQuery("#selectHost").find("option:selected").val();
+		
+		//var selectGraphName = jQuery("#selectPicture").find("option:selected").attr('data-value');
+		//var graphId = jQuery("#selectPicture").find("option:selected").attr('data-value');
+		//var myGraphname = jQuery("#selectPicture").find("option:selected").val()
+		
+		//获得 对应的div中的值（已选择的图形）
+		if(null!=myGraphname&&!""==myGraphname){
+			var graphId= document.getElementsByClassName("searchable-select-item selected")[0].getAttribute("data-value");
+			var selectGraphName = document.getElementsByClassName("searchable-select-item selected")[0].getAttribute("data-value");
+
+		}
+		//var graphId= document.getElementsByClassName("searchable-select-item selected")[0].getAttribute("data-value");
+		var myGraphname = jQuery(".searchable-select-holder").html();
+		
+		
+
+		
+
+		var flag = validateGraph(graphId);
+		if (flag == "1") {
+			alert("该图形已存在");
+			return;
+		}
+
+		for (var i = 0; i < oldData.length; i++) {
+			if (oldData[0].graphname == myGraphname) {
+				alert("该图形已存在");
+				return;
 			}
-			return flag;
-	  }
-	  
-		function add2(){
-
-			  var uuid = getUuid();
-			  uuid = uuid.replace(/-/g,'')		  
- 			  var fastGroupName = jQuery("#fastgroup2").val();
- 			  
- 			 if("选择主机组" == jQuery("#hostGroup2").find("option:selected").val()){
-				  alert("请选择主机组");
-				  return;
-			  } 
-			  if("请选择主机" == jQuery("#selectHost2").find("option:selected").val()){
-				  alert("请选择主机");
-				  return;
-			  } 
-			  if("0" == jQuery("#selectPicture2").find("option:selected").val()){
-				  alert("请选择图形");
-				  return;
-			  } 
-			  var userId = thisUserId;
-			  var graphName = jQuery("#new_condition_value2").val();
-			  if(graphName == ""){
-				  alert("请输入快速访问图形名称");
-				  return;
-			  }
-			  var groupId = jQuery("#hostGroup2").find("option:selected").attr('data-value');
-			  var myGroupName = jQuery("#hostGroup2").find("option:selected").val();
-			  var hostId  = jQuery("#selectHost2").find("option:selected").attr('data-value'); 
-			  var graphId = jQuery("#selectPicture2").find("option:selected").attr('data-value');
-			  var hostName = jQuery("#selectHost2").find("option:selected").val();
-			  var selectGraphName = jQuery("#selectPicture2").find("option:selected").attr('data-value');
-			  var myGraphname = jQuery("#selectPicture2").find("option:selected").val()
-			  
-			  
-			  var flag = validateGraph(graphId);
-			  if(flag == "1"){
-				  alert("该图形已存在");
-				  return;
-			  }
-			  
-			  graphArray.push({id: uuid, userId:userId, graphName:graphName, groupId:groupId, hostId:hostId, graphId:graphId});
-			  var graphArrayStr = graphArray.toString();
-
-			  
-			  var id = uuid;
-			  var name = graphName;
-			  var groupname = myGroupName;
-			  var hostname = hostName;
-			  var graphname = myGraphname;
-			  var addHtml = "";
-			  addHtml ='<tr id="'+id+'"><td><span>'+name+'</span></td>'+
-                '<td><span>'+groupname+'</span></td>'+
-                '<td><span>'+hostname+'</span></td>'+
-                '<td><span>'+graphname+'</span></td>'+
-                '<td class="nowrap">'+
-                '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph2(this)">移除</button></tr>' ;
-                jQuery('#addItem2').append(addHtml);
+		}
+
+		graphArray.push({
+			id : uuid,
+			fastGroupName : fastGroupName,
+			userId : userId,
+			graphName : graphName,
+			groupId : groupId,
+			hostId : hostId,
+			graphId : graphId
+		});
+		var graphArrayStr = graphArray.toString();
+
+		var id = uuid;
+		var name = graphName;
+		var groupname = myGroupName;
+		var hostname = hostName;
+		var graphname = myGraphname;
+		var addHtml = "";
+		addHtml = '<tr id="'+id+'"><td><span>'
+				+ name
+				+ '</span></td>'
+				+ '<td><span>'
+				+ groupname
+				+ '</span></td>'
+				+ '<td><span>'
+				+ hostname
+				+ '</span></td>'
+				+ '<td><span>'
+				+ graphname
+				+ '</span></td>'
+				+ '<td class="nowrap">'
+				+ '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>';
+		jQuery('#addHtml1').append(addHtml);
+
+		var fastGroupName = jQuery("#fastgroup").val();
+		var userId = thisUserId;
+		var graphName = jQuery("#new_condition_value").val();
+		var groupId = jQuery("#hostGroup").find("option:selected").attr(
+				'data-value');
+		var hostId = jQuery("#selectHost").find("option:selected").attr(
+				'data-value');
+		
+		
+		//var graphId = jQuery("#selectPicture").find("option:selected").attr('data-value');
+		var graphId= document.getElementsByClassName("searchable-select-item selected")[0].getAttribute("data-value");
+	}
+	//generate uuid
+	function getUuid() {
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
+				function(c) {
+					var r = Math.random() * 16 | 0, v = c == 'x' ? r
+							: (r & 0x3 | 0x8);
+					return v.toString(16);
+				});
+	}
+
+	function validateGraph(graphId) {
+		var flag = 0;
+		for (var i = 0; i < graphArray.length; i++) {
+			if (graphArray[i].graphId == graphId) {
+				flag = 1;
+			}
+		}
+		return flag;
 	}
+	/* 无图形创建 */
+	function add2() {
+		debugger;
+		var uuid = getUuid();
+		uuid = uuid.replace(/-/g, '')
+		var fastGroupName = jQuery("#fastgroup2").val();
+
+		if ("选择主机组" == jQuery("#hostGroup2").find("option:selected").val()) {
+			alert("请选择主机组");
+			return;
+		}
+		if ("请选择主机" == jQuery("#selectHost2").find("option:selected").val()) {
+			alert("请选择主机");
+			return;
+		}
+		/* if ("0" == jQuery("#selectPicture2").find("option:selected").val()) {
+			alert("请选择图形");
+			return;
+		} */
+		if(null==jQuery(".searchable-select-holder").html()||""==jQuery(".searchable-select-holder").html()){
+			alert("请选择图形");
+			return;
+		}
+		var userId = thisUserId;
+		var graphName = jQuery("#new_condition_value2").val();
+		if (graphName == "") {
+			alert("请输入快速访问图形名称");
+			return;
+		}
+		var groupId = jQuery("#hostGroup2").find("option:selected").attr('data-value');
+		var myGroupName = jQuery("#hostGroup2").find("option:selected").val();
 		
-		  jQuery("#addItem2").on("click",".remove",function(){
-			//  debugger
-				 var ele = this.parentNode.parentNode;
-				  ele.parentNode.removeChild(ele);
-			  })
+		var hostId = jQuery("#selectHost2").find("option:selected").attr('data-value');
 		
-	function mySubmit(){
-			  var fastGroupName = jQuery("#fastgroup2").val();
- 			  if(fastGroupName == ""){
-				  alert("请输入快速访问组名");
-				  return;
-			  } 
-			  var userId = thisUserId;
-			  var graphName = jQuery("#new_condition_value2").val();
-			  if(graphName == ""){
-				  alert("请输入快速访问图形名称");
-				  return;
-			  }
-	
+		//var myGraphname = jQuery("#selectPicture2").find("option:selected").val()
+		
+		//获取选中的div值>图形名称
+		var myGraphname = jQuery(".searchable-select-holder").html();
+		//console.log("myGraphname:" +myGraphname)
+		if(null!=myGraphname&&!""==myGraphname){
+			var graphId= document.getElementsByClassName("searchable-select-item selected")[0].getAttribute("data-value");
+		}
+		
+
+			
+		var hostName = jQuery("#selectHost2").find("option:selected").val();
+		
+		//找到已选择图形对应 graphId
+		var selectGraphName = document.getElementsByClassName("searchable-select-item selected")[0].getAttribute("data-value");
+		
+		
+		
+
+		var flag = validateGraph(graphId);
+		if (flag == "1") {
+			alert("该图形已存在");
+			return;
+		}
 
+		graphArray.push({
+			id : uuid,
+			userId : userId,
+			graphName : graphName,
+			groupId : groupId,
+			hostId : hostId,
+			graphId : graphId
+		});
+		var graphArrayStr = graphArray.toString();
+
+		var id = uuid;
+		var name = graphName;
+		var groupname = myGroupName;
+		var hostname = hostName;
+		var graphname = myGraphname;
+		var addHtml = "";
+		addHtml = '<tr id="'+id+'"><td><span>'
+				+ name
+				+ '</span></td>'
+				+ '<td><span>'
+				+ groupname
+				+ '</span></td>'
+				+ '<td><span>'
+				+ hostname
+				+ '</span></td>'
+				+ '<td><span>'
+				+ graphname
+				+ '</span></td>'
+				+ '<td class="nowrap">'
+				+ '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph2(this)">移除</button></tr>';
+		jQuery('#addItem2').append(addHtml);
+	}
+
+	jQuery("#addItem2").on("click", ".remove", function() {
+		//  debugger
+		var ele = this.parentNode.parentNode;
+		ele.parentNode.removeChild(ele);
+	})
+
+	function mySubmit() {
+		debugger;
 		var fastGroupName = jQuery("#fastgroup2").val();
-		   if(fastGroupName == ""){
-			  alert("请输入快速访问组名");
-			  return;
-		  }
-		graphArray.push({fastGroupName: fastGroupName});
+		if (fastGroupName == "") {
+			alert("请输入快速访问组名");
+			return;
+		}
+		var userId = thisUserId;
+		var graphName = jQuery("#new_condition_value2").val();
+		if (graphName == "") {
+			alert("请输入快速访问图形名称");
+			return;
+		}
+
+		var fastGroupName = jQuery("#fastgroup2").val();
+		if (fastGroupName == "") {
+			alert("请输入快速访问组名");
+			return;
+		}
+		graphArray.push({
+			fastGroupName : fastGroupName
+		});
 		var graphArrayStr = graphArray.toJSON();
 		graphArrayStr = graphArrayStr.toString();
-			jQuery.ajax({
-		      method: "POST",
-			  url: "${ctx}/quickaccess/saveQuickAccessList.json",
-	          data:{
-	        	  	graphArrays:graphArrayStr,
-		  		  },
-			  success:function(data){
+		
+		
+		
+		jQuery.ajax({
+			method : "POST",
+			url : "${ctx}/quickaccess/saveQuickAccessList.json",
+			data : {
+				graphArrays : graphArrayStr,
+			},
+			success : function(data) {
 
-	     	    } 
-		  }); 
+			}
+		});
+
+		return redirect('?cancel=1');
+	}
+
+	function removeGraph2(obj) {
+
+		var tempGraphArray = new Array();
+		var fastGroupGraphId = obj.parentElement.parentElement.id;
+		Array.prototype.push.apply(graphArray, tempGraphArray);
+
+		var ArrayPos;
+		for (var i = 0; i < graphArray.length; i++) {
+			if (graphArray[i].id == fastGroupGraphId) {
+				ArrayPos = i;
+			}
+			if (graphArray[i].id != fastGroupGraphId) {
 
-		   return redirect('?cancel=1');
+				tempGraphArray[i] = graphArray[i]
+			}
 		}
-	  
-		function  removeGraph2(obj){
 
-			
-			var tempGraphArray = new Array();
-			var fastGroupGraphId = obj.parentElement.parentElement.id;
-			Array.prototype.push.apply(graphArray, tempGraphArray);
-
-			var ArrayPos;
-			for(var i = 0; i < graphArray.length; i++){	
-				if(graphArray[i].id == fastGroupGraphId){
-					ArrayPos = i;
+		for (var i = 0; i < tempGraphArray.length; i++) {
+			if (i == ArrayPos) {
+
+			} else if (i > ArrayPos) {
+				tempGraphArray[i - 1] = tempGraphArray[i];
+			} else {
+				tempGraphArray[i] = tempGraphArray[i];
+			}
+
+		}
+		var myLength = graphArray.length;
+
+		graphArray.clear();
+		if (undefined != ArrayPos) {
+			if (ArrayPos != myLength - 1) {
+				for (var i = 0; i < tempGraphArray.length - 1; i++) {
+
+					graphArray[i] = tempGraphArray[i];
 				}
-				if(graphArray[i].id != fastGroupGraphId){
-					
-					tempGraphArray[i] = graphArray[i]
+			} else {
+				for (var i = 0; i < tempGraphArray.length; i++) {
+
+					graphArray[i] = tempGraphArray[i];
 				}
 			}
+		}
 
-				for(var i = 0;i < tempGraphArray.length;i++){
-					if(i == ArrayPos){
-						
-					}else if(i > ArrayPos){
-						tempGraphArray[i-1] = tempGraphArray[i];
-					}else {
-						tempGraphArray[i] = tempGraphArray[i];
-					}
-					
-				}
-				var myLength = graphArray.length;
+	}
 
-	
+	function removeGraph(obj) {
+		var tempGraphArray = new Array();
+		var fastGroupGraphId = obj.parentElement.parentElement.id;
+		Array.prototype.push.apply(graphArray, tempGraphArray);
+		var ArrayPos;
+		for (var i = 0; i < graphArray.length; i++) {
+			if (graphArray[i].id == fastGroupGraphId) {
+				ArrayPos = i;
+			}
+			if (graphArray[i].id != fastGroupGraphId) {
+
+				tempGraphArray[i] = graphArray[i]
+			}
+		}
+		if (undefined != ArrayPos) {
+
+			for (var i = 0; i < tempGraphArray.length; i++) {
+				if (i == ArrayPos) {
+
+				} else if (i > ArrayPos) {
+					tempGraphArray[i - 1] = tempGraphArray[i];
+				} else {
+					tempGraphArray[i] = tempGraphArray[i];
+				}
+			}
+			var myLength = graphArray.length;
 			graphArray.clear();
-			if(undefined != ArrayPos){
-				if(ArrayPos != myLength-1){
-					for(var i = 0;i<tempGraphArray.length-1;i++){
-		
+
+			if (undefined != ArrayPos) {
+				if (ArrayPos != myLength - 1) {
+					for (var i = 0; i < tempGraphArray.length - 1; i++) {
+
 						graphArray[i] = tempGraphArray[i];
 					}
-				}else{
-					for(var i = 0;i<tempGraphArray.length;i++){
-						
+				} else {
+					for (var i = 0; i < tempGraphArray.length; i++) {
+
 						graphArray[i] = tempGraphArray[i];
 					}
 				}
 			}
-			
+
+		} else {
+			removeArray.push({
+				id : fastGroupGraphId
+			});
+		}
+
+		jQuery("#addItem").on("click", ".remove", function() {
+			var ele = this.parentNode.parentNode;
+			ele.parentNode.removeChild(ele);
+		})
+		var fastGroupGraphId = obj.parentElement.parentElement.id
 	}
-		
-		function  removeGraph(obj){
-			var tempGraphArray = new Array();
-			var fastGroupGraphId = obj.parentElement.parentElement.id;
-			Array.prototype.push.apply(graphArray, tempGraphArray);
-			var ArrayPos;
-			for(var i = 0; i < graphArray.length; i++){
-				if(graphArray[i].id == fastGroupGraphId){
-					ArrayPos = i;
-				}
-				if(graphArray[i].id != fastGroupGraphId){
-					
-					tempGraphArray[i] = graphArray[i]
-				}
-			}
-			if(undefined != ArrayPos){
 
-				for(var i = 0;i < tempGraphArray.length;i++){
-					if(i == ArrayPos){
-						
-					}else if(i > ArrayPos){
-						tempGraphArray[i-1] = tempGraphArray[i];
-					}else {
-						tempGraphArray[i] = tempGraphArray[i];
-					}
-				}
-				var myLength = graphArray.length;
-				graphArray.clear();
-				
-				if(undefined != ArrayPos){
-					if(ArrayPos != myLength-1){
-						for(var i = 0;i<tempGraphArray.length-1;i++){
-			
-							graphArray[i] = tempGraphArray[i];
-						}
-					}else{
-						for(var i = 0;i<tempGraphArray.length;i++){
-							
-							graphArray[i] = tempGraphArray[i];
-						}
-					}
-				}
+	function refreshGraphs2() {
+		debugger;
+		//var myGraphId = jQuery("#hostGroup").find("option:selected").attr(
+			//	'data-value');
+		var myGroupId = jQuery("#hostGroup").find("option:selected").attr(
+				'data-value');
+		jQuery
+				.ajax({
+					method : "POST",
+					async : false,
+					url : "${ctx}/quickaccess/getGraphsByFastGroupId.json",
+					data : {
+						FastGroupId : myGroupId
+					},
+					success : function(data) {
+						var addHtml = '';
+						for (var k = 0; k < data.length; k++) {
 
-			} else {
-				removeArray.push({id: fastGroupGraphId});
-			}
+							addHtml += '<tr id="'+data[k].id+'"><td><span>'
+									+ data[k].name
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].groupname
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].hostname
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].graphname
+									+ '</span></td>'
+									+ '<td class="nowrap">'
+									+ '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph2(this)">移除</button></tr>';
+						}
 
-			
-			  jQuery("#addItem").on("click",".remove",function(){
-					 var ele = this.parentNode.parentNode;
-					  ele.parentNode.removeChild(ele);
-				  })
-			var fastGroupGraphId = obj.parentElement.parentElement.id	  
+						jQuery('#addItem2').html(addHtml);
+						oldData = data;
+					},
+				});
 	}
+
+	function refreshGraphs() {
+		debugger;
+		//var myGraphId = jQuery("#hostGroup").find("option:selected").attr(
+			//	'data-value');
+		var myGroupId = jQuery("#hostGroup").find("option:selected").attr(
+				'data-value');
 		
-		function refreshGraphs2(){		
-			var myGraphId = jQuery("#hostGroup").find("option:selected").attr('data-value');		
-		  	jQuery.ajax({
-		  		  method: "POST",
-		  		  async: false,
-		  		  url: "${ctx}/quickaccess/getGraphsByFastGroupId.json",
-		  		  data:{
-		  			FastGroupId:myGroupId
-		  		  },
-	  			  success:function(data) {
-	  					var addHtml='';
-	  				 for(var k=0;k<data.length;k++){
-	  					
-	  					addHtml+='<tr id="'+data[k].id+'"><td><span>'+data[k].name+'</span></td>'+
-	  					                                 '<td><span>'+data[k].groupname+'</span></td>'+
-	  					                                 '<td><span>'+data[k].hostname+'</span></td>'+
-	  					                                 '<td><span>'+data[k].graphname+'</span></td>'+
-	  					                                 '<td class="nowrap">'+
-	  					                                 '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph2(this)">移除</button></tr>' ;
-	  				 }
-	  				 
-	  				  jQuery('#addItem2').html(addHtml);
-	  				oldData = data;
-	  			  },  
-		  	  });
-		}
-		
-		function refreshGraphs(){
-			var myGraphId = jQuery("#hostGroup").find("option:selected").attr('data-value');		
-		  	jQuery.ajax({
-		  		  method: "POST",
-		  		  url: "${ctx}/quickaccess/getGraphsByFastGroupId.json",
-		  		  data:{
-		  			FastGroupId:myGroupId
-		  		  },
-	  			  success:function(data) {
-	  					var addHtml='';
-	  				 for(var k=0;k<data.length;k++){
-	  					
-	  					addHtml+='<tr id="'+data[k].id+'"><td><span>'+data[k].name+'</span></td>'+
-	  					                                 '<td><span>'+data[k].groupname+'</span></td>'+
-	  					                                 '<td><span>'+data[k].hostname+'</span></td>'+
-	  					                                 '<td><span>'+data[k].graphname+'</span></td>'+
-	  					                                 '<td class="nowrap">'+
-	  					                                 '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>' ;
-	  				 }
-	  				  jQuery('#addHtml1').html(addHtml);
-	  				oldData = data;
-	  			  } 
-		  	  });	
-		}
-		function  deleteGroup(){
-		  	jQuery.ajax({
-		  		  method: "POST",
-		  		  url: "${ctx}/quickaccess/deleteQuickAccess.json",
-		  		  data:{
-		  			fastGroupId:myGroupId
-			  		  },
-		  		  
-		  	  });
-			return redirect('?cancel=1');
+		jQuery.ajax({
+					method : "POST",
+					url : "${ctx}/quickaccess/getGraphsByFastGroupId.json",
+					data : {
+						FastGroupId : myGroupId
+					},
+					success : function(data) {
+						var addHtml = '';
+						for (var k = 0; k < data.length; k++) {
+
+							addHtml += '<tr id="'+data[k].id+'"><td><span>'
+									+ data[k].name
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].groupname
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].hostname
+									+ '</span></td>'
+									+ '<td><span>'
+									+ data[k].graphname
+									+ '</span></td>'
+									+ '<td class="nowrap">'
+									+ '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>';
+						}
+						jQuery('#addHtml1').html(addHtml);
+						oldData = data;
+					},
+					error : function(err) {
+						alert(err);
+					}
+				});
 	}
+	function deleteGroup() {
 		
- 		function updateGroup(){
-			  var fastGroupName = jQuery("#fastgroup").val();
- 			  if(fastGroupName == ""){
-				  alert("请输入快速访问组名");
-				  return;
-			  } 
-			  var userId = thisUserId;
-		if(graphArray.length > 0 ){
+		jQuery.ajax({
+			method : "POST",
+			url : "${ctx}/quickaccess/deleteQuickAccess.json",
+			data : {
+				fastGroupId : myGroupId
+			},
+
+		});
+		return redirect('?cancel=1');
+	}
+
+	function updateGroup() {
+		debugger;
+		var fastGroupName = jQuery("#fastgroup").val();
+		if (fastGroupName == "") {
+			alert("请输入快速访问组名");
+			return;
+		}
+		var userId = thisUserId;
+		if (graphArray.length > 0) {
 			var graphArrayStr = graphArray.toJSON();
 			graphArrayStr = graphArrayStr.toString();
-				jQuery.ajax({
-			      method: "POST",
-		  	      async: false,
-				  url: "${ctx}/quickaccess/saveQuickAccessList.json",
-		          data:{
-		        	  	graphArrays:graphArrayStr,
-			  		  },
-				  success:function(data){
-
-		     	    } 
-			  }); 
+			jQuery.ajax({
+				method : "POST",
+				async : false,
+				url : "${ctx}/quickaccess/saveQuickAccessList.json",
+				data : {
+					graphArrays : graphArrayStr,
+				},
+				success : function(data) {
+
+				}
+			});
+		}
+
+		if (removeArray.length > 0) {
+			var deleteQuickAccessGraphList = removeArray.toJSON();
+			jQuery.ajax({
+				method : "POST",
+				async : false,
+				url : "${ctx}/quickaccess/deleteQuickAccessGraphList.json",
+				data : {
+					fastGroupGraphIds : deleteQuickAccessGraphList
+				}
+
+			});
 		}
 
-			if(removeArray.length > 0){
-				var deleteQuickAccessGraphList = removeArray.toJSON();
-				  jQuery.ajax({
-		  		  method: "POST",
-		  	      async: false,
-		  		  url: "${ctx}/quickaccess/deleteQuickAccessGraphList.json",
-		  		  data:{
-		  			fastGroupGraphIds:deleteQuickAccessGraphList
-		  		  }
-		  		  
-		  	  });
+		return redirect('?cancel=1');
+	}
+
+	//query + select
+	function searchSelect(){
+		jQuery("#selectPicture2").searchableSelect({
+			afterSelectItem: function (){
+				
+			}
+	});	
+	}
+	function searchSelect2(){
+		jQuery("#selectPicture").searchableSelect({
+			afterSelectItem: function (){
+				
 			}
+	});	
+	}
+	
 
-		   return redirect('?cancel=1');
-	} 	
-	</script>
\ No newline at end of file
+</script>
\ No newline at end of file