浏览 225 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
时间:2008-05-07
老外这么说:
dojo.query() is the swiss army knife of DOM node manipulation in Dojo. Much like Prototype’s “$$” (bling-bling) function or JQuery’s “$” function, dojo.query provides robust, high-performance CSS-based node selector support with the option of scoping searches to a particular sub-tree of a document 简单点说,就是dojo.query()是可以按样式、标签名、字符等等,来查询文档中的某个元素。 关键是怎么使用,国外的网上说的很清楚,其实你要是能耐住性子把DOJO BOOK里面的都认认真真看一边,就不用看我下面写的这点东西。 我也是惊叹dojo.query 中文资料的匮乏,才把自己看的英文资料和自己的实践做个小结,利人利己。 这个是老外的例子: Example 1 search the entire document for elements with the class “foo”: dojo.query(".foo"); these elements will match: Example 2 search the entire document for elements with the classes “foo” and “bar”: dojo.query(".foo.bar"); these elements will match: while these will not: Example 3 find “ elements which are descendants of paragraphs and which have a “highlighted” class: dojo.query("p span.highlighted"); the innermost span in this fragment matches: ... ... Example 4 set an “odd” class on all odd table rows inside of the table #tabular_data , using the > (direct child) selector to avoid affecting any nested tables: dojo.query("#tabular_data > tbody > tr:nth-child(odd)").addClass("odd"); Example 5 remove all elements with the class “error” from the document and store them in a list: var errors = dojo.query(".error").orphan(); Example 6 add an onclick handler to every submit button in the document which causes the form to be sent via Ajax instead: dojo.query("input[type='submit']").onclick(function(e){ dojo.stopEvent(e); // prevent sending the form var btn = e.target; dojo.xhrPost({ form: btn.form, load: function(data){ // replace the form with the response var div = dojo.doc.createElement("div"); dojo.place(div, btn.form, "after"); div.innerHTML = data; dojo.style(btn.form, "display", "none"); } }); }); 上面这些例子主要是为了大家能了解query,怎么用! 下面是我自己的例子: 结合JSON查询。 这个是个JSON集合,比较好的用法是你把这个代码放在一个filename.json的文件里。 我放在D:\WK50\tems114\test.json
{ identifier: 'name',
label: 'name',
items: [
{ name:'Africa', type:'continent',
children:[{_reference:'Egypt'}, {_reference:'Sudan'}] },
{ name:'Egypt', type:'country' },
{ name:'Kenya', type:'country' },
{ name:'Sudan', type:'country' }
]}
对于这个JSON的结构有几句话: JSON的结构,就是 键:值 identifier中文意思:标识符;identifier: 'name' 的意思就是指定后面items里面的name键为标识符。老外说标识符就是唯一识别元组,不会重复的那个东西。 label 中文意思:标签;我的理解就是一个说明吧,这个就好像是你有名字,又有身份证编号一样。这个label就是你的名字,那个identifier就是你的身份证编号。 items 中文意思:元素集合 ,就表示是一个数组,jsonAarry 上面说这些,是为了说明下面这个: 如果你要获取一个元素的label 需要用store.getLabel(item) 这下问题来了: store是什么?item是什么?先解释一下store就是数据源,dojo里面有个方法可以把json读取后存储为一个数据源,这里的item和上面说的items是有关系的,item就是items中的元素,具体的要看下面的代码。这个也是老外的例子,指不过我略微修改和加了点注释。如果要运行改代码,有个必要条件就是你在引入dojo.js的时候,djConfig里面的isDebug: true 我是jsp的页面,里面引用如下:
<script type="text/javascript"
src="<html:rewrite page='/dojoroot/dojo/dojo.js'/>"
djConfig="parseOnLoad: true, isDebug: true,usePlainJson:true "></script>
这个例子看似复杂,明白了每句话的意思之后,才觉得,真是简单啊!
function test()
{//读取json
var store = new dojo.data.ItemFileReadStore({url: "<html:rewrite page="/test.json"/>"});
//下面这个是函数申明,其实就是function gotContinents (items, request);
//这个函数是为了处理后面query: {type: "continent"}返回的结果。具体看
//store.fetch({query: {type: "continent"}, onComplete: gotContinents}); 的注解。
// items 是一个数组,查询返回的结果集,request就是请求。至于这个request怎么
//用,我也不清楚,看了很多也没发现这个东西有什么用!
//里面的console.log 其实就是 console.debug() 就是向dojo调试控制台输出。很多
///用alert()返回是object的东西,通过这2个函数,可以输出具体值,比如本例中的
//console.log("item'lable:["+store.getLabel(item)+"]
//attributes.length="+attributes.length);
//你alert(attributes.length)返回值就是object
//你如果用console.log(attributes.length)控制台输出就是3
var gotContinents = function(items, request){
//Cycle over all the matches.
for(var i = 0; i < items.length; i++){
var item = items[i];
//Cycle over all the attributes.
var attributes = store.getAttributes(item);
console.log("item'lable:["+store.getLabel(item)+"] attributes.length="+attributes.length);
for (var j = 0; j < attributes.length; j++){
//Assume all attributes are multi-valued and loop over the values ...
var values = store.getValues(item, attributes[j]);
console.log("item'lable:["+store.getLabel(item)+"] values.length="+values.length);
for(var k = 0; k < values.length; k++){
var value = values[k];
if(store.isItem(value)){
//Test to see if the items data is fully loaded or needs to be demand-loaded in (the item in question is just a stub).
if(store.isItemLoaded(value)){
console.log("Located a child item with label: [" + store.getLabel(value) + "]");
}else{
//Asynchronously load in the child item using the stub data to get the real data.
var lazyLoadComplete = function(item){
console.log("Lazy-Load of item complete. Located child item with label: [" + store.getLabel(item) + "]");
}
store.loadItem({item: value, onItem: lazyLoadComplete});
}
}else{
console.log("Attribute: [" + attributes[j] + "] has value: [" + value + "]");
}
}
}
}
}
//Call the fetch of the toplevel continent items.
store.fetch({query: {type: "continent"}, onComplete: gotContinents});
//这个函数很神奇,有3个需要说明:
//query: {type: "continent"} 意思就是在test.json中获取所有type: "continent"的items 显//然只有一条记录: { name:'Africa', type:'continent',
// children:[{_reference:'Egypt'}, {_reference:'Sudan'}] }
//onComplete: gotContinents 这个onComplete 是fetch的一个参数,意识就是当
//前面这个query查询完成后调用gotContinents 函数
//store.fetch() 简单的说,就是当你需要查询json的时候,把查询语句,和一个处理函
//数放里面;值得说明的是,这个函数是异步调用的,也就是说,可能在一些情况下并不是每
//个元素都被加载完了,这也是为什么上面gotContinents函数里面会有
//if(store.isItemLoaded(value)){} 的原因
}
运行结果: item'lable:[Africa] attributes.length=3 item'lable:[Africa] values.length=1 Attribute: [name] has value: [Africa] item'lable:[Africa] values.length=1 Attribute: [type] has value: [continent] item'lable:[Africa] values.length=2 Located a child item with label: [Egypt] Located a child item with label: [Sudan] 最后一点说明:json文件中: children:[{_reference:'Egypt'}, {_reference:'Sudan'}] 中_reference,这个东西找了很多地方,就只在DOJO的例子看见过,没在其他地方见过,在这里就是说,引用了name:'Egypt'元素。尚不清楚是不是标准JSON里面的结构,或者就是dojo自己定义的结构,清楚的人劳烦解释一下。 同时可以参见我转的DOJO BOOK上面的一个例子Nested Items and Lazy Loading(我的翻译是:元素集合之延迟加载),不同的是我给出了运行结果,这样好理解些:http://wangsong76.javaeye.com/blog/189784 和本文这个例子是同源的。我是在他的那个例子上改动了一下。 声明:JavaEye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
| 返回顶楼 | |
|
时间:2008-05-09
说实话 我觉得dojo的dataStore对嵌套查询支持的不好,不仅麻烦而且如果在不同父节点下有相同identity的子节点,很难查询。
|
|
| 返回顶楼 | |



