Updated
This commit is contained in:
Éric Lemoine
294
master/examples/test_enhanced_grid_dnd.html
Normal file
294
master/examples/test_enhanced_grid_dnd.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<title>Test Dnd plugin of dojox.grid.EnhancedGrid</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
|
||||
<link rel=stylesheet href="support/common.css"/>
|
||||
<style type="text/css">
|
||||
@import "/dojo/tests/dnd/dndDefault.css";
|
||||
body {
|
||||
font-size: 0.9em;
|
||||
font-family: Geneva, Arial, Helvetica, sans-serif;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.title {
|
||||
text-align:center;
|
||||
margin:1em;
|
||||
}
|
||||
.container {
|
||||
display: block;
|
||||
border: 3px solid #ccc;
|
||||
padding: 1em 3em;
|
||||
cursor: default;
|
||||
radius: 8pt;
|
||||
background: #fff;
|
||||
-moz-border-radius: 8pt 8pt;
|
||||
}
|
||||
.myblock{
|
||||
float: left;
|
||||
margin: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.cfgtable th,
|
||||
.cfgtable td{
|
||||
font-weight: bolder;
|
||||
padding: 5px;
|
||||
}
|
||||
h3{
|
||||
margin: 0;
|
||||
}
|
||||
#grid1, #grid2{
|
||||
margin-bottom: 0px;
|
||||
width: 50em;
|
||||
height: 30em;
|
||||
}
|
||||
/*Sample - overwrite default cell style
|
||||
.claro .dojoxGridCell{
|
||||
border-color: transparent #D5CDB5 #D5CDB5 transparent !important;
|
||||
}
|
||||
.dj_ie6 .claro .dojoxGridCell{
|
||||
border: 1px solid #F1F1F1 !important;
|
||||
}*/
|
||||
</style>
|
||||
<script type="text/javascript" src="../../../../dojo/dojo.js"
|
||||
djConfig="isDebug:true, parseOnLoad: true"></script>
|
||||
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
|
||||
<script type="text/javascript">
|
||||
dojo.require("dojo.parser");
|
||||
dojo.require("dojo.data.ItemFileWriteStore");
|
||||
dojo.require("dojox.data.AtomReadStore");
|
||||
dojo.require("dojox.data.XmlStore");
|
||||
dojo.require("dojox.grid.EnhancedGrid");
|
||||
dojo.require("dojox.grid.enhanced.plugins.Selector");
|
||||
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
|
||||
dojo.require("dojox.grid.enhanced.plugins.DnD");
|
||||
dojo.require("dojox.grid.enhanced.plugins.GridSource");
|
||||
dojo.require("dojo.dnd.Source");
|
||||
dojo.require("dijit.form.CheckBox");
|
||||
</script>
|
||||
<script type="text/javascript" src="support/test_write_store_dnd.js"></script>
|
||||
<script type="text/javascript" src="support/test_write_store_music.js"></script>
|
||||
<script type="text/javascript">
|
||||
var layout1 = [{
|
||||
defaultCell: {width: 5},
|
||||
rows: [
|
||||
{field: "A"},
|
||||
{field: "B"},
|
||||
{field: "C"},
|
||||
{field: "D"},
|
||||
{field: "E"},
|
||||
{field: "F"},
|
||||
{field: "G", hidden: true},
|
||||
{field: "H", hidden: true},
|
||||
{field: "I", hidden: true},
|
||||
{field: "J"},
|
||||
{field: "K"},
|
||||
{field: "L"},
|
||||
{field: "M"},
|
||||
{field: "N"},
|
||||
{field: "O"},
|
||||
{field: "P"},
|
||||
{field: "Q"},
|
||||
{field: "R"},
|
||||
{field: "S"},
|
||||
{field: "T"},
|
||||
{field: "U"},
|
||||
{field: "V"},
|
||||
{field: "W"},
|
||||
{field: "X"},
|
||||
{field: "Y"},
|
||||
{field: "Z"}
|
||||
]
|
||||
}];
|
||||
var layout2 = [
|
||||
{//first view
|
||||
rows:
|
||||
[
|
||||
{ field: "Genre", width: '6'},
|
||||
{ field: "Artist", width: '5'},
|
||||
{ field: "Year", width: '6'},
|
||||
{ field: "Album", width: '12'},
|
||||
{ field: "Name", width: '17', hidden: true},
|
||||
{ field: "Length", width: '6'},
|
||||
{ field: "Track", width: '6'},
|
||||
{ field: "Composer", width: '15'},
|
||||
{ field: "Download Date", width: '10'},
|
||||
{ field: "Last Played", width: '10'}
|
||||
]
|
||||
}
|
||||
];
|
||||
var store_copy = new dojo.data.ItemFileWriteStore({
|
||||
data: test_store_data[0]
|
||||
});
|
||||
var setIdentifierForNewItem = function(item, store, index){
|
||||
console.log("setIdentifierForNewItem", index);
|
||||
var attrs = store.getIdentityAttributes(item);
|
||||
for(var i = attrs.length - 1; i >= 0; --i){
|
||||
item[attrs[i]] = index + (new Date()).getTime();
|
||||
}
|
||||
return item;
|
||||
};
|
||||
var setDnDConfig = function(gridId, type, mode, selected){
|
||||
var config = {};
|
||||
config[type] = {};
|
||||
config[type][mode] = selected;
|
||||
dijit.byId(gridId).setupDnDConfig(config);
|
||||
};
|
||||
var setCopyOnly = function(gridId, selected){
|
||||
dijit.byId(gridId).dndCopyOnly(selected);
|
||||
};
|
||||
var getRowData = function(grid, rowIndexes){
|
||||
var cells = grid.layout.cells;
|
||||
var store = grid.store;
|
||||
var cache = grid._by_idx;
|
||||
var res = "Grid Rows from " + grid.id + ":<br/>";
|
||||
for(var i = 0; i < rowIndexes.length; ++i){
|
||||
var r = rowIndexes[i];
|
||||
res += "Row " + r + ": ";
|
||||
for(var j = 0; j < cells.length; ++j){
|
||||
if(!cells[j].hidden){
|
||||
res += store.getValue(cache[r].item, cells[j].field) + ", ";
|
||||
}
|
||||
}
|
||||
res = res.substring(0, res.length - 2) + ";<br/>";
|
||||
}
|
||||
return res;
|
||||
};
|
||||
dojo.addOnLoad(function(){
|
||||
dojo.query("input.cfgbox").forEach(function(cb){
|
||||
cb.checked = true;
|
||||
});
|
||||
dojo.query("input.copyonlyCBox").forEach(function(cb){
|
||||
cb.checked = false;
|
||||
});
|
||||
});
|
||||
var newItem1 = {A: "new a1", B: "new b1", C: "new c1", D: "new d1",E: "new e1",F: "new f1",G: "new g1",H: "new h1",I: "new i1",J: "new j1",K: "new k1",L: "new l1",M: "new m1",N: "new n1",O: "new o1",P: "new c1",Q: "new q1",R: "new r1",S: "new s1",T: "new t1",U: "new u1",V: "new v1",W: "new w1",X: "new x1",Y: "new y1",Z: "new z1"};
|
||||
var newItem2 = {A: "new a2", B: "new b2", C: "new c2", D: "new d2",E: "new e2",F: "new f2",G: "new g2",H: "new h2",I: "new i2",J: "new j2",K: "new k2",L: "new l2",M: "new m2",N: "new n2",O: "new o2",P: "new c2",Q: "new q2",R: "new r2",S: "new s2",T: "new t2",U: "new u2",V: "new v2",W: "new w2",X: "new x2",Y: "new y2",Z: "new z2"};
|
||||
var newItem3 = {A: "new a3", B: "new b3", C: "new c3", D: "new d3",E: "new e3",F: "new f3",G: "new g3",H: "new h3",I: "new i3",J: "new j3",K: "new k3",L: "new l3",M: "new m3",N: "new n3",O: "new o3",P: "new c3",Q: "new q3",R: "new r3",S: "new s3",T: "new t3",U: "new u3",V: "new v3",W: "new w3",X: "new x3",Y: "new y3",Z: "new z3"};
|
||||
</script>
|
||||
</head>
|
||||
<body class="claro">
|
||||
<h1 class="title">dojox.grid.EnhancedGrid - DnD</h1>
|
||||
<div class="myblock">
|
||||
<h3>Grid 1</h3>
|
||||
<div id="grid1" dojoType="dojox.grid.EnhancedGrid" rowsPerPage="16"
|
||||
canSort="false",
|
||||
plugins='{
|
||||
dnd: {
|
||||
"setIdentifierForNewItem": setIdentifierForNewItem, copyOnly: true,
|
||||
"dndConfig": {
|
||||
}
|
||||
}
|
||||
}' store="test_store[0]" structure="layout1" rowSelector="20px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="myblock">
|
||||
<h3>Grid 2</h3>
|
||||
<div id="grid2" dojoType="dojox.grid.EnhancedGrid" rowsPerPage="16"
|
||||
canSort="false",
|
||||
plugins='{
|
||||
dnd: {
|
||||
"setIdentifierForNewItem": setIdentifierForNewItem,
|
||||
"dndConfig": {
|
||||
}
|
||||
}
|
||||
}' store="store_copy" structure="layout1" rowSelector="20px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="myblock">
|
||||
<h3>Grid 1 Configuration</h3>
|
||||
<label style="font-weight: bolder;">Copy Only</label><input class="copyonlyCBox" type="checkbox" onchange="setCopyOnly('grid1', this.checked)" />
|
||||
<table class="cfgtable" border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Drag</th>
|
||||
<th>Within</th>
|
||||
<th>In</th>
|
||||
<th>Out</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Rows</td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'within', this.checked)"/></td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'in', this.checked)"/></td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'row', 'out', this.checked)"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Columns</td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'col', 'within', this.checked)"/></td>
|
||||
<td>Not implemented</td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'col', 'out', this.checked)"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cells</td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'within', this.checked)"/></td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'in', this.checked)"/></td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid1', 'cell', 'out', this.checked)"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="myblock">
|
||||
<h3>Grid 2 Configuration</h3>
|
||||
<label style="font-weight: bolder;">Copy Only</label><input class="copyonlyCBox" type="checkbox" onchange="setCopyOnly('grid2', this.checked)" />
|
||||
<table class="cfgtable" border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Drag</th>
|
||||
<th>Within</th>
|
||||
<th>In</th>
|
||||
<th>Out</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Rows</td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'within', this.checked)"/></td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'in', this.checked)"/></td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'row', 'out', this.checked)"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Columns</td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'col', 'within', this.checked)"/></td>
|
||||
<td>Not implemented</td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'col', 'out', this.checked)"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cells</td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'within', this.checked)"/></td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'in', this.checked)"/></td>
|
||||
<td><input type="checkbox" class="cfgbox" onchange="setDnDConfig('grid2', 'cell', 'out', this.checked)"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="myblock" style="clear: left;">
|
||||
<h3>Ordinary Target (Can not accept grid contents)</h3>
|
||||
<div dojoType="dojo.dnd.Source" class="container">
|
||||
<div class="dojoDndItem">Item <strong>X</strong></div>
|
||||
<div class="dojoDndItem">Item <strong>Y</strong></div>
|
||||
<div class="dojoDndItem">Item <strong>Z</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myblock">
|
||||
<h3>Target that can accept Grid</h3>
|
||||
<div dojoType="dojox.grid.enhanced.plugins.GridSource" class="container"
|
||||
insertNodesForGrid="true" getRowContent="getRowData">
|
||||
<div class="dojoDndItem">Item 1</div>
|
||||
<div class="dojoDndItem">Item 2</div>
|
||||
<div class="dojoDndItem">Item 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myblock">
|
||||
<h3>Grid Acceptable Source (Drag item to grid)</h3>
|
||||
<div dojoType="dojo.dnd.Source" class="container">
|
||||
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem1">Item 1</div>
|
||||
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem2">Item 2</div>
|
||||
<div class="dojoDndItem" dndType="grid/rows" dndData="newItem3">Item 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="clear: left;"><strong>Note:</strong> To see the tundra theme, just append <b style="color:blue;">?theme=tundra</b> to the URL.</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user