如何用stroe过滤结构化的json对象？
 |
commond
2008-06-24
现有一个json文件
[
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" :
[
{"text" : "A3", "id" : 1001, "leaf" : true, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100100", "cls" : "file"},
{"text" : "Invoice", "id" : "100101", "cls" : "file"},
{"text" : "MSRP", "id" : "100102", "cls" : "file"},
{"text" : "Options", "id" : "100103", "cls" : "file"},
{"text" : "Specifications", "id" : "100104", "cls" : "file"}
]
},
{"text" : "TT", "id" : 1002, "leaf" : true, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100200", "cls" : "file"},
{"text" : "Invoice", "id" : "100201", "cls" : "file"},
{"text" : "MSRP", "id" : "100202", "cls" : "file"},
{"text" : "Options", "id" : "100203", "cls" : "file"},
{"text" : "Specifications", "id" : "100204", "cls" : "file"}
]
}
]
},
{"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" :
[
{"text" : "CTS", "id" : 3001, "leaf" : true, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "300100", "cls" : "file"},
{"text" : "Invoice", "id" : "300101", "cls" : "file"},
{"text" : "MSRP", "id" : "300102", "cls" : "file"},
{"text" : "Options", "id" : "300103", "cls" : "file"},
{"text" : "Specifications", "id" : "300104", "cls" : "file"}
]
},
{"text" : "CTS-V", "id" : 3002, "leaf" : true, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "300200", "cls" : "file"},
{"text" : "Invoice", "id" : "300201", "cls" : "file"},
{"text" : "MSRP", "id" : "300002", "cls" : "file"},
{"text" : "Options", "id" : "300203", "cls" : "file"},
{"text" : "Specifications", "id" : "300204", "cls" : "file"}
]
}
]
}
]
有如下代码：
var basestore=new Ext.data.JsonStore({
url:'test.json',
autoLoad:true,
fields:['id','text','cls','children']
});
basestore.load();
想要通过确定‘TT’关键字将TT的children
[ {"text" : "Fuel Economy", "id" : "100200", "cls" : "file"},
{"text" : "Invoice", "id" : "100201", "cls" : "file"},
{"text" : "MSRP", "id" : "100202", "cls" : "file"},
{"text" : "Options", "id" : "100203", "cls" : "file"},
{"text" : "Specifications", "id" : "100204", "cls" : "file"}
]
选出来在grid显示，该怎么做呢？ |
|
equalto
2008-06-24
一个解决办法是,url请求,增加参数,在服务器段返回数据时候过滤;
增加参数的方法,可以看范例. |
|
commond
2008-06-25
弱弱的问一下，范例是ext自带的example吗？具体是哪个js？
|
|
yunhaifeiwu
2008-06-26
大多数与服务器交互的组件在构建时有参数一项
Ext.data.JsonStore 也不例外 例：客户端 <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js">
</script><script type="text/javascript" src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady( function (){
var store = new Ext.data.JsonStore({
baseParams:{aa:"bb"},//参数，服务器功能选择
url:'login.do',//服务器网址
root: 'images', //json字符串第一层对象必须是唯一的images fields: ['name', 'url', {name:'size', type: 'float'},
{name:'lastmod', type:'date'}]
});
store.load(); //向服务器索要所需的数据
var tpl = new Ext.XTemplate(
'<tpl for=".">',//表示循环取数组中的数据，填充模板
'<div class="thumb-wrap" id="{name}">{name}{lastmod}',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);//模板中要引用的数据变量名，要用大括号{}括起来
var dd = new Ext.Panel({
id:'images-view',
renderTo: Ext.getBody(),//定位到本身的网页上
frame:true,
width:250,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Simple DataView',
items: new Ext.DataView({
store: store,//网页模板要用到的数据
tpl: tpl,//网页模板
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});
dd.show();
});
</script>
<body>
<div id="hello"/>
</body>
</html>
服务端:根据客户端不同的参数，返给客户不同的数据
package action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.validation.BindException;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.SimpleFormController;
public class Login extends SimpleFormController{
public Login(){ }
@Override
protected ModelAndView onSubmit(HttpServletRequest arg0,
HttpServletResponse arg1, Object cmd, BindException ex) throws Exception {
arg1.setContentType("text/json; charset=utf-8");//防中文乱码
ModelAndView aaa=null;
//注意：要返回的json字符串。只有一个images对象.这个对象含有多
//个子对象。其中url所指的aa.gif等图片，位于工程下的web文件夹下
//的resources/img下面。
String data;
if (arg0.getParameter("aa").equals("bb")){
data ="{images: [{name: 'Image one', url:'resources/img/aa.gif', size:46.5, lastmod: new Date(2007, 10, 29)}, ";
data=data+ " {name: 'Image Two', url:'resources/img/aqa.jpg', size:43.2, lastmod: new Date(2007, 10, 30)} ]} ";
arg1.getWriter().write(data); //输出数据
arg1.getWriter().flush();//清除缓冲
} else{
aaa=new ModelAndView(this.getFormView());
}
return aaa;
}
}
|
|
yunhaifeiwu
2008-06-26
客户端代码:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js">
</script><script type="text/javascript" src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady( function (){
var store = new Ext.data.JsonStore({
baseParams:{aa:"bb"},//参数，服务器功能选择
url:'login.do',//服务器网址
root: 'images', //json字符串第一层对象必须是唯一的images fields: ['name', 'url', {name:'size', type: 'float'},
{name:'lastmod', type:'date'}]
});
store.load(); //向服务器索要所需的数据
var tpl = new Ext.XTemplate(
'<tpl for=".">',//表示循环取数组中的数据，填充模板
'<div class="thumb-wrap" id="{name}">{name}{lastmod}',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);//模板中要引用的数据变量名，要用大括号{}括起来
var dd = new Ext.Panel({
id:'images-view',
renderTo: Ext.getBody(),//定位到本身的网页上
frame:true,
width:250,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Simple DataView',
items: new Ext.DataView({
store: store,//网页模板要用到的数据
tpl: tpl,//网页模板
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});
dd.show();
});
</script>
<body>
<div id="hello"/>
</body>
</html>
服务端代码 package action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.validation.BindException;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.SimpleFormController;
public class Login extends SimpleFormController{
public Login(){ }
@Override
protected ModelAndView onSubmit(HttpServletRequest arg0,
HttpServletResponse arg1, Object cmd, BindException ex) throws Exception {
arg1.setContentType("text/json; charset=utf-8");//防中文乱码
ModelAndView aaa=null;
//注意：要返回的json字符串。只有一个images对象.这个对象含有多
//个子对象。其中url所指的aa.gif等图片，位于工程下的web文件夹下
//的resources/img下面。
String data;
if (arg0.getParameter("aa").equals("bb")){
data ="{images: [{name: 'Image one', url:'resources/img/aa.gif', size:46.5, lastmod: new Date(2007, 10, 29)}, ";
data=data+ " {name: 'Image Two', url:'resources/img/aqa.jpg', size:43.2, lastmod: new Date(2007, 10, 30)} ]} ";
arg1.getWriter().write(data); //输出数据
arg1.getWriter().flush();//清除缓冲
} else{
aaa=new ModelAndView(this.getFormView());
}
return aaa;
}
}
|
|
yunhaifeiwu
2008-06-26
 插入代码，怎么与众不同呢
|
 |
cheng022074
2008-06-29
从设计角度与兼容性上来讲，建议服务端使用XML，而在本地，也就是客户端使用JSON，毕竟从查询到数据存储而言，XML是优于JSON，JSON只在传输上占点便宜
|
|
chenxiaoji
2008-08-12
ext dataview怎样分页啊！！！
|
