<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="treegrid-dnd.js"></script>
</head>
<body>
<h2>Project Estimation</h2>
<p>Show projects as treegrid.</p>
<div>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="edit()">Edit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">Cancel</a>
</div>
<div style="margin:20px 0;"></div>
<table id ="tg" class="easyui-treegrid" style="width:700px;height:250px"
data-options="
animate: true,
collapsible: true,
fitColumns: true,
url: 'project_data.json',
method: 'get',
rownumbers: false,
idField: 'id',
treeField: 'name',
onContextMenu: onContextMenu,
onDblClickCell: onDblClickCell,
onLoadSuccess: onLoadSuccess,
onDragEnter: onDragEnter,
onBeforeDrop: onBeforeDrop
">
<thead >
<tr>
<th data-options="field:'name',width:'180',editor:'text'">Name</th>
<th data-options="field:'categoryid',
formatter: function(value,row){
return row.categoryname;
},
width:'180',
editor:{
type:'combobox',
options:{
valueField:'categoryid',
textField:'categoryname',
method:'get',
url:'category.json',
required:true,
onSelect: onSelect
}
}">Category
</th>
<th data-options="field:'department',width:'180',editor:'text'">Department</th>
<th data-options="field:'referenceSize',width:'180',editor:'text'">Reference Size</th>
</tr>
</thead>
</table>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
<div onclick="removeIt()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
<script type="text/javascript">
var maxLeafLevel = 3;
$.extend($.fn.treegrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).treegrid('options');
var fields = $(this).treegrid('getColumnFields',true).concat($(this).treegrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).treegrid('getColumnOption', fields
);
col.editor1 = col.editor;
if (fields != param.field){
col.editor = null;
}
}
$(this).treegrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).treegrid('getColumnOption', fields);
col.editor = col.editor1;
}
});
}
});
function onContextMenu(e, row){
e.preventDefault();
$(this).treegrid('select', row.id);
$('#mm').menu('show',{
left: e.pageX,
top: e.pageY
});
}
function append(){
var tree = $('#tg');
var node = tree.treegrid('getSelected');
var currentLevel = getLevel(node);
if(currentLevel < maxLeafLevel){
var children = tree.treegrid('getChildren', node.id);
var childrenNo = children.length;
childrenNo++;
tree.treegrid('append',{
parent: node.id,
data: [{
id: node.id*10 + childrenNo,
name: 'New Task' + node.id + '.' + childrenNo
}]
})
}
}
function removeIt(){
var node = $('#tg').treegrid('getSelected');
if(node){
$('#tg').treegrid('remove', node.id);
}
}
var editingId;
function edit(){
if(editingId != undefined){
$('#tg').treegrid('select', editingId);
return;
}
var row = $('#tg').treegrid('getSelected');
var currentLevel = getLevel(row);
if(row){
if(currentLevel == maxLeafLevel){
editingId = row.id;
$('#tg').treegrid('beginEdit', editingId);
enableEdit(editingId);
}
else{
onDblClickCell('name',row);
}
}
}
function save(){
if(editingId != undefined){
$('#tg').treegrid('endEdit', editingId);
editingId = undefined;
}
}
function cancel(){
if(editingId != undefined){
$('#tg').treegrid('cancelEdit', editingId);
editingId = undefined;
}
}
function endEditing(){
if (editingId == undefined){return true}
if ($('#tg').treegrid('validateRow', editingId)){
$('#tg').treegrid('endEdit', editingId);
editingId = undefined;
return true;
} else {
return false;
}
}
function onDblClickCell(field, row){
if (endEditing()){
var currentLevel = getLevel(row);
if(currentLevel == maxLeafLevel || field == 'name'){
$('#tg').treegrid('select', row.id)
.treegrid('editCell', {index:row.id,field:field});
editingId = row.id;
enableEdit(editingId);
$('#tg').treegrid('getPanel').bind('keyup',function(e){
console.log(e.keyCode);
if(e.keyCode == 27){
cancel();
}
});
}
}
}
function enableEdit(id){
if(id){
var t = $('#tg');
var eds = t.treegrid('getEditors',id);
for(var i=0;i<eds.length;i++){
$(eds.target).bind('mousedown',function(e){
e.stopPropagation();
});
}
}
}
function getLevel(row){
var currentLevel = $('#tg').treegrid('getLevel', row.id);
return currentLevel;
}
function onLoadSuccess(row, param){
$(this).treegrid('enableDnd', row?row.id:null);
var roots = $('#tg').treegrid('getRoots');
for (var j = 0; j < roots.length; j++) {
roots[j].iconCls = getIconNameForLevel(roots[j]);
$('#tg').treegrid('refresh', roots[j].id);
var children = $('#tg').treegrid('getChildren', roots[j].id);
for (var i = 0; i < children.length; i++) {
children.iconCls = getIconNameForLevel(children);
$('#tg').treegrid('refresh', children.id);
};
};
}
function getIconNameForLevel(node){
var iconName;
currentLevel = getLevel(node);
switch(currentLevel){
case 1:
iconName = 'icon-add';
break;
case 2:
iconName = 'icon-edit';
break;
case 3:
iconName = 'icon-remove';
break;
default:
iconName = 'icon-blank';
break;
}
return iconName;
}
function onSelect(param){
var row = $('#tg').treegrid('getSelected');
row.categoryid = param.categoryid;
row.categoryname = param.categoryname;
}
function onBeforeDrop(targetRow,sourceRow,point){
var tl = getLevel(targetRow);
var sl = getLevel(sourceRow);
if(tl == sl && point != 'append')
{
return true;
}
if(tl == sl-1 && point == 'append')
{
return true;
}
return false;
}
function onDragEnter(targetRow,sourceRow){
var tl = getLevel(targetRow);
var sl = getLevel(sourceRow);
if(tl == sl || tl == (sl-1))
{
return true;
}
return false;
}
</script>
</body>
</html>
Poll
