web tree dojo 0.3 和 梅花雪 MzTreeView1.0
开始:
首先大家先了解一下json.
json主要是来传输数据.起着和xml文件相同的作用,用于后台java和前台js的数据交互.
优点:简单,易于操作.可以看做是java中的map
确定:由于简单不适宜,不像xml文件那样可以传输复杂的格式.
至于详细的说明到网上查查吧,下面有个图 很好的说明它的格式:
言归正题
TREE1:
MzTreeView.这里我们说1.0版本.不支持动态加载节点.也就是一次性要读入所有节点.从后台java传入js的数据结构.是一种类似json(java中的map)格式的,对节点数量在五千个内的都不存在问题.(梅花雪大人在文档中说3—5w个都很快.我不太相信.哈哈).
下面先看看它的包结构:
大家一看那么多.其实就一个js文件,MzTreeView.js.
它的构造方法如下
Var 你树的名字 = new MzTreeView(“你树的名字”);
下面是设置一些图标
你树的名字.icons["property"] = "property.gif";
你树的名字.icons["css"] = "collection.gif";
你树的名字.icons["book.gif"] = "book.gif";
你树的名字.setIconPath("${pageContext.request.contextPath}/js/Mtree/"); //可用相对路径
下面构造节点:
你树的名字.nodes["pid_did"]="text:档案室;method:toSearch('001','001','3','-1','','0','');";
(上面method: 是梅花雪提供的调用js的方法.在页面就要有toSearch这个function)
这些节点我都是在页面用java代码写入得.代码如下
<%
String treeData = (String)request.getAttribute("treeData");
out.print(treeData);
%>
你树的名字.write(mlsTree.toString()); //写入页面.亦可用 obj.innerHTML = 写入
这样就构建好一棵树了.页面代码总的如下:
<script language="JavaScript">
var mlsTree = new MzTreeView("mlsTree");
mlsTree.icons["property"] = "property.gif";
mlsTree.icons["css"] = "collection.gif";
mlsTree.icons["book.gif"] = "book.gif";
mlsTree.setIconPath("${pageContext.request.contextPath}/js/Mtree/");
<%
String treeData = (String)request.getAttribute("treeData");
out.print(treeData);
%>
document.write(mlsTree.toString());
后台java代码就是把要显示树的数据库表读出来.成为一个list.然后解析list像上面格式然后放入request就可以了, 解析的代码如下:
String treeName = "mlsTree";//这个是树的名称要和页面的名称相同
StringBuffer tree = new StringBuffer("");
tree.append(treeName).append(".nodes[/"0_1/"]=/"text:根节点/";");
for (SMls mls : mzTree) {
id = String.valueOf( mls.getDid()+1);
pid = String.valueOf(mls.getPid()+1);
text = String.valueOf(mls.getJdmc());
tree.append("/n").append(treeName);
tree.append(".nodes[/"").append(pid);
tree.append("_").append(id).append("/"]=/"");
//method(qzh,jddm,jdsx,libcod,aw,type,bz)页面javascript会使用此参数列表
if (text != null && text.trim() != "") {
tree.append("text:").append(text).append(";");
tree.append("method:toSearch('").append(mls.getQzh()).append("','");
tree.append(mls.getJddm()).append("','").append(mls.getJdsx()).append("','");
tree.append(mls.getLibcode()).append("','").append(mls.getAw()).append("','");
tree.append(mls.getType()).append("','").append(mls.getBz()).append("');");
}
tree.append("/";");
}
request.setAttribute("treeData", tree.toString());
好了.梅花雪树就是这样.具体细节还是要看代码的:
Java: com.thams.search.action. SearchAction. DlaxMzTreeViewTree()
Jsp: WebRoot.search.searchTab.jsp
TREE2:
Dojo树.(dojo0.3版本.目前最新1.2)
说着这个树就很费劲了.他很大.也很强大.我只学了其皮毛.这里大家凑合看.
1. 首先在页面引入dojo:
<script type="text/javascript">
var djConfig = {isDebug: true };//这里是设置是否需要dojo的debug功能
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/dojojs/dojo.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/dojojs/json.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*"); 上面的引入大家都知道.这里的require相当于java中的import
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeRPCController");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
2. 为dojo加入事件监听:
Dojo的事件监听很复杂.这里我就说说最简单的也是我们用的connect监听:
//分类树 注册单击节点属性
function addListener(){
//得到被监听的元素
var beListener = dojo.widget.manager.getWidgetById(‘被监听id’);
//为上面的元素加监听事件, 参数 1.要被监听的元素,2. 说明单击事件 3.点击后触发的事件处理函数
dojo.event.connect(beListener,'select',' dealWith ');
}
function dealWith(){
alert(“我被单击了”);
}
如果你点击 dojo类型的元素,而且id是‘被监听id’的时候将会弹出对话框”我被单击了”
3. 首次进入也面利用dojo的ajax读入数据,这个和大多ajax都一样.我就不说了.
//加载页面时,自动创建只有根节点的树
dojo.addOnLoad(createTree);
//创建分类树
function createTree()
{
dojo.io.bind({
url: “action.do”
method:'POST',
handler: 回调函数,
content:{dojoLibcode:libcode}
});
}
4. 回调函数处理数据,后台传来的json格式.页面要解析如下:
//创建根节点树的回调函数
Function 回调函数(type, data, evt)
{
if (type == 'error')
{
alert('读取服务器数据时出错');
}
else
{
var tree = dojo.widget.byId("你树的名字.在下面呦");
//将服务器的响应解析成JSON对象
var nodeArr =(data.parseJSON());
//遍历数组元素
for (var i = 0 ; i < nodeArr.length ; i++)
{//每个数组元素对应一个根节点,创建根节点。
var appendNode = dojo.widget.createWidget("TreeNode",
{
isFolder:nodeArr[i].isFolder ,
title:nodeArr[i].title ,
widgetId:nodeArr[i].widgetId ,
childIconSrc:nodeArr[i].childIconSrc ,
flcode:nodeArr[i].flcode //自己需要的别的参数
});
//appendNode.expandLevel="2"; // 默认打开节点
tree.addChild(appendNode);
}
}
5.在div上创建dojo树:
<!—创建控制器 -à
<div dojoType="TreeRPCController" RPCUrl="动态请求的url" widgetId="控制器名字" DNDController="create"></div>
<!—创建监听器 -à
<div dojoType="TreeSelector" widgetId="监听器名字"></div>
<!—创建树 -à
<div dojoType="Tree" DNDMode="onto" selector="监听器名字" toggler="fade" widgetId="mlsTree" DNDAcceptTypes="mlsTree" controller="控制器名字">
好了.页面的就是这样.
6.后台action的java代码如下: (注释都很清楚我就不多说了)
String pid = "0"; //默认pid为0
String result = "[ ]"; //默认结果唯恐.[] 是json格式中的空
JSONArray jsonArray = new JSONArray();//创建json对象
List<SMls> smlsList = null;
PrintWriter out = null;
//得到页面传来参数 data 是dojo默认传递的.要注意,名字就是data!!!
String parentNodeString = request.getParameter("data");
try {
//TODO: 判断如果是第一次 将为 null 得到所有ROOT节点,否则根据父节点得到子节点
if(null != parentNodeString){
//解析json格式得到pid(也就是传入的did,widgtId)
JSONTokener jsonTokener = new JSONTokener(parentNodeString);
JSONObject jsonparentObject = (JSONObject) jsonTokener.nextValue();
JSONObject parentNodeObject = (JSONObject) jsonparentObject.get("node");
pid = parentNodeObject.getString("widgetId");
}
//调用service 得到list
smlsList = service.getSMlsNodeListByParent(Integer.parseInt(pid));
//将list转换为 json格式
if ( null != smlsList || smlsList.size() > 0 ) {
for (SMls mls : smlsList) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("title", mls.getJdmc());
if(mls.getChildNum()>0){
jsonObject.put("isFolder", true);
jsonObject.put("childIconSrc", "js/dojojs//images/tree/folder.png");//设置默认图标 文件夹
}else {
jsonObject.put("isFolder", false);
jsonObject.put("childIconSrc", "js/dojojs/images/tree/file.png");//设置默认图标 文件
}
jsonObject.put("widgetId", mls.getDid());
jsonObject.put("parentId", mls.getPid());
jsonObject.put("qzh", mls.getQzh());
jsonObject.put("libcode", mls.getLibcode());
jsonObject.put("nodeCode", mls.getJddm());
jsonObject.put("nodeAttr", mls.getJdsx());
jsonObject.put("nodeAttr_AW", mls.getAw());
jsonArray.put(jsonObject);
}
result = jsonArray.toString();//把json转为字符串
}
//.设置text/json; charset=UTF-8就可以 否则乱码
response.setContentType("text/json; charset=UTF-8");
out = response.getWriter();
out.println(result);
这2棵树就是这个样子的,本人理解的也很浮浅.如有什么疏漏请于本人联系.luyuwww@126.com
14617107(QQ)
web tree dojo 0.3 和 梅花雪 MzTreeView1.0相关推荐
- 梅花雪2.0树数据库数据绑定实例(vs2008)
梅花雪2.0树型结构sqlserver数据库数据绑定,IDE是VS2008,数据库是sql server2005,部分代码如下,代码实例[点击这里]下载. 效果图 数据库结构代码: CREATE TA ...
- Struts结合梅花雪实现动态生成树
昨天终于完成了动态树的测试,虽然还没有正式用于产品. 测试用到的知识点:struts,jsp,梅花雪1.0,Ms SQL2000. 部分代码如下: public ActionForward execu ...
- 梅花雪Web Calendar ver 3.0 网页日历在asp.net 2.0的应用
在.net中使用此控件,需要做些修改,经实验仅保留最佳方案,步骤如下: 1. <script type="text/javascript" src= "../J ...
- 梅花雪js树形控件MZTreeVew1.0/MZTreeVew2.0下载
官方:http://www.meizz.com/ 不知道为什么它不提供下载了,真是郁闷. 网上找了好久找不到,终于功夫不负有心人,找到了.有两个版本的,1.0和2.0,其中2.0的是CSDN树的一个D ...
- MzTreeView(梅花雪)完全攻略
为了方便了解,我们姑且分几个步骤来说明. 首先,自然是在后台读取所有树节点. /// <summary> /// 加载权限树 /// </summary> /// <re ...
- web项目部署服务器后无响应,Spring4.1.0 - SpringMVC第一步,Tomcat服务器端正常,客户端无法响应JSP页面问题处理...
最近,想把自己原先的项目架构改一下. 温故而知新~~ 恰巧,选了Spring4.1.0 于是遇到了 第一个坑-WEB版本问题 网上搜索到,从Spring4.1.0起,不再支持Tomcat6.0和EE2 ...
- ASP.NET Core 2.0 Web API项目升级到ASP.NET Core 3.0概要笔记
本文结构 先决条件 升级目标框架(Target Framework)的版本 过时的IHostingEnvironment与IApplicationLifetime对象 Endpoint Routing ...
- 修改的梅花雪的日期控件。。只是一些小改动
根据梅花雪的日期控件修改而来做了一些小扩充,样式做了一些调整 转载请注明原作者是梅花雪,假正经哥哥只是做了小修改,谢谢大家, 调用实例图片的样式实例调用,api 参考原说明文档 <script ...
- [JS代码]时间对象的格式化 (转自MEIZZ(梅花雪)的BLOG)
(转自MEIZZ(梅花雪)的BLOG) http://blog.csdn.net/meizz/archive/2005/06/28/405708.aspx?Pending=true <scrip ...
最新文章
- 语义分割该如何走下去?
- Linux下oracle数据库spfile参数配置文件丢失问题解决,“ORA-32001: write to SPFILE requested but no SPFILE is in use“问题处理
- Struts2学习总结三
- activiti-explorer 启动报错 Error creating bean with name 'demoDataConfiguration'
- openEuler Developer Day 启动大会招募环节,报名通道同步开启!
- jfinal使用配置文件注意事情
- Visual Studio Code 运行html文件右键Open In Other Browsers提示找不到Chrome的解决办法
- 新手怎么建设更高质量的外链
- 红米ac2100有ipv6吗_【0107-多功能版OpenWrt】红米小米AC2100|IPV6|酸奶|SmartDNS|多拨|猫咪,附教程...
- python菜鸟教程w-【读书】Django教程(菜鸟教程)
- 【MATLAB生信分析】MATLAB生物信息分析工具箱(二)
- js实现单元格合并和取消合并操作
- 示波器20M硬件带宽限制与数字滤波高低通功能
- php zend optimizer 解密,zend guard对php代码加密 zend optimizer解析
- 华为手机怎么连接电脑传输
- fastapi服务部署
- 2022引流新玩法,异业联盟打造商业闭环
- import scipy.io as sio报错:ImportError: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4
- Linux文件目录操作命令-mkdir命令
- AMD的GPU拿来跑深度学习?Rocm3.0Pytorch@Ubuntu16编译实录