JqueryEasyUI中combotree应用
??????JqueryEasyUI是一个不错的UI设计库，包含了很多。其中有用到combotree，这是对html标签中select的更好，是一个下拉树，显示效果比较好，看起来层次清晰，并且不是很难。图片效果如下：
?[imgr]1[/imgr][imgr]2[/imgr]
查看JqueryEasyUI里的demo得到要到达这个效果其实只是一句话可以搞定，<input name="formMap.supperMenuId" 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" 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" value="<s:property value='menu.menu.id'/>" id="superId" cascadeCheck="false" required="true" missingMessage="上级菜单不能为空！" style="width:252px" /></td></tr>?
我们再看看demo里<input id="cc" 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了