开始: 首先大家先了解一下json. json主要是来传输数据.起着和xml文件相同的作用,用于后台java和前台js的数据交互. 优点:简单,易于操作.可以看做是java中的map 确定:由于简单不适宜,不像xml文件那样可以传输复杂的格式. 至于详细的说明到网上查查吧,下面有个图 很好的说明它的格式:
TREE1: MzTreeView.这里我们说1.0版本.不支持动态加载节点.也就是一次性要读入所有节点.从后台java传入js的数据结构.是一种类似json(java中的map)格式的,对节点数量在五 千个内的都不存在问题.(梅花雪大人在文档中说3—5w个都很快.我不太相信.哈哈). 下面先看看它的包结构:
它的构造方法如下 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";//这个是树的名称要和页面的名称相同
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(); |
JSON简介
JSON简介