树选择控件，增加搜索功能。感谢：联何的贡献

farkguidao · Apr 20, 2013 · af8507a · af8507a
1 parent f9753e6
commit af8507a
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ JeeSite 提供了常用工具进行封装，包括日志工具、缓存工具、
 
 1. 具备运行环境：JDK1.6、Maven3.0、MySql5。
 2. 修改src\main\resources\application.properties文件中的数据库设置参数。
-3. 根据修改参数创建对应MySql数据库。
+3. 根据修改参数创建对应MySql数据库（数据库编码：UTF-8）。
 4. 运行bin\resresh-db\refresh-db.bat脚本，即可导入表结构及演示数据
 5. 运行bin\jetty.bat，启动Web服务器（第一次运行，需要下载依赖jar包，请耐心等待）。
 6. 最高管理员账号，用户名：thinkgem 密码：admin

diff --git a/bin/refresh-db/init-data.xml b/bin/refresh-db/init-data.xml
@@ -207,11 +207,11 @@
 	<!-- 系统部门：编号、父级编号、所有父级编号、归属区域编号、部门编码 、部门名称、备注、删除标记（0：正常；1：删除） -->
 	<sys_office id="1" parent_id="0" parent_ids="0," area_id="1" code="" name="顶级部门" remarks="" />
 		<sys_office id="2" parent_id="1" parent_ids="0,1," area_id="1" code="0001" name="系统管理" remarks="" />
-			<sys_office id="4" parent_id="2" parent_ids="0,1," area_id="1" code="000101" name="系统管理1" remarks="" />
-			<sys_office id="5" parent_id="2" parent_ids="0,1," area_id="1" code="000102" name="系统管理2" remarks="" />
+			<sys_office id="4" parent_id="2" parent_ids="0,1,2," area_id="1" code="000101" name="系统管理1" remarks="" />
+			<sys_office id="5" parent_id="2" parent_ids="0,1,2," area_id="1" code="000102" name="系统管理2" remarks="" />
 		<sys_office id="3" parent_id="1" parent_ids="0,1," area_id="1" code="0002" name="系统维护" remarks="" />
-			<sys_office id="6" parent_id="2" parent_ids="0,1," area_id="1" code="000201" name="系统维护1" remarks="" />
-			<sys_office id="7" parent_id="2" parent_ids="0,1," area_id="1" code="000202" name="系统维护2" remarks="" />
+			<sys_office id="6" parent_id="3" parent_ids="0,1,3," area_id="1" code="000201" name="系统维护1" remarks="" />
+			<sys_office id="7" parent_id="3" parent_ids="0,1,3," area_id="1" code="000202" name="系统维护2" remarks="" />
 
 	<!-- 系统菜单表：编号、父级编号、名称、链接 、目标、图标、排序（升序）、是否在菜单中显示（1：显示；0：不显示）、权限标识-->
 	<sys_menu id="1" parent_id="0" parent_ids="0," name="顶级菜单" href="" target="" icon="" sort="0" is_show="1" permission="" user_id="1" />

diff --git a/doc/JeeSite About.docx b/doc/JeeSite About.docx
diff --git a/doc/JeeSite Developer.docx b/doc/JeeSite Developer.docx
diff --git a/src/main/webapp/WEB-INF/views/include/head.jsp b/src/main/webapp/WEB-INF/views/include/head.jsp
@@ -10,7 +10,7 @@
 <link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
 <script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
 <script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.method.min.js" type="text/javascript"></script>
-<link href="${ctxStatic}/bootstrap/2.3.1/css_${ctxTheme}/bootstrap.min.css" type="text/css" rel="stylesheet" />
+<link href="${ctxStatic}/bootstrap/2.3.1/css_${not empty ctxTheme?ctxTheme:'default'}/bootstrap.min.css" type="text/css" rel="stylesheet" />
 <script src="${ctxStatic}/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
 <!--[if lte IE 6]><link href="${ctxStatic}/bootstrap/bsie/css/bootstrap-ie6.min.css" type="text/css" rel="stylesheet" />
 <script src="${ctxStatic}/bootstrap/bsie/js/bootstrap-ie.min.js" type="text/javascript"></script><![endif]-->

diff --git a/src/main/webapp/WEB-INF/views/modules/sys/tagIconselect.jsp b/src/main/webapp/WEB-INF/views/modules/sys/tagIconselect.jsp
@@ -1,9 +1,10 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
 <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
-<html>
+<!DOCTYPE html>
+<html style="overflow-x:hidden;overflow-y:auto;">
 <head>
     <title>图标选择</title>
-	<meta name="decorator" content="default"/>
+	<%@include file="/WEB-INF/views/include/head.jsp" %>
     <style type="text/css">
 		.the-icons {padding:25px 10px 15px;list-style:none;}
 		.the-icons li {float:left;width:22%;line-height:25px;margin:2px 5px;cursor:pointer;}

diff --git a/src/main/webapp/WEB-INF/views/modules/sys/tagTreeselect.jsp b/src/main/webapp/WEB-INF/views/modules/sys/tagTreeselect.jsp
@@ -1,18 +1,27 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
 <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
-<html>
+<!DOCTYPE html>
+<html style="overflow-x:hidden;overflow-y:auto;">
 <head>
 	<title>栏目列表</title>
-	<meta name="decorator" content="default"/>
+	<%@include file="/WEB-INF/views/include/head.jsp" %>
 	<%@include file="/WEB-INF/views/include/treeview.jsp" %>
 	<script type="text/javascript">
+		var key, lastValue = "", nodeList = [];
 		var tree, setting = {view:{selectedMulti:false},check:{enable:"${checked}",nocheckInherit:true},
-				data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
+				data:{simpleData:{enable:true}},
+				view:{
+					fontCss:function(treeId, treeNode) {
+						return (!!treeNode.highlight) ? {"font-weight":"bold"} : {"font-weight":"normal"};
+					}
+				},
+				callback:{beforeClick:function(id, node){
 					if("${checked}" == "true"){
 						tree.checkNode(node, !node.checked, true, true);
 						return false;
 					}
-				}, onDblClick:function(){
+				}, 
+				onDblClick:function(){
 					top.$.jBox.getBox().find("button[value='ok']").trigger("click");
 					//alert($("input[type='text']", top.mainFrame.document).val());
 					//$("input[type='text']", top.mainFrame.document).focus();
@@ -21,6 +30,7 @@
 			$.get("${ctx}${url}${fn:indexOf(url,'?')==-1?'?':'&'}&extId=${extId}&module=${module}&t="+new Date().getTime(), function(zNodes){
 				// 初始化树结构
 				tree = $.fn.zTree.init($("#tree"), setting, eval("("+zNodes+")"));
+				
 				// 默认展开一级节点
 				var nodes = tree.getNodesByParam("level", 0);
 				for(var i=0; i<nodes.length; i++) {
@@ -38,9 +48,67 @@
 					}
 				}
 			});
+			key = $("#key");
+			key.bind("focus", focusKey).bind("blur", blurKey).bind("change keydown cut input propertychange", searchNode);
 		});
+	  	function focusKey(e) {
+			if (key.hasClass("empty")) {
+				key.removeClass("empty");
+			}
+		}
+		function blurKey(e) {
+			if (key.get(0).value === "") {
+				key.addClass("empty");
+			}
+			searchNode(e);
+		}
+		function searchNode(e) {
+			// 取得输入的关键字的值
+			var value = $.trim(key.get(0).value);
+			
+			// 按名字查询
+			var keyType = "name";
+			if (key.hasClass("empty")) {
+				value = "";
+			}
+			
+			// 如果和上次一次，就退出不查了。
+			if (lastValue === value) {
+				return;
+			}
+			
+			// 保存最后一次
+			lastValue = value;
+			
+			// 如果要查空字串，就退出不查了。
+			if (value === "") {
+				return;
+			}
+			updateNodes(false);
+			nodeList = tree.getNodesByParamFuzzy(keyType, value);
+			updateNodes(true);
+		}
+		function updateNodes(highlight) {
+			for(var i=0, l=nodeList.length; i<l; i++) {
+				nodeList[i].highlight = highlight;				
+				tree.updateNode(nodeList[i]);
+				tree.expandNode(nodeList[i].getParentNode(), true, false, false);
+			}
+		}
+		function search() {
+			$("#search").slideToggle(200);
+			$("#txt").toggle();
+			$("#key").focus();
+		}
 	</script>
 </head>
 <body>
+	<div style="position:absolute;right:8px;top:5px;cursor:pointer;" onclick="search();">
+		<i class="icon-search"></i><label id="txt">搜索</label>
+	</div>
+	<div id="search" class="control-group hide" style="padding:10px 0 0 15px;">
+		<label for="key" class="control-label" style="float:left;padding:5px 5px 3px;">关键字：</label>
+		<input type="text" class="empty" id="key" name="key" maxlength="50" style="width:180px;">
+	</div>
 	<div id="tree" class="ztree" style="padding:15px 20px;"></div>
 </body>