您的位置：首页 > 产品设计 > UI/UE

easyui treegrid demo

2017-10-23 00:00 316 查看

服务端代码
/**
* @Title: ui @Description: 获取城市案例数据 @param @return @return Object @throws
*/
@RequestMapping(value = { "/cityRoom" })
@ResponseBody
public String cityYNRoom(HttpServletRequest request) {
String parentId = request.getParameter("parentId");
List<CityRoomData> courseTypes = new ArrayList<CityRoomData>();
CityRoomData  sct = new CityRoomData();
if(StringUtils.isNotEmpty(parentId)){
sct.setPid(Long.parseLong(parentId));
courseTypes =cityRoomService.getCityRoom(sct);
} else {
sct.setPid(0l);
courseTypes = cityRoomService.getCityRoom(sct);
}
JSONArray json  =  new JSONArray();
if(courseTypes.size()>0){
JSONObject jo =null;
for(CityRoomData courseType:courseTypes){
jo = new JSONObject();
jo.put("id", courseType.getId());
jo.put("namee", courseType.getNamee());
jo.put("yesBuildArea", courseType.getYesBuildArea());
jo.put("noBuildArea", courseType.getNoBuildArea());
jo.put("date", courseType.getCreateTime());
jo.put("updatedate", courseType.getUpdateTime());
//根据id判断是否有子节点
CityRoomData  sct1 = new CityRoomData();
sct1.setPid(courseType.getId());
List<CityRoomData> count  = cityRoomService.getCityRoom(sct1);
if(count.size()>0){
jo.put("state", "closed");
}
json.put(jo);
}
}
JSONObject jo1 =new JSONObject();
jo1.put("rows", json);
jo1.put("total", courseTypes.size());
return jo1.toString();
}

前段页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"";
%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="breadcrumb">
<li><a href="#">城市数量统计</a> <span class="divider">/</span></li>
<li class="active">城市数量统计</li>
</ul>
<div style="margin:20px 0;"></div>

<table id="tt" style="width:100%;height:600px"></table>
<script>
$(function() {
$('#tt').treegrid({
url:'<%=basePath%>/cityAccountData/cityRoom',
idField:'id',
treeField:'namee',
animate:true,
loadMsg: "数据加载中，请稍后...",
rownumbers: true,
singleSelect: true,
parentField : 'pid',
fitColumns : true,
columns:[[
{title:'城市',field:'namee',width:380},
{field:'yesBuildArea',title:'有面积房号数量',width:200},
{field:'noBuildArea',title:'无面积房号数量',width:200},
{field:'date',title:'时间',width:228,formatter:formatdate},
{field:'updatedate',title:'修改时间',width:200,formatter:formatdate}
]],
onBeforeExpand:function(row,param){
appendTree(row);
},
onSelect: function (row) {
if(row!=null && row!=undefined && row!=""){
selectNode=row;  //选中项
}
},
onDblClickCell:function(field, value){
var selectedRow = $(this).treegrid('getSelected');
var temp = "";
for(var i in selectedRow){//用javascript的for/in循环遍历对象的属性
temp += i+":"+selectedRow[i]+"\n";
}
alert(temp);//结果：cid:C0 \n ctext:区县
}
});
});

function appendTree(row){
$.getJSON('<%=basePath%>/cityAccountData/cityRoom?parentId='+row.id, {
enableFlag: 'Y',
parentOrgId: row.orgId
}, function(json){
if(json.rows[0]){
var childrenNodes = $('#tt').treegrid('getChildren',row.id);
for(var i=0; i<childrenNodes.length; i++){
var childrenNode = childrenNodes[i];
if($('#tt').treegrid('find',childrenNode.id) != null){
$('#tt').treegrid('remove',childrenNode.id);//移除
}
}
$('#tt').treegrid('append',{
parent: row.id,
data: json.rows
});
}
});
};
function formatdate(value){
return FormatToDate(value,"-");
}

function FormatToDate(inputstr,showsplit){
inputstr = inputstr + ""; //末尾加一个空格
str = inputstr.split(" ");
var month = new Array();
month["Jan"] = '01'; month["Feb"] = '02'; month["Mar"] = '03'; month["Apr"] = '04'; month["May"] = '05'; month["Jun"] = '06';
month["Jul"] = '07'; month["Aug"] = '08'; month["Sep"] = '09'; month["Oct"] = 10; month["Nov"] = 11; month["Dec"] = 12;
var date = str[5];
date +=showsplit +month[str[1]]+showsplit+ str[2]+" "+str[3];
return date;
}
</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： treegrid

相关文章推荐

新的分享

章节导航