（原）DOJO之dojo.query、JSON树（结构）、dojo读取json

老外这么说：
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.iteye.com/blog/189784
和本文这个例子是同源的。我是在他的那个例子上改动了一下。

评论

5 楼 stvsui 2008-11-25  

楼主为什么要使用XHR方式呢？若是json文件，对于dojo.tree可以直接采用ItemFileWriteStore读取json方式读取不是吗？
难道需要生成动态tree?

4 楼 wangsong76 2008-11-01  

建议不要用DOJO了。还是用jquery。
用过dojo，你才能比其他人更能体会jquery的强大。

3 楼 hanjian 2008-09-03  

我想问一下如果 .json文件里面有中文，则怎么解决树上面加载的乱码 问题呢？

2 楼 tianhaoleng 2008-07-26  

dojo的中文资料实在太少，有也都是基于0.4x版本的。从0.4x到1.x版本跨度实在太大，过时的中文文档根本没有参考价值，建议其他学习dojo的同学直接去官网查阅英文资料。谢谢楼主分享！

1 楼 prophet 2008-05-09  

说实话 我觉得dojo的dataStore对嵌套查询支持的不好，不仅麻烦而且如果在不同父节点下有相同identity的子节点，很难查询。