JqueryEasyUI中combotree应用

      JqueryEasyUI是一个不错的UI设计库，包含了很多。其中有用到combotree，这是对html标签中select的更好，是一个下拉树，显示效果比较好，看起来层次清晰，并且不是很难。图片效果如下：

 [imgr]1[/imgr][imgr]2[/imgr]

查看JqueryEasyUI里的demo得到要到达这个效果其实只是一句话可以搞定，<input name="formMap.supperMenuId" class="easyui-combotree"  value="<s:property value='menu.menu.id'/>"  id="superId" cascadeCheck="false"  required="true" missingMessage="上级菜单不能为空！" style="width:252px" />但是前提是引入了jqueryEasyUI所必须的JS文件而后CSS文件再加上这一句

$('#superId').combotree('reload',"<%=path%>/sys_privilegeAjax/menuAction_findMenuTree.action?menu.menuType="+$(":radio:checked").val());

我这里是有5种类型的菜单，并且菜单是用树形结构展现，所以这里用这个combotree是最好不过了，下面贴出代码片段

<script language="javascript">
			$(document).ready(function(){
				initData();						});
		function initData(){
			<s:if test="null eq menu">
				$("#t1").attr("checked",true);
			</s:if>
			<s:if test="menu.menuType==1">
				$("#t1").attr("checked",true);
			</s:if>
			<s:if test="menu.menuType==2">
				$("#t2").attr("checked",true);
			</s:if>
			<s:if test="menu.menuType==3">
				$("#t3").attr("checked",true);
			</s:if>
			<s:if test="menu.menuType==4">
				$("#t4").attr("checked",true);
			</s:if>
			<s:if test="menu.menuType==5">
				$("#t5").attr("checked",true);
			</s:if>
			//var url ="<%=path%>/sys_privilegeAjax/menuAction_findMenuTree.action?menu.menuType="+$(":radio:checked").val();
			//var data =null;
			//var resultMess= ajaxSubmit(url,data);
			//var treeStr = eval(resultMess);
			//$('#superId').combotree('loadData',treeStr);
			$('#superId').combotree('reload',"<%=path%>/sys_privilegeAjax/menuAction_findMenuTree.action?menu.menuType="+$(":radio:checked").val());
			
		}

var getMenuTree=function(i){
		$('#superId').combotree('clear');
		$('#superId').combotree('loadData','');
		$('#superId').combotree('reload',"<%=path%>/sys_privilegeAjax/menuAction_findMenuTree.action?menu.menuType="+i);
	}

。
。
。
。
<tr>
									<td width="20%" align="right" class="tdbg">
										<b>菜单类型：</b>
									</td>
									<td>
										<input type="radio" id="t1" name="menu.menuType" value="1" onclick="getMenuTree(1);"/>
										超级管理员
										<input type="radio" id="t2" name="menu.menuType" value="2" onclick="getMenuTree(2);"/>
										省属管理员
										<input type="radio" id="t3" name="menu.menuType" value="3" onclick="getMenuTree(3);" />
										市属管理员
										<input type="radio" id="t4" name="menu.menuType" value="4" onclick="getMenuTree(4);"/>
										区/县属管理员
										<input type="radio" id="t5" name="menu.menuType" value="5" onclick="getMenuTree(5);"/>
										校属管理员
									</td>
								</tr>
								<tr>
									<td align="right" class="tdbg">
										<b>上级菜单：</b>
									</td>
									<td align="left">
										<input name="formMap.supperMenuId" class="easyui-combotree"  value="<s:property value='menu.menu.id'/>"  id="superId" cascadeCheck="false"  required="true" missingMessage="上级菜单不能为空！" style="width:252px" />
									</td>
								</tr>

 

我们再看看demo里<input id="cc" class="easyui-combotree" url="tree_data.json" value="2" required="true" style="width:200px;">

其中tree_data.json的内容如下：

[{
	"id":1,
	"text":"Folder1",
	"iconCls":"icon-ok",
	"children":[{
		"id":2,
		"text":"File1",
		"checked":true
	},{
		"id":3,
		"text":"Folder2",
		"state":"open",
		"children":[{
			"id":4,
			"text":"File3",
			"attributes":{
				"p1":"value1",
				"p2":"value2"
			},
			"checked":true,
			"iconCls":"icon-reload"
		},{
			"id": 8,
			"text":"Async Folder",
			"state":"closed"
		}]
	}]
},{
	"text":"Languages",
	"state":"closed",
	"children":[{
		"id":"j1",
		"text":"Java"
	},{
		"id":"j2",
		"text":"C#"
	}]
}]

 

一看便知道是JSON对象，这个在前面一个有关JSON的篇章中有讲到，在后台照着生成就ok了