首页

基于jQuery EasyUI实现工具栏多行toolbars搜索栏及combotree下拉框选择树代码示例

标签:jquery,easyui,工具栏toolbars,搜索栏,combotree,下拉框选择树     发布时间:2018-09-27   

一、前言

基于JqueryEasyUI组件,实现工具栏多行toolbars的搜索行,同时实现combotree选择下拉框树的效果,如下图效果,详情参见代码示例。

1442117115315027542 (1)副本.jpg

二、代码示例

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>@b@<html>@b@<head>@b@<meta http-equiv="Content-Type" content="text/html; charset=utf-8">@b@<title>目录检索页面</title>@b@<%@ include file="/page/inc.h"%>@b@<style type="text/css">@b@	body{@b@		margin: 0;@b@	}@b@</style>@b@<script type="text/javascript">@b@	/*@b@	*搜索信息分类@b@	*/@b@	function searchIIC() {@b@		var isValid = $('#searchIICForm').form('validate');@b@		if (!isValid){@b@			return false;@b@		}@b@		$('#tt').treegrid({@b@			url:"${pageContext.request.contextPath }/page/infoItem/getIICListForSearch.ct",@b@			queryParams: {@b@				'iIC.res_shape_code': $('#res_shape_id').combobox('getValue'),@b@				'iIC.service_code': $('#service_id').combobox('getValue'),@b@				'iIC.industry_code': $('#industry_id').combobox('getValue'),@b@				'iIC.theme_code': $('#theme_id').combobox('getValue'),@b@				'iIC.name': $('#name').val()@b@			},@b@			idField:'id',@b@			treeField:"name",@b@			fitColumns:"true",@b@			columns:[[@b@				{title:'信息分类/信息项名称',field:'name',width:180},@b@				{title:'编码',field:'serial_num',width:100},@b@				{title:'提供部门',field:'ora_name',width:100},@b@				{title:'说明',field:'explain_content',width:100},@b@				{title:'对应数据元',field:'meta_serial_num',width:100}@b@				]],@b@			onBeforeExpand:function(node){@b@				//alert(node.id)@b@				//$("#"+treeName).treegrid("options").url='${pageContext.request.contextPath }/page/resourceModule/treeList.ct?res.id='+node.id;@b@				if($('#tt').treegrid('getChildren',node.id)==""){@b@					$.post('${pageContext.request.contextPath }/page/infoItem/getIIListForSearch.ct',{'infoItem.class_id':node.id},function(rs){@b@						var dataRes=eval("("+rs+")");@b@						$('#tt').treegrid('append',{@b@							parent: node.id,@b@							data:dataRes.rows@b@						});@b@					})@b@				}@b@			}@b@		})@b@		return false;@b@	}@b@	function resetSearchItem() {@b@		// 分类检索字段@b@		$('#res_shape_id').combobox('clear');@b@		$('#service_id').combobox('clear');@b@		$('#industry_id').combobox('clear');@b@		$('#theme_id').combobox('clear');@b@		$('#name').val(null);@b@	}@b@</script>@b@</head>@b@<body style="visibility: visible;">@b@	<div id="cc" class="easyui-layout" style="width:100%;height:100%;" title="目录检索">@b@		<div id="search_info" region='north' style="width:100%;height:120px;" class="easyui-panel">@b@			<form id="searchIICForm" method="post" action="../../page/infoItem/getIICListForSearch.ct">@b@				<table align="center">@b@					<tr>@b@						<td>所属资源形态分类:</td>@b@						<td><input id="res_shape_id" name="iIC.res_shape_id_code" style="width:200px;" /></td>@b@						<td width="35px"></td>@b@						<td>所属服务分类:</td>@b@						<td><input id="service_id" name="iIC.service_id_code" style="width:200px;" /></td>@b@					</tr>@b@					<tr>@b@						<td>所属行业分类:</td>@b@						<td><input id="industry_id" name="iIC.industry_id_code" style="width:200px;" /></td>@b@						<td width="35px"></td>@b@						<td>所属主题分类:</td>@b@						<td><input id="theme_id" name="iIC.theme_id_code" style="width:200px;" /></td>@b@					</tr>@b@					<tr>@b@						<td>关键字:</td>@b@						<td><input id="name" name="iIC.name" type="text" class="easyui-validatebox" style="width:200px;"/></td>@b@					</tr>@b@				</table>@b@			</form>@b@			<div style="padding:5px;text-align:center;">@b@				<a onclick="searchIIC();" class="easyui-linkbutton" icon="icon-search">搜  索</a>@b@				<a onclick="resetSearchItem();" class="easyui-linkbutton" icon="icon-undo">重  置</a>@b@			</div>@b@		</div>@b@		<input type="hidden" id="search_type" value="0"/>@b@		<div region='center'>@b@			<table id="tt" class="easyui-treegrid">@b@			</table>@b@		</div>@b@	</div>@b@<script type="text/javascript">@b@	// 所属资源形态分类类目@b@	$('#res_shape_id').combotree({@b@		//checkbox: true,@b@		url:'../../page/infoClassIndex/treeList.ct?tableName=c_resourceshape_divide&classIndex.class_id=-1',@b@		onBeforeExpand : function(node) {@b@			$('#res_shape_id').combotree("tree").tree("options").url = @b@			"../../page/infoClassIndex/treeList.ct?tableName=c_resourceshape_divide&classIndex.class_id=" + node.id;@b@		}@b@	});@b@	// 所属服务分类类目@b@	$('#service_id').combotree({@b@		url:'../../page/infoClassIndex/treeList.ct?tableName=c_service_divide&classIndex.class_id=-1',@b@		onBeforeExpand : function(node) {@b@			$('#service_id').combotree("tree").tree("options").url = @b@			"../../page/infoClassIndex/treeList.ct?tableName=c_service_divide&classIndex.class_id=" + node.id;@b@		}@b@	});@b@	// 所属行业分类类目@b@	$('#industry_id').combotree({@b@		url:'../../page/infoClassIndex/treeList.ct?tableName=c_industry_divide&classIndex.class_id=-1',@b@		onBeforeExpand : function(node) {@b@			$('#industry_id').combotree("tree").tree("options").url = @b@			"../../page/infoClassIndex/treeList.ct?tableName=c_industry_divide&classIndex.class_id=" + node.id;@b@		}@b@	});@b@	// 所属主题分类类目@b@	$('#theme_id').combotree({@b@		url:'../../page/infoClassIndex/treeList.ct?tableName=c_theme_divide&classIndex.class_id=-1',@b@		onBeforeExpand : function(node) {@b@			$('#theme_id').combotree("tree").tree("options").url = @b@			"../../page/infoClassIndex/treeList.ct?tableName=c_theme_divide&classIndex.class_id=" + node.id;@b@		}@b@	});@b@</script>@b@</body>@b@</html>