从数据库获取数据前端实现建树
2015-12-11 11:38
176 查看
//第一步表单
//openWindow打开界面跳转到orgTree界面
//orgTree.html
//Springmvc中的Controller的getOrganizationTree方法如下
//Springmvc中的organizationService方法如下
//ActGroup.java
public class ActGroup implements Serializable {
private static final long serialVersionUID = 1L;
private String id;
private Integer rev;
private String name;
private String type;
public ActGroup(){
}
public ActGroup(String id,Integer rev,String name,String type){
this.id=id;
this.name=name;
this.rev=rev;
this.type=type;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public Integer getRev() {
return rev;
}
public void setRev(Integer rev) {
this.rev = rev;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
}
//数据库如图所示
//最终的效果如图所示
<label for="org1selectTree" style="font-weight: bold;">多选组织树：</label>
<span style="white-space:pre"> </span> <span style="white-space:pre"> </span><br>
<span style="white-space:pre"> </span><label for="org1selectTree">组织编码：</label>
<span style="white-space:pre"> </span><input type="text" id="orgs1selectTree" name="orgs1selectTree" readonly="readonly" style="width: 680px" onclick="selectMTree('orgs1selectTree','orgs1selectTreeName');"/> <span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><br>
<span style="white-space:pre"> </span><label for="org1selectTree">组织名称：</label>
<span style="white-space:pre"> </span><input type="text" id="orgs1selectTreeName" name="orgs1selectTreeName" style="width: 680px" onclick="selectMTree('orgs1selectTree','orgs1selectTreeName');"/> function selectMTree(eleId,eleName){
<span style="white-space:pre"> </span>var url='${requestContext.contextPath}/management/organizationTree/orgTree?state=open&eleId='+eleId+"&eleName="+eleName+"&type=1";
<span style="white-space:pre"> </span>var eleId=eleId;
<span style="white-space:pre"> </span>var eleName=eleName;
<span style="white-space:pre"> </span>var iWidth=365; //弹出窗口的宽度;
<span style="white-space:pre"> </span>var iHeight=530; //弹出窗口的高度;
<span style="white-space:pre"> </span>var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
<span style="white-space:pre"> </span>var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
var properties = "height="+iHeight+",width="+iWidth+",top="+iTop+", left="+iLeft+",status:no,resizable:no,toolbar=no,menubar=no,location=no,scroll:no,z-look:yes";
openWindow=window.open(url, "window", properties);
openWindow.focus();
}//openWindow打开界面跳转到orgTree界面
//orgTree.html
<!DOCTYPE html>
<html>
<head>
<title>组织机构树</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8,9,10" />
<link rel="stylesheet" type="text/css" href="${requestContext.contextPath}/resources/themes/${skinName}/base.css">
<link rel="stylesheet" type="text/css" href="${requestContext.contextPath}/resources/plugins/jquery-easyui-${easyuiVersion}/themes/${easyuiSkinName}/easyui.css">
<link rel="stylesheet" type="text/css" href="${requestContext.contextPath}/resources/themes/${skinName}/icon.css">
<script type="text/javascript">
//呈现顶端遮罩
if (top.showMask) top.showMask();
</script>
<style type="text/css">
.s1{width:50px;padding-left:5px;margin-left:5px;}
.s2{width:50px;padding-left:5px;margin:3px;}
#d1{width:510px;height:320px;background-color:#F5DEB3;margin:0 auto;}
#d2{height:30px;font-size:24px;background-color:blue;color:white;}
#d3{padding-left:30px;}
</style>
</head>
<body class="easyui-layout" style="visibility:hidden">
<div data-options="region:'north',title:'工具栏',collapsible:false,noheader:true,border:false" style="height:30px;">
<form id="orgtreeQuery" class="orgtreeQuery" style="margin: 0; padding: 0" autoTypeset="false">
<span class="property">
<label>组织名称：</label>
<input type="text" id="filter" name="filter" class="wfinput"/>
</span>
<span class="property">
<a href="javascript:void(0)" id="btnSearch" class="easyui-linkbutton">查询</a>
</span>
</form>
</div>
<div data-options="region:'center',border:true,collapsible:false">
<ul id='treeTT'></ul>
</div>
<div data-options="region:'south',border:false" style="height:35px;text-align:right; padding:5px 5px 0 0;background-color:#efefef;">
<a id="btnSave" href="javascript:void(0)" class="easyui-linkbutton" data-options="disabled:false">确定</a>
<a id="btnClose" href="javascript:void(0)" class="easyui-linkbutton" data-options="disabled:false">取消</a>
</div>
<script type="text/javascript" src="${requestContext.contextPath}/resources/scripts/jquery-${jqueryVersion}.min.js"></script>
<script type="text/javascript" src="${requestContext.contextPath}/resources/plugins/jquery-easyui-${easyuiVersion}/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${requestContext.contextPath}/resources/plugins/jquery-easyui-${easyuiVersion}/datagrid-detailview.js"></script>
<script type="text/javascript" src="${requestContext.contextPath}/resources/plugins/jquery-easyui-${easyuiVersion}/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${requestContext.contextPath}/resources/scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="${requestContext.contextPath}/resources/plugins/guiders/guiders-1.1.1.js"></script>
<script type="text/javascript" src="${requestContext.contextPath}/resources/scripts/changeEasyuiTheme.js"></script>
<script type="text/javascript" src="${requestContext.contextPath}/resources/scripts/jquery-domain.min.js"></script>
<script type="text/javascript">
var isfilter=false;
function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
function tree(){
var queryParams = getQueryParams();
if(queryParams == false) {
return;
}
$("#btnSearch").linkbutton("disable");
var url='${requestContext.contextPath}/management/organizationTree/getOrganizationTree';
var id = GetQueryString("eleId");
var name=GetQueryString("eleName");
var state=GetQueryString("state");
var type=GetQueryString("type");
var checkbox=true;
if(type==1){
checkbox=true;
}else if(type==2){
checkbox=false;
$('#btnSave').css({ visibility: 'hidden' });
}
queryParams.state=state;
$('#treeTT').tree({
onClick: function(node){
if (!$(node).tree('isLeaf', node.target)) {
$(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
node.state = node.state === 'closed' ? 'open' : 'closed';
}else{
if(type==1){
$('#treeTT').tree('check', node.target);
}else if(type==2){
if(window.opener){
if(window.opener.document.getElementById(id)){
window.opener.document.getElementById(id).value = node.id;
}
if(window.opener.document.getElementById(name)){
window.opener.document.getElementById(name).value = node.text;
}
}
window.close();
}
}
},
async: false,
cache:false,
lines : true ,
animate : true ,
url: url,
checkbox:checkbox,
method:'get',
queryParams:queryParams,
onLoadError:function(arguments){
alert("获取数据失败");
if(window.opener){
window.opener.document.getElementById(id).value = "";
window.opener.document.getElementById(name).value = "";
}
window.close();
},
onLoadSuccess:function(node, data){
$("#btnSearch").linkbutton("enable");
if(data==null||data==""){
alert("没符合条件的数据");
if(window.opener){
window.opener.document.getElementById(id).value = "";
window.opener.document.getElementById(name).value = "";
}
window.close();
}
// },
// loadFilter:function(data,parent){
// alert(data);
// // var d=data;
// // var p=parent;
}
});
}
function getQueryParams() {
var queryParams = $('form.orgtreeQuery').domain('collect');
if(queryParams == false) {
return false;
}
$("#btnSearch").linkbutton("enable");
return queryParams;
}
$(function(){
//解析页面
$.parser.parse();
var id = GetQueryString("eleId");
var name=GetQueryString("eleName");
tree();
$('#btnClose').click(function(){window.close();});
$("#btnSearch").click(function(){
treeFilter();
// tree();
});
$('#btnSave').click(function(){
var $tree=$("#treeTT");
if(isfilter){
$tree=$tree.next("ul.filterTree");
}else{
$tree=$("#treeTT");
}
var rows= $tree.tree('getChecked');
var group="";
var groupName="";
aaf1
for(var i=0;i<rows.length;i++){
var row=rows[i];
if(i<(rows.length-1)){
group+=row.id+",";
groupName+=row.text+",";
}else{
group+=row.id;
groupName+=row.text;
}
}
if(window.opener){
if(window.opener.document.getElementById(id)){
window.opener.document.getElementById(id).value = group;
}
if(window.opener.document.getElementById(name)){
window.opener.document.getElementById(name).value = groupName;
}
}
window.close();
});
//显示隐藏页面
$('body').css({ visibility: 'visible' });
//移除顶端遮罩
if (top.hideMask) top.hideMask();
});
$.extend($.fn.tree.defaults, {
loader : function (param, success, error) {
var opts = $(this).tree("options");
if (!opts.url) {
return false;
}
if(opts.queryParams){
param = $.extend({},opts.queryParams,param);
}
$.ajax({
type : opts.method,
url : opts.url,
data : param,
dataType : "json",
success : function (data) {
success(data);
},
error : function () {
error.apply(this, arguments);
}
});
},
queryParams:{}
});
//设置参数
$.extend($.fn.tree.methods, {
setQueryParams : function (jq, params) {
return jq.each(function () {
$(this).tree("options").queryParams = params;
});
}
});
//过滤
function treeFilter(){
isfilter=true;
var $tree = $("#treeTT");
var filterVal = $.trim($("#filter").val());
if(!filterVal){
revert();
return;
}
var reg = new RegExp(filterVal,"i");
var filterNodes = [];
$tree.find("div.tree-node").each(function(){
var treeNode = $(this).data("treeNode")
if(reg.test(treeNode.text)){
var tNd = $.extend({},treeNode);
var text = tNd.text;
// tNd.text = text.replace(reg, '<b style="color: blue;">$&</b>');
tNd.text = text.replace(reg, '$&');
filterNodes.push(tNd);
}
});
var filterTree = $tree.next("ul.filterTree");
if(filterNodes.length > 0){
if(filterTree.length == 0){
filterTree = $("<ul/>",{class:'filterTree'});
filterTree.insertAfter($tree);
$tree.hide();
var options = $tree.tree("options");
var options = $.extend(options,{url:null,data:filterNodes});
filterTree.tree(options);
}else{
filterTree.tree("loadData",filterNodes);
}
}else{
if(filterTree.length>0){
filterTree.remove();
}
$tree.show();
}
}
function revert(){
var $filterTree = $("#treeTT").next("ul.filterTree");
if($filterTree.length>0){
$filterTree.remove();
$("#treeTT").show();
}
}
</script>
</body>
</html>//Springmvc中的Controller的getOrganizationTree方法如下
@ResponseBody
@RequestMapping(value = {"/getOrganizationTree"}, method = RequestMethod.GET)
public TreeModel getOrganizationTree(HttpServletRequest request) {
Map<String, Object> queryParams = RequestUtil.asMap(request, false);
return organizationService.getGroupTree(queryParams);
}//Springmvc中的organizationService方法如下
@Override
public TreeModel getGroupTree(Map<String, Object> queryParams) {
int topId=-1;//顶级ID
if(queryParams.get("topId")!=null && !"".equals(queryParams.get("topId").toString()) && Integer.parseInt(queryParams.get("topId").toString())>-1){
topId=Integer.parseInt(queryParams.get("topId").toString());
}
List<ActGroup> coll = groupDao.find(queryParams);//机构查询条件
String state=queryParams.get("state")==null?"closed":queryParams.get("state").toString();
List<TreeNodeModel> list=new ArrayList<TreeNodeModel>();
TreeModel model=new TreeModel();
if(!CollectionUtils.isEmpty(coll)){
for(ActGroup group : coll){
TreeNodeModel treenode=new TreeNodeModel();
treenode.setId(group.getId()!=null?Integer.parseInt(group.getId()):0);
treenode.setText(group.getName()!=null?group.getName():"");
treenode.setParent(group.getRev()!=null?group.getRev():0);
treenode.setIconCls("icon-org");
Map<String, Object> attributes=new HashMap<String, Object>();
attributes.put("type", "group");
treenode.setAttributes(attributes);
list.add(treenode);
}
}
model=TreeUtil.buildTreeList(list,topId,state);
return model;
}//ActGroup.java
public class ActGroup implements Serializable {
private static final long serialVersionUID = 1L;
private String id;
private Integer rev;
private String name;
private String type;
public ActGroup(){
}
public ActGroup(String id,Integer rev,String name,String type){
this.id=id;
this.name=name;
this.rev=rev;
this.type=type;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public Integer getRev() {
return rev;
}
public void setRev(Integer rev) {
this.rev = rev;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
}
//数据库如图所示
//最终的效果如图所示
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 后台脚本更新后 如何让前端浏览器也更新脚本
- java.io.EOFException
- ***CSS魔法堂：选择器及其优先级
- javascript，jquery代码规范
- 前端优化之图片压缩
- json 几天学习的小知识 总结~~
- JSON使用DateTimeZoneHandling序列化时时区与日期
- Zepto.js
- 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- Angular控制器之间的数据通信
- HTML DOCTYPE 的重要性
- 利用html5看雪花飘落的效果
- jsp中为什么后台传递过来的数据没有空格 而jsp页面上用EL表达式接收就会显示有空格
- AngualrJS之服务器端通信
- JavaScript基础篇（6）之函数表达式闭包
- jsp页面格式化
- js获取键盘按键的值
- JS event使用方法详解
- js中获取事件对象的方法小结
- 关于使用WinHtmlEditor控件获得html代码加载到wpf中webbrowser控件上乱码问题