100行代碼解析Dojo樹控件拖拽案例
案例設定：javascript
建立2個樹控件，左右排列。css
使用拖動的方式，將樹節點從左側樹控件拖拽的右側樹控件。html
拖拽過程當中右側樹控件要進行驗證，確認是否能夠方式拖拽中的節點。java
放置的處理，識別要放置的節點，獲取其信息並動態建立新的節點（基於基礎類型進行實例化的過程）。node
右側樹控件內（實例化以後的節點），同類型節點間支持拖動排序。數組
Dojo版本 1.10.3數據結構
圖例1：建立2個樹控件，左右排列。dom
圖例二、3：ide
使用拖動的方式，將樹節點從左側樹控件拖拽的右側樹控件。函數
拖拽過程當中右側樹控件要進行驗證，確認是否能夠方式拖拽中的節點。
圖例4
放置的處理，識別要放置的節點，獲取其信息並動態建立新的節點（基於基礎類型進行實例化的過程）。
圖例5：拖拽以後的效果
圖例六、7
右側樹控件內（實例化以後的節點），同類型節點間支持拖動排序。
案例代碼：
<!DOCTYPE html>
<html > <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../dojo_1.10.3/dijit/themes/claro/claro.css"/>
<script type="text/javascript" src="../dojo_1.10.3/dojo/dojo.js" ></script>
<script>
function makeTree(treedata, rootid, treenodeid, dndSkip
, registry, ItemFileWriteStore, TreeStoreModel, dndSource, Tree) {
var store2 = new ItemFileWriteStore({data: treedata});
var treeModel = new TreeStoreModel({
store: store2
, query: {"id": rootid}
, childrenAttrs: ["children"]
});
var tree = new Tree({
model: treeModel, openOnClick: true, showRoot: true, autoExpand: true,
persist: false, style: "width:400px;height:500px;"
}, treenodeid);
tree.startup();
var foo = new dndSource(tree, {betweenThreshold: 5, singular: true});
foo.checkItemAcceptance = function (target, source, position) {
if (dndSkip)
return false;
var flag = false;//判斷是否能夠拖拽
var tar_type = registry.byNode(target.parentNode).item.type[0];
var src_type = source.tree.selectedItem.type[0];
flag = (tar_type === src_type + '_sp' && position === "over") || (tar_type === src_type && position !== "over");
return flag;
};
// dijit/tree/dndSource.js 源碼中明確說起要求開發者覆蓋此方法。
foo.itemCreator = function (nodes) {
var rst = new Array();
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var id = '' + Math.floor(Math.random() * 1000);
var item = registry.byNode(node).item;
var rst2 = {id: id, name: item.name + "(" + id + ")", type : item.type};
rst.push(rst2);
}
return rst;
};
}
require(["dijit/registry", "dojo/data/ItemFileWriteStore", "dijit/tree/TreeStoreModel", "dijit/tree/dndSource", "dijit/Tree", "dojo/domReady!"],
function (registry, ItemFileWriteStore, TreeStoreModel, dndSource, Tree) {
if (true) {
var rootid = 'root2';
var treedata = {"identifier": "id", label: "name", "items": [
{id: rootid, name: '零件庫', type: 'static', children: [
{id: 'fdj_comp', name: '發動機', type: 'static', children: [
{id: 'fdj1', name: 'A01-發動機', parent: 'fdj_comp', type: 'fdj_comp'}
, {id: 'fdj2', name: 'A02-發動機', parent: 'fdj_comp', type: 'fdj_comp'}
, {id: 'fdj3', name: 'A03-發動機', parent: 'fdj_comp', type: 'fdj_comp'}
]},
{id: 'jss_comp', name: '駕駛室', type: 'static', children: [
{id: 'cm_comp', name: '車門', type: 'static', children: [
{id: 'cm1', name: '左側車門', parent: 'cm_comp', type: 'cm_comp'},
{id: 'cm2', name: '右側車門', parent: 'cm_comp', type: 'cm_comp'}
]},
{id: 'ys_com', name: '內飾顏色', type: 'static', children: [
{id: 'heis', name: '黑色', parent: 'ys_com', type: 'ys_com'},
{id: 'mis', name: '米色', parent: 'ys_com', type: 'ys_com'},
{id: 'hongs', name: '紅色', parent: 'ys_com', type: 'ys_com'}
]}
]}
]}
]};
makeTree(treedata, rootid, 'funtree1', true, registry, ItemFileWriteStore, TreeStoreModel, dndSource, Tree);
}
if (true) {
var rootid = 'root3';
var treedata = {"identifier": "id", label: "name", "items": [
{id: rootid, name: '配置選擇', type: 'static', children: [
{id: 'zfdj', name: '發動機', type: 'fdj_comp_sp', children: []},
{id: 'zcm', name: '車門', type: 'cm_comp_sp', children: []},
{id: 'zys', name: '內飾顏色', type: 'ys_com_sp', children: []}
]}
]};
makeTree(treedata, rootid, 'funtree2', false, registry, ItemFileWriteStore, TreeStoreModel, dndSource, Tree);
}
});
</script>
</head>
<body class="claro">
<table border="1">
<tr>
<td><div id="funtree1"/></td>
<td><div id="funtree2"/></td>
</tr>
</table>
</body>
</html>
重點分析：
1. 使用的dojo組件：
"dijit/registry" //用於獲取組件 , "dojo/_base/array" //用於整理數據 , "dojo/data/ItemFileWriteStore" //用於包裝數據 , "dijit/tree/TreeStoreModel" //用於轉換數據（Tre要求） , "dijit/tree/dndSource" //用於處理拖拽 , "dijit/Tree" //樹控件
2. 構建符合樹控件模型接受的數據結構：
var rootid = 'root3';
var treedata = {"identifier": "id", label: "name", "items": [
{id: rootid, name: '配置選擇', type: 'static', children: [
{id: 'zfdj', name: '發動機', type: 'fdj_comp_sp', children: []},
{id: 'zcm', name: '車門', type: 'cm_comp_sp', children: []},
{id: 'zys', name: '內飾顏色', type: 'ys_com_sp', children: []}
]}
]};
3. 拖動對象的處理：
3.1 註冊：
var foo = new dndSource(
tree, //指向目標樹控件
{betweenThreshold: 5, //支持拖動至目標節點的「前位置」和「後位置」
singular: true}); //制定拖動的是1個目標節點（不含其子節點）
3.2 斷定拖動的有效性：
foo.checkItemAcceptance = function (target, source, position) { //覆蓋函數checkItemAcceptance ，返回true容許放置，返回false不容許放置
if (dndSkip)
return false; //案例使用，左側樹始終不容許放置
var flag = false;//判斷是否能夠拖拽
var tar_type = registry.byNode(target.parentNode).item.type[0]; //案例使用，右側樹容許同類型節點放置
var src_type = source.tree.selectedItem.type[0];
flag = (tar_type === src_type + '_sp' && position === "over") || (tar_type === src_type && position !== "over");
return flag;
};
3.3 建立目標樹節點：
// dijit/tree/dndSource.js 源碼中明確說起要求開發者覆蓋此方法。
foo.itemCreator = function (nodes) {
var rst = new Array();
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var id = '' + Math.floor(Math.random() * 1000);
var item = registry.byNode(node).item;
var rst2 = {id: id, name: item.name + "(" + id + ")", type : item.type};
rst.push(rst2);
}
return rst;
};
這部分很重要卻很難了解到，在dijit/tree/dndSource.js的源碼中明確說起須要開發者進行覆蓋。而官方文檔的介紹內容中並無說起。
備註：
關於Dojo官方給出的樹控件的介紹案例(https://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html#dijit-tree)，其使用的是"dojo/store/Memory"，其數據結構
var myStore = new Memory({
data: [
{ id: 'world', name:'The earth', type:'planet', population: '6 billion'},
{ id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
timezone: '-1 UTC to +4 UTC', parent: 'world'},
……
{ id: 'SA', name:'South America', type:'continent', parent: 'world' }
],
getChildren: function(object){
return this.query({parent: object.id});
}
});
換言之其使用的是一維數組的數據構，加之數據對象中的parent屬性指向父節點，完成樹模型的構建。可是這個方法在功能上有缺陷：
一次性構建樹控件，能夠。
樹控件中節點的拖動，能夠。
樹控件中節點的排序，不能夠，由於其基礎模型是一維數組，沒法實現或者難以實現針對某一樹節點的子節點序列進行排序的處理。