grid

:: 管理

78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks

jQuery MiniUI 開發教程樹形控件樹操作：增加、刪除、修改、移動（六）

樹操作：增加、刪除、修改、移動

增加節點

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 閱讀(6780) 評論(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
}
});

});
回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

grid

常用鏈接

留言簿(29)

我參與的團隊

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜

增加節點

刪除節點

編輯節點

移動節點

Feedback