介紹
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',
type:"level3"
},
{
id: '2',
name:'Vegetables',
type: 'level2'
},
{
id: '3',
name:'Cereals',
type: 'level2',
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", "name", "type", "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，就可以實現很多用戶交互的效果。
