검색결과 리스트
JavaScript/dynaTree에 해당되는 글 4건
- 2012.02.21 [dynatree] TREE TO TREE DRAG AND DROP 예제
- 2012.02.09 [dynatree] dynatree node option
- 2012.02.09 [dynatree] Option 옵션
- 2012.02.08 [dynatree] dynatree (jQuery 기반의 tree-plugin)
글
var MyApp = MyApp || {};
MyApp.local = (function($) {
////////////////////////////////////////////////////////////////////////////////////////////////////
// start initialize
var global = this
,selectBaseUrl = ""
,selectDivisionUrl = ""
,insertDivisionUrl = ""
,doDivsnSearch = function() {
var srch_site_nm = $("#srch_site_nm").val() || "";
if ( srch_site_nm != "" ) {
$("#divsnTree").dynatree("option","initAjax", {
url : selectDivisionUrl,
dataType : 'json',
data : {
mnu_id : "ROOT",
site_id : srch_site_nm,
mode : "all"
}
});
$("#divsnTree").dynatree("getTree").reload();
}
}
;
// end initialize
;$(document).ready(function() {
// 베이스 트리 생성
$("#baseTree").dynatree({
title : "",
minExpandLevel : 1,
initAjax : {
url : selectBaseUrl,
dataType :'json',
data : {
}
},
autoFocus : true,
onActivate : function(node) {
},
onDeactivate : function(node) {
},
onLazyRead: function(node) {
},
dnd : {
onDragStart: function(node) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
logMsg("tree.onDragStart(%o)", node);
if ( node.data.isFolder ) {
return true;
}
return true;
},
onDragStop : function(node) {
logMsg("tree.onDragStop(%o)", node);
}
}//dnd: {
});//$("#baseTree").dynatree({
// 부분별 과정 트리 생성
$("#divsnTree").dynatree({
title : "",
minExpandLevel : 1,
autoFocus : true,
initAjax : {
url : selectDivisionUrl,
dataType :'json',
data : {
mnu_id : "ROOT",
site_id: $("#srch_site_nm").val(),
mode : "all"
}
},
onPostInit : function(isReloading, isError) {
var initNode = this.getNodeByKey('TEMP');
if (initNode) {
var tempMsg = 'tempMsg';
initNode.setTitle(tempMsg);
}
else {
// 데이터가 있다면 펼쳐준다.
$("#btn_divsnTreeExpandAll").click();
}
logMsg("onPostInit(%o, %o)", isReloading, isError);
this.reactivate();
},
onActivate : function(node) {
$("#site_mnunm").val(node.data.title);
$("#delete_divsn_key").val(node.data.key);
},
onDeactivate : function(node) {
},
onLazyRead : function(node){
node.appendAjax({
url : selectDivisionUrl,
dataType : "json",
data : {
mnu_id : node.data.key,
site_id: $("#srch_site_nm").val(),
mode : "all"
},
cache : false
});
},
dnd : {
autoExpandMS : 1000,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragStart: function(node) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
logMsg("tree.onDragStart(%o)", node);
if ( node.data.isFolder ) {
return true;
}
return true;
},
onDragStop : function(node) {
logMsg("tree.onDragStop(%o)", node);
},
onDragEnter : function(node, sourceNode) {
/** sourceNode may be null for non-dynatree droppables.
* Return false to disallow dropping on node. In this case
* onDragOver and onDragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Any other return value will calc the hitMode from the cursor position.
*/
logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
if ( node.data.isFolder ) {
return true;
}
return true;
},
onDragOver : function(node, sourceNode, hitMode) {
/** Return false to disallow dropping this node.
*
*/
// if(node.data.isFolder){
// var dd = $.ui.ddmanager.current;
// dd.cancel();
// alert("folder");
// }
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
},
onDrop : function(node, sourceNode, hitMode, ui, draggable) {
/**This function MUST be defined to enable dropping of items on the tree.
* sourceNode may be null, if it is a non-Dynatree droppable.
*/
logMsg("tree.onDrop(%o, %o)", node, sourceNode);
var copynode = null
,isSelf = false
;
if (sourceNode) {
isSelf = (node.tree==sourceNode.tree);
// 키 중복 확인
try {
if ( isSelf == false ) {
node.tree.getRoot().visit(function(node){
if ( node.data.key == sourceNode.data.key ) {
throw {message : "항목이 중복됩니다."};
}
});
}
}
catch(e) {
alert(e.message);
return;
}
finally {}
var temp_node = node.tree.getNodeByKey("TEMP");
var copy_node = node;
var myParent = null;
var isTemp = false;
// 처음 생성시일때만 체크 : 처음생성시에는 TEMP 노드 밑에 들어가 있어야 한다.
if ( temp_node != null ) {
if ( hitMode == "over") {
if ( node.data.key == "TEMP" ) {
isTemp = true;
}
}
while ( (myParent = copy_node.getParent()) != null ) {
if ( myParent.data.key == "TEMP" ) {
isTemp = true;
}
copy_node = myParent;
}
if (temp_node != null && isTemp == false) {
var tempMsg = 'tempMsg';
alert(tempMsg);
return;
}
}
// 다른 트리에서 Drag N Drop을 할때 : 복사하고 넣어준다.
if ( isSelf == false ) {
copynode = sourceNode.toDict(true, function(dict) {
dict.title = "[*] " + dict.title;
// 2012.02.09 GDJ : 위 로직에서 키 중복체크를 하기 때문에 그데로 사용해도 문제 없다.
//delete dict.key; // Remove key, so a new one will be created
});
if (hitMode == "over") {
// Append as child node
node.addChild(copynode);
// expand the drop target
node.expand(true);
// 폴더로 변경해주고 다시 그려준다.
node.data.isFolder = true;
node.tree.redraw();
}
else if (hitMode == "before") {
// Add before this, i.e. as child of current parent
node.parent.addChild(copynode, node);
}
else if (hitMode == "after") {
// Add after this, i.e. as child of current parent
node.parent.addChild(copynode, node.getNextSibling());
}
}
// 자기 트리에서는 이동시킨다.
else {
(function() {
// 부모가 수정되었다고 알려준다.
var parent = sourceNode.getParent();
if ( parent != null && parent.data.key != "ROOT" ) {
var title = parent.data.title;
if ( title != null ) {
title = "[*] " + title.replace(/^(\[\*\]\s)?(.+)$/mi, "$2");
parent.data.title = title;
}
}
})();
sourceNode.move(node, hitMode);
if ( hitMode == "over") {
node.expand(true);
(function() {
// 부모가 수정되었다고 알려준다.
var parent = node;
if ( parent != null && parent.data.key != "ROOT" ) {
var title = parent.data.title;
if ( title != null ) {
title = "[*] " + title.replace(/^(\[\*\]\s)?(.+)$/mi, "$2");
parent.data.title = title;
}
}
})();
}
node.tree.getRoot().visit(function(callback_node){
var myNode = callback_node;
myNode.data.isFolder = (myNode.getChildren()==null ? false:true);
});
node.tree.redraw();
return;
}
}
else {
copynode = {title: "This node was dropped here (" + ui.helper + ")."};
alert(copynode.title);
}
},//onDrop : function(node, sourceNode, hitMode, ui, draggable) {
onDragLeave : function(node, sourceNode) {
/** Always called if onDragEnter was called.
*/
logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
}
}//dnd: {
});//$("#divsnTree").dynatree({
// 부분별 셀렉트 박스
$("#srch_site_nm").change(function() {
doDivsnSearch();
});
// 검색
$("#btn_search").click(function() {
doDivsnSearch();
});
// 베이스 트리 모두 펼치기
$("#btn_baseTreeExpandAll").click(function() {
$("#baseTree").dynatree("getRoot").visit(function(node){
node.expand(true);
});
});
// 베이스 트리 모두 접기
$("#btn_baseTreeCollapseAll").click(function() {
$("#baseTree").dynatree("getRoot").visit(function(node){
node.expand(false);
});
});
// 부분별 과정 트리 모두 펼치기
$("#btn_divsnTreeExpandAll").click(function() {
$("#divsnTree").dynatree("getRoot").visit(function(node){
node.expand(true);
});
});
// 부분별 과정 트리 모두 접기
$("#btn_divsnTreeCollapseAll").click(function() {
$("#divsnTree").dynatree("getRoot").visit(function(node){
node.expand(false);
});
});
// 부분별 과정 저장
$("#btn_divsnSave").click(function() {
var $tree = $("#divsnTree")
,data = []
;
var srch_site_nm = $("#srch_site_nm").val();
if ( srch_site_nm == "" ) {
alert("부분을 선택하세요.");
return;
}
$tree.dynatree("getRoot").visit(function(node) {
var item = {}
,myParent = node.getParent()
,title = node.data.title || ""
,key = node.data.key || ""
;
item.subjclass = key;
// 신규 저장일때의 [*] 을 제거한다.
item.classnm = title.replace(/^(\[\*\] )?(.+)$/gmi, "$2");
if ( myParent == null ) {
item.upsubjclass = "";
item.orders = 1;
}
else {
if ( myParent.data.key == "TEMP" || myParent.data.key == "_1") {
item.upsubjclass = "ROOT";
}
else {
item.upsubjclass = myParent.data.key;
}
var order = 1;
var preNode = node;
while ( (preNode=preNode.getPrevSibling()) != null ) {
order++;
}
item.orders = order;
}
item.site_id = srch_site_nm;
if ( item.subjclass.toUpperCase() != "TEMP" ) {
data.push(item);
}
});
// Root 데이터를 맨앞에 넣어준다.
var rootData = [];
rootData.push({
site_id : srch_site_nm
,classnm : "ROOT"
,subjclass : "ROOT"
,upsubjclass : ""
,orders : 1
});
data = rootData.concat(data);
// 통신
$.ajax({
url : insertDivisionUrl,
type : 'POST',
dataType : 'json',
contentType : 'application/json; charset=utf-8',
data : JSON.stringify({
site_id : srch_site_nm,
data : data
}),
success : function(result) {
alert(result.message);
if ( result.success == true ) {
doDivsnSearch();
}
},
error : function(result) {
}
});//$.ajax({
});
// 부분별 과정 삭제
$("#btn_divsnDelete").click(function() {
var k = $("#delete_divsn_key").val()
,$tree = $("#divsnTree").dynatree("getTree")
,node = $tree.getNodeByKey(k)
;
// TEMP노드는 삭제하지 않는다.
if ( k == "TEMP" ) {
return;
}
if ( node != null ) {
var parent = node.getParent();
if ( parent != null && parent.data.key != "ROOT" ) {
var title = parent.data.title;
if ( title != null ) {
title = "[*] " + title.replace(/^(\[\*\]\s)?(.+)$/mi, "$2");
parent.data.title = title;
}
}
node.remove();
$("#site_mnunm").val("");
$tree.redraw();
}
else {
alert("null");
}
});
// test
(function() {
})();
});//$(document).ready(function() {
// 외부에 오픈할 인터페이스
return {
};
////////////////////////////////////////////////////////////////////////////////////////////////////
})(jQuery);
'JavaScript > dynaTree' 카테고리의 다른 글
| [dynatree] dynatree node option (0) | 2012.02.09 |
|---|---|
| [dynatree] Option 옵션 (0) | 2012.02.09 |
| [dynatree] dynatree (jQuery 기반의 tree-plugin) (0) | 2012.02.08 |
트랙백
댓글
글
children: [
{
title: null, // (required) Displayed name of the node (html is allowed here)
key: null, // May be used with activate(), select(), find(), ...
isFolder: false, // Use a folder icon. Also the node is expandable but not selectable.
isLazy: false, // Call onLazyRead(), when the node is expanded for the first time to allow for delayed creation of children.
tooltip: null, // Show this popup text.
href: null, // Added to the generated < a > tag.
icon: null, // Use a custom image (filename relative to tree.options.imagePath). 'null' for default icon, 'false' for no icon.
addClass: null, // Class name added to the node's span tag.
noLink: false, // Use < span > instead of < a > tag for this node
activate: false, // Initial active status.
focus: false, // Initial focused status.
expand: false, // Initial expanded status.
select: false, // Initial selected status.
hideCheckbox: false, // Suppress checkbox display for this node.
unselectable: false, // Prevent selection.
// The following attributes are only valid if passed to some functions:
children: null // Array of child nodes.
// NOTE: we can also add custom attributes here.
// This may then also be used in the onActivate(), onSelect() or onLazyTree() callbacks.
},
[…]
]
'JavaScript > dynaTree' 카테고리의 다른 글
| [dynatree] TREE TO TREE DRAG AND DROP 예제 (0) | 2012.02.21 |
|---|---|
| [dynatree] Option 옵션 (0) | 2012.02.09 |
| [dynatree] dynatree (jQuery 기반의 tree-plugin) (0) | 2012.02.08 |
트랙백
댓글
글
$("#tree").dynatree({
title: "Dynatree", // Tree's name (only used for debug outpu)
minExpandLevel: 1, // 1: root node is not collapsible
imagePath: null, // Path to a folder containing icons. Defaults to 'skin/' subdirectory.
children: null, // Init tree structure from this object array.
initId: null, // Init tree structure from a < ul > element with this ID.
initAjax: null, // Ajax options used to initialize the tree strucuture.
autoFocus: true, // Set focus to first child, when expanding or lazy-loading.
keyboard: true, // Support keyboard navigation.
persist: false, // Persist expand-status to a cookie
autoCollapse: false, // Automatically collapse all siblings, when a node is expanded.
clickFolderMode: 3, // 1:activate, 2:expand, 3:activate and expand
activeVisible: true, // Make sure, active nodes are visible (expanded).
checkbox: false, // Show checkboxes.
selectMode: 2, // 1:single, 2:multi, 3:multi-hier
fx: null, // Animations, e.g. null or { height: "toggle", duration: 200 }
noLink: false, // Use < span > instead of < a > tags for all nodes
// Low level event handlers: onEvent(dtnode, event): return false, to stop default processing
onClick: null, // null: generate focus, expand, activate, select events.
onDblClick: null, // (No default actions.)
onKeydown: null, // null: generate keyboard navigation (focus, expand, activate).
onKeypress: null, // (No default actions.)
onFocus: null, // null: set focus to node.
onBlur: null, // null: remove focus from node.
// Pre-event handlers onQueryEvent(flag, dtnode): return false, to stop processing
onQueryActivate: null, // Callback(flag, dtnode) before a node is (de)activated.
onQuerySelect: null, // Callback(flag, dtnode) before a node is (de)selected.
onQueryExpand: null, // Callback(flag, dtnode) before a node is expanded/collpsed.
// High level event handlers
onPostInit: null, // Callback(isReloading, isError) when tree was (re)loaded.
onActivate: null, // Callback(dtnode) when a node is activated.
onDeactivate: null, // Callback(dtnode) when a node is deactivated.
onSelect: null, // Callback(flag, dtnode) when a node is (de)selected.
onExpand: null, // Callback(flag, dtnode) when a node is expanded/collapsed.
onLazyRead: null, // Callback(dtnode) when a lazy node is expanded for the first time.
onCustomRender: null, // Callback(dtnode) before a node is rendered. Return a HTML string to override.
onCreate: null, // Callback(dtnode, nodeSpan) after a node was rendered for the first time.
onRender: null, // Callback(dtnode, nodeSpan) after a node was rendered.
// Drag'n'drop support
dnd: {
// Make tree nodes draggable:
onDragStart: null, // Callback(sourceNode), return true, to enable dnd
onDragStop: null, // Callback(sourceNode)
// Make tree nodes accept draggables
autoExpandMS: 1000, // Expand nodes after n milliseconds of hovering.
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
onDragEnter: null, // Callback(targetNode, sourceNode)
onDragOver: null, // Callback(targetNode, sourceNode, hitMode)
onDrop: null, // Callback(targetNode, sourceNode, hitMode)
onDragLeave: null // Callback(targetNode, sourceNode)
},
ajaxDefaults: { // Used by initAjax option
cache: false, // false: Append random '_' argument to the request url to prevent caching.
timeout: 0, // >0: Make sure we get an ajax error for invalid URLs
dataType: "json" // Expect json format and pass json object to callbacks.
},
strings: {
loading: "Loading…",
loadError: "Load error!"
},
generateIds: false, // Generate id attributes like < span id="dynatree-id-KEY" >
idPrefix: "dynatree-id-", // Used to generate node id's like < span id="dynatree-id-<key>" >.
keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath().
cookieId: "dynatree", // Choose a more unique name, to allow multiple trees.
cookie: {
expires: null // Days or Date; null: session cookie
},
// Class names used, when rendering the HTML markup.
// Note: if only single entries are passed for options.classNames, all other
// values are still set to default.
classNames: {
container: "dynatree-container",
node: "dynatree-node",
folder: "dynatree-folder",
empty: "dynatree-empty",
vline: "dynatree-vline",
expander: "dynatree-expander",
connector: "dynatree-connector",
checkbox: "dynatree-checkbox",
nodeIcon: "dynatree-icon",
title: "dynatree-title",
noConnector: "dynatree-no-connector",
nodeError: "dynatree-statusnode-error",
nodeWait: "dynatree-statusnode-wait",
hidden: "dynatree-hidden",
combinedExpanderPrefix: "dynatree-exp-",
combinedIconPrefix: "dynatree-ico-",
hasChildren: "dynatree-has-children",
active: "dynatree-active",
selected: "dynatree-selected",
expanded: "dynatree-expanded",
lazy: "dynatree-lazy",
focused: "dynatree-focused",
partsel: "dynatree-partsel",
lastsib: "dynatree-lastsib"
},
debugLevel: 1 // 0:quiet, 1:normal, 2:debug
});
'JavaScript > dynaTree' 카테고리의 다른 글
| [dynatree] TREE TO TREE DRAG AND DROP 예제 (0) | 2012.02.21 |
|---|---|
| [dynatree] dynatree node option (0) | 2012.02.09 |
| [dynatree] dynatree (jQuery 기반의 tree-plugin) (0) | 2012.02.08 |
트랙백
댓글
글
다운로드 : http://code.google.com/p/dynatree
문서 : http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html
'JavaScript > dynaTree' 카테고리의 다른 글
| [dynatree] TREE TO TREE DRAG AND DROP 예제 (0) | 2012.02.21 |
|---|---|
| [dynatree] dynatree node option (0) | 2012.02.09 |
| [dynatree] Option 옵션 (0) | 2012.02.09 |
RECENT COMMENT