分类导航

Dojo 发布时间：2022-04-21 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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
@R_785_10944@，就是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
&gt;
(direct child) SELEctor to avoid affecTing any nested tables:
dojo.query("#tabular_data &gt; tbody &gt; 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

Js代码

{identifier:'name',
label:'name',
items:[
{name:'Africa',type:'conTinent',
children:[{_reference:'Egypt'},{_reference:'Sudan'}]},
{name:'Egypt',type:'country'},
{name:'Kenya',
{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中的元素，具体的要看下面的代码。这个也是老外的例子，指不过我略微@L_450_24@和加了点注释。如果要运行改代码，有个必要条件就是你在引入dojo.js的时候，djConfig里面的isDebug: true 我是jsp的页面，里面引用如下：

Js代码

<scripttype="text/javascript"
src="<html:rewritepage='/dojoroot/dojo/dojo.js'/>"
djConfig="parSEOnLoad:true,isDebug:true,usePlainJson:true"></script>

这个例子看似复杂，明白了每句话的意思之后，才觉得，真是简单啊！

Js代码

functiontest()
{@H_197_210@//读取json
varstore=newdojo.data.ItemFileReadStore({url:"<html:rewritepage="/test.json"/>"});
@H_197_210@//下面这个是函数申明，其实就是functiongotConTinents(items,request);
@H_197_210@//这个函数是为了处理后面query:{type:"conTinent"}返回的结果。具体看
@H_197_210@//store.fetch({query:{type:"conTinent"},onComplete:gotConTinents});的注解。
@H_197_210@//items是一个数组，查询返回的结果集，request就是请求。至于这个request怎么
@H_197_210@//用，我也不清楚，看了很多也没发现这个东西有什么用！
@H_197_210@//里面的console.log其实就是console.debug()就是向dojo调试控制台输出。很多
@H_197_210@///用alert()返回是object的东西，通过这2个函数，可以输出具体值，比如本例中的
@H_197_210@//console.log("item'lable:["+store.getLabel(item)+"]
@H_197_210@//attributes.length="+attributes.length);
@H_197_210@//你alert(attributes.length)返回值就是object
@H_197_210@//你如果用console.log(attributes.length)控制台输出就是3
vargotConTinents=function(items,request){
@H_197_210@//CycLeoverallthematches.
for(vari=0;i<items.length;i++){
varitem=items[i];
@H_197_210@//CycLeoveralltheattributes.
varattributes=store.getAttributes(item);
console.log("item'lable:["+store.getLabel(item)+"]attributes.length="+attributes.length);
for(varj=0;j<attributes.length;j++){
@H_197_210@//Assumeallattributesaremulti-valuedandloopoverthevalues...
varvalues=store.getValues(item,attributes[j]);
console.log("item'lable:["+store.getLabel(item)+"]values.length="+values.length);
for(vark=0;k<values.length;k++){
varvalue=values[k];
if(store.isItem(value)){
@H_197_210@//Testtoseeiftheitemsdataisfullyloadedorneedstobedemand-loadedin(theiteminquestionisjustastub).
if(store.isItemLoaded(value)){
console.log("Locatedachilditemwithlabel:["+store.getLabel(value)+"]");
}else{
@H_197_210@//Asynchronouslyloadinthechilditemusingthestubdatatogettherealdata.
varlazyLoadComplete=function(item){
console.log("Lazy-Loadofitemcomplete.Locatedchilditemwithlabel:["+store.getLabel(item)+"]");
}
store.loadItem({item:value,onItem:lazyLoadCompletE});
}
}else{
console.log("Attribute:["+attributes[j]+"]hasvalue:["+value+"]");
}
}
}
}
}
@H_197_210@//CallthefetchofthetoplevelconTinentitems.
store.fetch({query:{type:"conTinent"},onComplete:gotConTinents});
@H_197_210@//这个函数很神奇，有3个需要说明：
@H_197_210@//query:{type:"conTinent"}意思就是在test.json中获取所有type:"conTinent"的items显//然只有一条记录：{name:'Africa',type:'conTinent',
@H_197_210@//children:[{_reference:'Egypt'},{_reference:'Sudan'}]}
@H_197_210@//onComplete:gotConTinents这个onComplete是fetch的一个参数，意识就是当
@H_197_210@//前面这个query查询完成后调用gotConTinents函数
@H_197_210@//store.fetch()简单的说，就是当你需要查询json的时候，把查询语句，和一个处理函
@H_197_210@//数放里面;值得说明的是，这个函数是异步调用的，也就是说，可能在一些情况下并不是每
@H_197_210@//个元素都被加载完了，这也是为什么上面gotConTinents函数里面会有
@H_197_210@//if(store.isItemLoaded(value)){}的原因
}