grid

grid

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks
树操作:增加、删除、修改、移动
                    

参考示例增加、删除、修改节点


                       

增加节点          

var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
tree.addNode(newNode, "before", node);
          

删除节点   

var node = tree.getSelectedNode();
tree.removeNode(node);
          

编辑节点    

var node = tree.getSelectedNode();            
tree.beginEdit(node);  
          

移动节点   

tree.moveNode(node, targetNode, "before");
posted on 2012-12-04 15:31 nikofan 阅读(6750) 评论(6)  编辑  收藏

Feedback

# re: jQuery MiniUI 开发教程 树形控件 树操作:增加、删除、修改、移动(六)[未登录] 2012-12-05 13:56 1
Ext.onReady(function() {

Ext.Direct.addProvider(Ext.app.REMOTING_API);

Ext.QuickTips.init();

myTreeLoader = new Ext.tree.TreeLoader( {
applyLoader:false,
paramsAsHash: true,
baseParams : {
id : 'oid',
foo: 'empty'
},
directFn: treeProvider3.getTreeGrid

});

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 600,
height: 500,
id: 'usedByPartsTreeGridID',
//rootVisible:false, //不显示根节点
renderTo: Ext.getBody(),
//enableDD: true,//是否可以移动
//autoScroll: true,//是否有滚动条
loader: myTreeLoader,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 200
},{
header: 'Duration',
width: 200,
dataIndex: 'duration'
},{
header: 'Assigned To',
width: 200,
dataIndex: 'user'
}]

});

myTreeLoader.on("beforeload", function(treeLoader, node) {
alert(node.attributes.Task);
Ext.getCmp('usedByPartsTreeGridID').getLoader().baseParams.id = node.attributes.Task;//node.attributes.task为节点属性task的值
Ext.getCmp('usedByPartsTreeGridID').getLoader().baseParams.foo = count;
Ext.getCmp('usedByPartsTreeGridID').getRootNode().reload();
}, this)

});

@ExtDirectMethod(value = ExtDirectMethodType.TREE_LOAD, group = "tree")
public List<TreeVO> getTreeGrid(
@RequestParam(value = "id") String id,
@RequestParam(value = "foo", defaultValue = "defaultValue") String foo) {

List<TreeVO> secondresult = new ArrayList<TreeVO>();
List<TreeVO> childresult = new ArrayList<TreeVO>();
List<TreeVO> result = new ArrayList<TreeVO>();
for (int i = 1; i <= 5; ++i) {
TreeVO children = new TreeVO();
children.setTask(i + "second level children");
children.setDuration(i + " level children");
children.setLeaf("true");//是否叶子节点,true为是,如果不是叶子节点,则不能设置值
children.setIconCls("task");
children.setUser(i + "second user");
secondresult.add(children);
}

for (int i = 1; i <= 5; ++i) {
TreeVO children = new TreeVO();
children.setTask(i + "first level children");
children.setDuration(i + " level children");
children.setIconCls("task-folder");
children.setUser(i + "first user");
children.setChildren(secondresult);//secondresult List<TreeVO>类型
childresult.add(children);
}
TreeVO rootNode = new TreeVO();
rootNode.setTask("Project: Shopping");
rootNode.setDuration("Project 0 level children");
rootNode.setExpanded("true");
rootNode.setIconCls("task-folder");
rootNode.setUser("Tommy Maintz");
rootNode.setChildren(childresult);
result.add(rootNode);
return result;
}  回复  更多评论
  

# re: jQuery MiniUI 开发教程 树形控件 树操作:增加、删除、修改、移动(六) 2012-12-05 18:21 21
var gridJson = new Ext.form.Hidden({
name:'gridJson',
value:''
})

//然后把gridJson放到FormPanel的items


new Ext.Panel( {
renderTo: Ext.getBody(),
height: 500,
width: 500,
border: false,
frame: false,
layout: 'vbox',
items: [basicInfo,grid ],
bbar : [
'->', // Fill
{
text : 'save',
handler: function() {
var createFormPanel = Ext.getCmp('createFormPanel').getForm();
var name=createFormPanel.findField('name').getValue();//获取值
var jsonvalue = getJsonValues('myEditorGrid');
createFormPanel.findField('gridJson').setValue(jsonvalue);//设置值

basicInfo.getForm().submit( {
params: {
foo: 'bar',
uid: 34
}
});
}
}
]
});

Ext.getCmp('pagingToolbar').changePage(1);


//把grid转换为json字符串
function getJsonValues(editorgrid){
var count = Ext.getCmp(editorgrid).getStore().getCount(); // 获取store的记录行数
var records = Ext.getCmp(editorgrid).getStore().getRange(0, count); // 获得遍历条件
var temp=new Array();
//Ext.getCmp(editorgrid).getStore().each(function(record) {
for ( var i = 0; i < records.length; i++) {
var record = records[i];
temp.push(record.data);
}

var json = Ext.encode(temp);
return json;

}  回复  更多评论
  

# re: jQuery MiniUI 开发教程 树形控件 树操作:增加、删除、修改、移动(六) 2012-12-06 13:38 天津天车维修
我也觉得挺好的呀  回复  更多评论
  

# re: jQuery MiniUI 开发教程 树形控件 树操作:增加、删除、修改、移动(六) 2012-12-06 16:47 11
var partURL = action.result.partURL;
var exception = action.result.exception;
//alert(partURL);
if(!Ext.isEmpty(partURL)){
location.href = partURL;
//window.open(partURL);
}  回复  更多评论
  

# re: jQuery MiniUI 开发教程 树形控件 树操作:增加、删除、修改、移动(六) 2012-12-06 17:39 33
function commpartview_doc_removeLink(partOid, docOid) {
Ext.MessageBox.confirm('提示','是否继续?', callBack);
function callBack(id) {
if ("yes" == id) {
partRelatedDocController.removeLink(partOid, docOid, function(result, e) {
if ("Success" == result) {
location.href = location.href;
} else {
alert("修改失败,请重试!");
}
}, this);
}
}
};

function commpartview_doc_updateConfig(docOid, ibaName) {
Ext.MessageBox.prompt(resources.createPart_jwzprompttitle,
resources.createPart_jwzpromptcontent, callBack, this, true, '');
function callBack(id, userInputConfigValue) {
partRelatedDocController.updateConfig(docOid, ibaName,
userInputConfigValue, function(result, e) {
if ("Success" == result) {
location.href = location.href;
} else {
alert("修改失败,请重试!");
}

}, this);
}
};
  回复  更多评论
  

# re: jQuery MiniUI 开发教程 树形控件 树操作:增加、删除、修改、移动(六) 2012-12-07 11:08 333
/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();

Ext.Direct.addProvider(Ext.app.REMOTING_API);


var storeFields = [{
name: 'id'
}, {
name: 'fullName'
},
{
name: 'state'
} ];


var writer = new Ext.data.JsonWriter( {
writeAllFields: true,
encode: false
});

var firstGridStore = new Ext.data.DirectStore( {
id: 'directStore',
autoDestroy: true,
paramsAsHash: true,
root: 'records',
totalProperty: 'total',
autoLoad: false,
autoSave: true,
successProperty: 'success',
fields: storeFields,
remoteSort: true,
idProperty: 'id',
writer: writer,
baseParams: {
no: 1,
name: 'Ralph'
},
api: {
read: createUsageLinkController.loadWithPaging2
//create: personAction.create,
//update: personAction.update,
// destroy: personAction.destroy
}
});



var columnModel = [ {
header: 'Last Name',
dataIndex: 'id',
sortable: true//,
//editor: textFieldEditor
}, {
header: 'First Name',
dataIndex: 'fullName',
sortable: true //,
// editor: textFieldEditor
}, {
header: 'State',
dataIndex: 'state',
sortable: true//,
// editor: comboEditor
} ];


var pagingToolbar = {
xtype: 'paging',
store: firstGridStore,
pageSize: 50,
displayInfo: true,
id: 'pagingToolbar'
};

var firstGrid =new Ext.grid.GridPanel( {
id : 'firstGrid',
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
enableDragDrop : true,
columns: columnModel,
loadMask: true,
title : 'First Grid',
bbar: pagingToolbar

} );


var secondGridStore = new Ext.data.JsonStore({
fields : storeFields,
root : 'records'
});

// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
id : 'secondGrid',
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : columnModel,
enableDragDrop : true,
//stripeRows : true,
title : 'Second Grid'
});


//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : 'hbox',
renderTo: Ext.getBody(),
defaults : { flex : 1 }, //auto stretch
layoutConfig : { align : 'stretch' },
items : [
firstGrid,secondGrid
]
});
Ext.getCmp('pagingToolbar').changePage(1);

// // used to add records to the destination stores
var blankRecord = Ext.data.Record.create(storeFields);

/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view scroller element
var firstGridDropTargetEl = firstGrid.getView().scroller.dom;
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;

Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);//删除secondGrid移动的数据

return true
}
});


// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = secondGrid.getView().scroller.dom;
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
//Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store); //删除firstGrid移动的数据,firstGrid的数据会刷新
secondGrid.store.add(records);
secondGrid.store.sort('id', 'ASC');

return true
}
});

});
  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: