我正在使用dojo树格，下面是要求。我希望网格的子项是可点击的列。不知何故，我设法让每个单元格的第一个孩子成为可点击的列。但是，如果列中有多个子项，则可以使该列下的第一个或最后一个可单击。我附上了图片供您参考，下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="dojo/dijit/themes/soria/soria.css" />
<link rel="stylesheet" href="dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" href="dojo/dojox/grid/resources/soriaGrid.css" />
<link rel="stylesheet" href="dojo/dojox/grid/resources/Grid.css" />
<style type="text/css">
#grid {
width: 100%;
height: 20em;
}
</style>
</head>
<body clas="claro">
<h1 id="greeting">Hello</h1>
<div id="gridDiv"></div>
<script type="text/javascript" src="dojo/dojo/dojo.js"
data-dojo-config="async:true">
</script>
<script type="text/javascript">
var queues = [ "Cash Room Manager", "Review Check",
"Corporate Advanced Manager", "Tax and Insurance Manager",
"Sold Loan Manager" ];
formattohyperlink = function(value, index, items, node, model,
inRowIndex) {
for (var i = index; i < node.grid.store._arrayOfTopLevelItems.length; i++) {
var len = node.grid.store._arrayOfTopLevelItems[index].children.length;
console.log("i is "+i +len)
for (var j = len; j >= 0; j--) {
console.log("j is now "+j+node.grid.store._arrayOfTopLevelItems[index].children)
console.log(index +node.grid.store._arrayOfTopLevelItems[index].children[j-1].step);
if (value == node.grid.store._arrayOfTopLevelItems[index].children[j-1].step) {
return "<a href='#'>" + value + "</a>";
} else {
return value;
}
}
}
}
require(
[ 'dojo/dom', 'dojo/dom-construct', 'dojox/grid/TreeGrid',
'dijit/tree/ForestStoreModel',
'dojo/data/ItemFileWriteStore' ],
function(dom, domConstruct) {
var data = {
identifier : 'step',
label : 'step',
items : [ {
step : 'Cash Room',
children : [ {
step : 'Cash Room Manager',
count : '1',
inprogress : '21.00',
pending : '4555'
}, ]
}, {
step : 'Manual Review',
children : [ {
step : 'Review Check',
count : '1',
inprogress : '21.00',
pending : '4555'
}, ]
}, {
step : 'Manager Review',
children : [ {
step : 'Corporate Advanced Manager',
count : '1',
inprogress : '21.00',
pending : '4555'
}, {
step : 'Tax and Insurance Manager',
count : '1',
inprogress : '21.00',
pending : '4555'
}, {
step : 'Sold Loan Manager',
count : '1',
inprogress : '21.00',
pending : '4555'
}, ]
} ]
};
var store = new dojo.data.ItemFileWriteStore({
data : data
});
var model = new dijit.tree.ForestStoreModel({
store : store,
childrenAttrs : [ 'children' ]
});
/* set up layout */
var layout = [ {
name : 'Step',
field : 'step',
width : '30%',
formatter : formattohyperlink
}, {
name : 'Count',
field : 'count',
width : '30%'
}, {
name : 'In-Progress',
field : 'inprogress',
width : '20%'
}, {
name : 'Pending',
field : 'pending',
width : '20%'
} ];
/* create a new grid: */
var grid = new dojox.grid.TreeGrid({
id : 'grid',
treeModel : model,
structure : layout,
autoHeight : true,
}, document.createElement('div'));
/* append the new grid to the div */
dojo.byId("gridDiv").appendChild(grid.domNode);
/* Call startup() to render the grid */
grid.startup();
grid.resize();
/* var greetingNode = dom.byId('greeting');
domConstruct.place('<i> Manju!</i>', greetingNode);
var data = {
identifier : 'step',
label : 'step',
items : [ {
name : 'Q1',childern:[
count : '1',
inprogress : '0',
pending : '0',
held : '0',
warning : '0',
deadline : '0',
oldestitem : '2016-09-28']
} ]
};
var store = new dojo.data.ItemFileWriteStore({data:data});
var model = new dijit.tree.ForestStoreModel({store:store,childrenAttrs:['childern']});
var layout = [ {
name : 'Step',
field : 'step',
width : '30%'
}, {
name : 'Count',
field : 'count',
widht : '30%'
}, {
name : 'In-Progress',
field : 'inprogress',
widht : '30%'
}, {
name : 'Pending',
field : 'pending',
widht : '30%'
}, {
name : 'Held',
field : 'held',
widht : '30%'
}, {
name : 'Warning',
field : 'warning',
widht : '30%'
}, {
name : 'Deadline',
field : 'deadline',
widht : '30%'
}, {
name : 'Oldest Item',
field : 'oldestitem',
widht : '30%'
} ];
var grid = new dojox.grid.TreeGrid({
id:'grid',
treemodel:model,
structure:layout
},document.createElement('div'));
dojo.byId('lazyTreeGrid').appendChild(grid.domNode);
grid.startup(); */
});
</script>
</body>
</html>
答案 0 :(得分：0)
最终代码。忽略评论代码
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="dojo/dijit/themes/soria/soria.css" />
<link rel="stylesheet" href="dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" href="dojo/dojox/grid/resources/soriaGrid.css" />
<link rel="stylesheet" href="dojo/dojox/grid/resources/Grid.css" />
<style type="text/css">
#grid {
width: 100%;
height: 20em;
}
</style>
</head>
<body clas="claro">
<h1 id="greeting">Hello</h1>
<div id="gridDiv"></div>
<script type="text/javascript" src="dojo/dojo/dojo.js"
data-dojo-config="async:true">
</script>
<script type="text/javascript">
var queues = [ "Cash Room Manager", "Review Check",
"Corporate Advanced Manager", "Tax and Insurance Manager",
"Sold Loan Manager" ];
formattohyperlink = function(value, index, items, node, model,
inRowIndex) {
//alert(JSON.stringify(value));
//alert(value.length);
//console.log(node.grid.getCell(index) + "+++++++++++++++++");
//console.log(node.grid.store._arrayOfTopLevelItems);
//console.log(node.grid.store._arrayOfAllItems.length);
//console.log(value);
//console.log(node.grid.getItem(index).children.length);
var itemsList;
/* dojo.forEach(items, function() {
itemsList += node.grid.store.getValue("name") + " ";
}); */
//console.log(node.grid.store.fetchItemsArray());
for (var k = 0; k < node.grid.store.length; k++) {
//console.log(JSON.stringify(items[i]));
}
//console.log(items[0]);
var obj = JSON.stringify(items);
//console.log(obj);
var array = new Array();
array.push(obj);
//console.log(array);
//console.log(node.grid.store._getItemsArray()[0].children[0].step);
for (var i = 0; i < node.grid.store._getItemsArray().length; i++) {
//console.log(node.grid.store._getItemsArray()[i].children[i].step);
}
/* alert('yes');
var currentNode;
for (var i = 0; i < node.getChildren().length; i++) {
currentNode = node.getChildren()[i];
alert(currentNode);
//this._expandTree(currentNode);
} */
//console.log(JSON.stringify(node));
//alert(JSON.stringify(node));
//alert(node.grid.store._arrayOfTopLevelItems[1].children[1].step);
//for(var m=0;m<)
for (var m = 0; m < node.grid.getItem(index).children.length; m++) {
if (value == node.grid.getItem(index).children[m].step) {
//console.log(node.grid.getItem(index).children[m].step +"::: "+value)
return "<a href='http://www.google.com'>" + value + "</a>";
}else{
console.log(node.grid.getItem(index).children[m].step +"::: "+value)
}
}
for (var m = 0; m < node.grid.getItem(index).children.length; m++) {
if (value != node.grid.getItem(index).children[m].step) {
//console.log(node.grid.getItem(index).children[m].step +"::: "+value)
//return "<a href='http://www.google.com'>" + value + "</a>";
return value;
}
}
for (var i = index; i < node.grid.store._arrayOfTopLevelItems.length; i++) {
/* console
.log(value
+ node.grid.store._arrayOfTopLevelItems[index].children.length) */
//if (value==node.grid.store._arrayOfAllItems[i].children[i].step) {
//console.log(node.grid.store._arrayOfTopLevelItems[index].children.length)
var len = node.grid.store._arrayOfTopLevelItems[index].children.length;
//console.log("i is "+i +len)
for (var j = len; j >= 0; j--) {
//console.log("j is now "+j+node.grid.store._arrayOfTopLevelItems[index].children)
//console.log(index +node.grid.store._arrayOfTopLevelItems[index].children[j-1].step);
/* if (value == node.grid.store._arrayOfTopLevelItems[index].children[j-1].step) {
return "<a href='#'>" + value + "</a>";
} else {
return value;
} */
}
}
/* for (var m = 0; m < queues.length; m++) {
if (value == queues[m]) {
return "<a href='#'>" + value + "</a>";
} else {
return value;
}
} */
}
require(
[ 'dojo/dom', 'dojo/dom-construct', 'dojox/grid/TreeGrid',
'dijit/tree/ForestStoreModel',
'dojo/data/ItemFileWriteStore' ],
function(dom, domConstruct) {
var data = {
identifier : 'step',
label : 'step',
items : [ {
step : 'Cash Room',
children : [ {
step : 'Cash Room Manager',
count : '1',
inprogress : '21.00',
pending : '4555',
held:'0',
warning:'0',
deadline:'0',
oldestitem:'02/09/2016'
}, ]
}, {
step : 'Manual Review',
children : [ {
step : 'Review Check',
count : '1',
inprogress : '21.00',
pending : '4555',
held:'0',
warning:'0',
deadline:'0',
oldestitem:'02/09/2016'
}, ]
}, {
step : 'Manager Review',
children : [ {
step : 'Corporate Advanced Manager',
count : '1',
inprogress : '21.00',
pending : '4555',
held:'0',
warning:'0',
deadline:'0',
oldestitem:'02/09/2016'
}, {
step : 'Tax and Insurance Manager',
count : '1',
inprogress : '21.00',
pending : '4555',
held:'0',
warning:'0',
deadline:'0',
oldestitem:'02/09/2016'
}, {
step : 'Sold Loan Manager',
count : '1',
inprogress : '21.00',
pending : '4555',
held:'0',
warning:'0',
deadline:'0',
oldestitem:'02/09/2016'
}, ]
} ]
};
var store = new dojo.data.ItemFileWriteStore({
data : data
});
var model = new dijit.tree.ForestStoreModel({
store : store,
childrenAttrs : [ 'children' ]
});
/* set up layout */
var layout = [ {
name : 'Step',
field : 'step',
width : '30%',
formatter : formattohyperlink
}, {
name : 'Count',
field : 'count',
width : '30%'
}, {
name : 'In-Progress',
field : 'inprogress',
width : '20%'
}, {
name : 'Pending',
field : 'pending',
width : '20%'
} ,{
name : 'Held',
field : 'held',
width : '20%'
} ,{
name : 'Warning',
field : 'warning',
width : '20%'
} ,{
name : 'Deadline',
field : 'deadline',
width : '20%'
} ,{
name : 'Oldest Item',
field : 'oldestitem',
width : '20%'
} ];
/* create a new grid: */
var grid = new dojox.grid.TreeGrid({
id : 'grid',
treeModel : model,
structure : layout,
autoHeight : true,
}, document.createElement('div'));
/* append the new grid to the div */
dojo.byId("gridDiv").appendChild(grid.domNode);
grid.onRowClick = function() {
console
.log("Rwo is _________________________________________________________________________");
};
/* Call startup() to render the grid */
grid.startup();
grid.resize();
/* var greetingNode = dom.byId('greeting');
domConstruct.place('<i> Manju!</i>', greetingNode);
var data = {
identifier : 'step',
label : 'step',
items : [ {
name : 'Q1',childern:[
count : '1',
inprogress : '0',
pending : '0',
held : '0',
warning : '0',
deadline : '0',
oldestitem : '2016-09-28']
} ]
};
var store = new dojo.data.ItemFileWriteStore({data:data});
var model = new dijit.tree.ForestStoreModel({store:store,childrenAttrs:['childern']});
var layout = [ {
name : 'Step',
field : 'step',
width : '30%'
}, {
name : 'Count',
field : 'count',
widht : '30%'
}, {
name : 'In-Progress',
field : 'inprogress',
widht : '30%'
}, {
name : 'Pending',
field : 'pending',
widht : '30%'
}, {
name : 'Held',
field : 'held',
widht : '30%'
}, {
name : 'Warning',
field : 'warning',
widht : '30%'
}, {
name : 'Deadline',
field : 'deadline',
widht : '30%'
}, {
name : 'Oldest Item',
field : 'oldestitem',
widht : '30%'
} ];
var grid = new dojox.grid.TreeGrid({
id:'grid',
treemodel:model,
structure:layout
},document.createElement('div'));
dojo.byId('lazyTreeGrid').appendChild(grid.domNode);
grid.startup(); */
});
</script>
</body>
</html>