jQuery MiniUI

标题: JSP页面如何将outlooktree的数据源设置成JSON [打印本页]
作者: aipeli    时间: 2012-6-26 13:52:28     标题: JSP页面如何将outlooktree的数据源设置成JSON

以下是我将DEMO的代码与修改的代码做的比较，请问要怎么配置才可以使用JSON数据源？
  1. 示例代码：
  2. <div id="leftTree" class="mini-outlooktree" url="../data/outlooktree.txt" onnodeselect="onNodeSelect" textField="text" idField="id" parentField="pid">
  3. </div>
复制代码
  1. 示例outlooktree.txt  JSON格式数据
  2. [
  3.         {id: "user", text: "用户管理"},
  4.                
  5.         {id: "lists", text: "Lists", pid: "user" },
  6.                        
  7.         {id: "datagrid", text: "DataGrid", pid: "lists"},                       
  8.         {id: "tree", text: "Tree" , pid: "lists"},
  9.         {id: "treegrid", text: "TreeGrid " , pid: "lists"},
  10.                
  11.         {id: "layouts", text: "Layouts", expanded: false, pid: "user"},
  12.                
  13.         {id: "panel", text: "Panel", pid: "layouts"},
  14.         {id: "splitter", text: "Splitter", pid: "layouts"},
  15.         {id: "layout", text: "Layout ", pid: "layouts"},
  16.                
  17.         { id: "right", text: "权限管理"},
  18.                
  19.         {id: "base", text: "Base", expanded: false, pid: "right" },
  20.                                
  21.         {id: "ajax", text: "Ajax", pid: "base"},
  22.         {id: "json", text: "JSON", pid: "base"},
  23.         {id: "date", text: "Date", pid: "base"},
  24.                
  25.         {id: "forms", text: "Forms", expanded: false, pid: "right"},
  26.                                
  27.         {id: "button", text: "Button", pid: "forms"},
  28.         {id: "listbox", text: "ListBox", pid: "forms"},
  29.         {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
  30.         {id: "radiolist", text: "RadioList", pid: "forms"},
  31.         {id: "calendar", text: "Calendar", pid: "forms"}                               
  32. ]
复制代码


我修改的JSP代码：
  1. <div id="leftTree" class="mini-outlooktree" url="/getMenu" onnodeselect="onNodeSelect" textField="text" idField="id" parentField="pid">
  2. </div>
复制代码
http://localhost:8080/getMenu  JSON返回的数据
  1. {"getMenu":[{"id":"user","text":"用户管理"},{"id":"lists","text":"Lists","pid":"user"},{"id":"datagrid","text":"DataGrid","pid":"lists"},{"id":"tree","text":"Tree","pid":"lists"},{"id":"treegrid","text":"TreeGrid ","pid":"lists"},{"id":"layouts","text":"Layouts","expanded":false,"pid":"user"},{"id":"panel","text":"Panel","pid":"layouts"},{"id":"splitter","text":"Splitter","pid":"layouts"},{"id":"layout","text":"Layout ","pid":"layouts"},{"id":"right","text":"权限管理"},{"id":"base","text":"Base","expanded":false,"pid":"right"},{"id":"ajax","text":"Ajax","pid":"base"},{"id":"json","text":"JSON","pid":"base"},{"id":"date","text":"Date","pid":"base"},{"id":"forms","text":"Forms","expanded":false,"pid":"right"},{"id":"button","text":"Button","pid":"forms"},{"id":"listbox","text":"ListBox","pid":"forms"},{"id":"checkboxlist","text":"CheckBoxList","pid":"forms"},{"id":"radiolist","text":"RadioList","pid":"forms"},{"id":"calendar","text":"Calendar","pid":"forms"}]}
复制代码



作者: carboncocoa    时间: 2012-6-27 01:02:07

http://localhost:8080/getMenu  
你在浏览器里看下源代码
是不是带了HTML标签什么的
必须输出纯json才可以哦
以前我用php也是同样的问题
用echo 输出会多出一些html代码
当然浏览器里看不出来
用print_r就可以了
作者: aipeli    时间: 2012-6-29 15:48:46

carboncocoa 发表于 2012-6-27 01:02
http://localhost:8080/getMenu  
你在浏览器里看下源代码
是不是带了HTML标签什么的

{"getMenu":[{"id":"user","text":"用户管理"},{"id":"lists","text":"Lists","pid":"user"},{"id":"datagrid","text":"DataGrid","pid":"lists"},{"id":"tree","text":"Tree","pid":"lists"},{"id":"treegrid","text":"TreeGrid ","pid":"lists"},{"id":"layouts","text":"Layouts","expanded":false,"pid":"user"},{"id":"panel","text":"Panel","pid":"layouts"},{"id":"splitter","text":"Splitter","pid":"layouts"},{"id":"layout","text":"Layout ","pid":"layouts"},{"id":"right","text":"权限管理"},{"id":"base","text":"Base","expanded":false,"pid":"right"},{"id":"ajax","text":"Ajax","pid":"base"},{"id":"json","text":"JSON","pid":"base"},{"id":"date","text":"Date","pid":"base"},{"id":"forms","text":"Forms","expanded":false,"pid":"right"},{"id":"button","text":"Button","pid":"forms"},{"id":"listbox","text":"ListBox","pid":"forms"},{"id":"checkboxlist","text":"CheckBoxList","pid":"forms"},{"id":"radiolist","text":"RadioList","pid":"forms"},{"id":"calendar","text":"Calendar","pid":"forms"}]}

输出的好像多了个getMenu，有没有办法转成绝JSON数据？
作者: niko    时间: 2012-6-29 19:41:34

这个你在后台自己处理啊。
符合JSON结构就可以了。
作者: carboncocoa    时间: 2012-6-29 20:58:05

aipeli 发表于 2012-6-29 15:48
{"getMenu":[{"id":"user","text":"用户管理"},{"id":"lists","text":"Lists","pid":"user"},{"id":"data ...

假设json数据存储在变量$data里
$data＝json_decode($data);
$data＝$data['getmenu'];
print_r($data);
思路就是先把json转数组向量
把
getmenu向量里的内容提取
重新转换为json
作者: aipeli    时间: 2012-7-23 17:33:05

carboncocoa 发表于 2012-6-29 20:58
假设json数据存储在变量$data里
$data＝json_decode($data);
$data＝$data['getmenu'];

谢谢。。。
作者: superjirou    时间: 2012-8-10 07:23:11

aipeli 发表于 2012-7-23 17:33
谢谢。。。

我也遇到同样的问题。
在struts2下 用json 插件解析。返回值也不仅仅就是 minitree所需要的格式，真不知道如何解决

{"dept":{"deptList":[{"deptId":"0000","deptName":"XX县","farId":"-1"},{"deptId":"0009","deptName":"五里镇","farId":"0000"},{"deptId":"0010","deptName":"流水镇","farId":"0000"},{"deptId":"0011","deptName":"aaaaa","farId":"0000"},{"deptId":"0012","deptName":"ffdsfsfds","farId":"0000"},{"deptId":"0013","deptName":"ggggggg","farId":"0000"}]}}
作者: niko    时间: 2012-8-10 12:58:21

假设你的对象是obj,你可以这样返回数据：
HashMap dept = (HashMap )obj.get("dept");
ArrayList list = (ArrayList)dept.get("deptList");
String json = PluSoft.Utils.JSON.Encode(list);
返回JSON就可以了。
作者: superjirou    时间: 2012-8-11 14:30:34

niko 发表于 2012-8-10 12:58
假设你的对象是obj,你可以这样返回数据：
HashMap dept = (HashMap )obj.get("dept");
ArrayList list = (A ...

谢谢了。  通过PluSoft.Utils.JSON.Encode(object)实现了 对象转json字符串。
如果在加载json时取得的是对象，而不是单纯的字符串 我想这个 jquery mini ui 会更强大。

作者: niko    时间: 2012-8-11 19:19:07

mini.decode方法可以帮你把JSON字符串转换为JS对象的。
一般通过控件设置url的方式，会自动处理好。



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2