介绍
dojo.data.ItemFileWriteStore是Dojo用来在前端操作数据的一个强大的工具。它可以和很多UI控件合作,进行数据的存储、传输和表示。比如和dijit.Tree结合时,可以在前端表示树形。最强大的是,只要操作ItemFileWriteStore,就可以实现树形的修改,包括增删节点、修改属性等。而且可以实时反映在前端页面上。
现在就以dijit.Tree为例,说明ItemFileWriteStore可以进行哪些操作(Dojo 1.7.3)。
代码示例
首先创建dijit.Tree并绑定一个dojo.data.ItemFileWriteStore。
test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <style type="text/css"> @import "../js/dijit/themes/tundra/tundra.css"; @import "../css/main.css"; </style> </head> <body class="tundra"> <div data-dojo-type="dojox.layout.ContentPane" style="width: 100%;"> <div id="tree_1"></div> </div> <script> dojoConfig = { isDebug : false,parSEOnLoad : true,async : true }; </script> <script type="text/javascript" src="../js/dojo/dojo.js"></script> <script> require(["dijit/layout/BorderContainer","dojox/layout/ContentPane","dijit/form/Button" ]); </script> <script> require( [ "dojo/ready","dijit/registry","dojo/_base/array","dojo/on","dojo/dom","dojo/query","dojo/data/ItemFileWriteStore","dojo/store/Observable","dijit/tree/ForestStoreModel","dijit/Tree" ],function(ready,registry,array,on,dom,query,ItemFileWriteStore,Observable,ForestStoreModel,Tree,customDndSource,customDndTarget) { ready(function() { /*创建ItemFileWriteStore及相应的dijit.Tree*/ var data_1 = { identifier: 'id',label: 'name',items: [ { id: '0',name:'Foods',type: 'level1',children:[ {_reference: '1'},{_reference: '2'},{_reference: '3'} ] },{ id: '1',name:'Fruits',type: 'level2',children:[ {_reference: '5'},{_reference: '6'} ] },{ id: '5',name:'Orange',type:"level3" },{ id: '6',name:'Apple',{ id: '2',name:'Vegetables',type: 'level2' },{ id: '3',name:'Cereals',children:[ {_reference: '4'} ] },{ id: '4',name:'Rice cereal',type:"level3" } ] }; var store_1 = new ItemFileWriteStore({ data : data_1 }); store_1 = new Observable(store_1); var model_1 = new ForestStoreModel({ store : store_1,query : { type : 'level1' } }); var tree_1 = new Tree({ id : "tree_1",model : model_1,showRoot : false,dndController : customDndSource,dragThreshold : 8,betweenThreshold : 5,persist : true },"tree_1"); }); }); </script> </body> </html>
接下来,通过操作ItemFileWriteStore来实现对绑定tree的操作。
/*操作ItemFileWriteStore*/ //从dijit.Tree拿到ItemFileWriteStore var store = dijit.byId("tree_1").model.store; //根据identity拿到item,两种方法 var item = store._itemsByIdentity["1"]; //Object { id=[1],name=[1],type=[1],more...} var item = store._getItemByIdentity("0"); //对item设置属性及值 store.setValue(item,"description","This is fruits"); //true //对item取消某个属性 store.unsetAttribute(item,"description"); //true //拿到item的所有自定义属性 store.getAttributes(item); //["id","name","type","children"] //拿到item的所有属性,包括系统属性 Object.keys(item); //["id","children","_RI","_S","_0","_RRM"] //对item设置值为列表的属性 store.setValues(item,"order",[1,2]); //true //拿到item为列表的属性 store.getValues(item,"order"); //[1,2] //拿到store的内容,以JSON String的格式 store._getNewFileContentString(); //根据各种query条件查询store中的items store.fetch({query:{type:"level1"},onComplete:function(items){console.log(items);}}); //拿到item的父亲 var parent_id = Object.keys(item._RRM)[0]; var parent = store._getItemByIdentity[parent_id]; //创建item var newitem = {id:"7",name:"Oatmeal cereal",type:"level3"}; var parent = store._getItemByIdentity("3"); store.newItem(newitem,{parent: parent,attribute: "children"}); store.save(); //删除item store.deleteItem(newItem); store.save();
总结
除了dijit.Tree,dojo.data.ItemFileWriteStore 还可以绑定DataGrid、Select、ComboBox等等各种dojo UI控件。可以说掌握了ItemFileWriteStore,就可以实现很多用户交互的效果。