为dojo普及做贡献-C--ajax操作是完成了，但把添加、修改等按钮改成右键，再把提交表单改酷点
2010-02-10 18:16
477 查看
前面：树DOJO AJAX操作是完成了，但把添加、修改等按钮不够酷，而且，提交修改的表单就是一个框(prompt()框)，也太不适用了。
这次把右键增加进去，并且把表单改酷点。
JSP:
保存
放弃
javascript
js/My_Tree_Dynamic_Cool_menu.js
我很陶醉，全部完成:
1:拖动
2:右键
3:表单改造
拖动提交到库其实很简单，无非就是改一下现在的父级ID，就不再做下去了，，，
要COOL就酷到底,马上开始写 最新版本的dojo(1.4X) grid
写完了把部件整合到一起，来个综合应用;
下 一 篇： 要COOL就酷到底
这次把右键增加进去，并且把表单改酷点。
先贴源码:
JSP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dojo树到服务器交互-Cool--全部完成-表单改造完成</title>
<link rel="stylesheet" href="css/Tree_Notification_API.css" mce_href="css/Tree_Notification_API.css"
type="text/css"></link>
<mce:script type="text/javascript" src="../libs/dojo1.4.x/dojo/dojo.js" mce_src="libs/dojo1.4.x/dojo/dojo.js"
charset="utf-8"></mce:script>
<mce:script type="text/javascript" src="js/My_Tree_Dynamic_Cool_menu.js" mce_src="js/My_Tree_Dynamic_Cool_menu.js"></mce:script>
</head>
<body class="tundra">
<!--右键-一定放在Tree前面才不会报错-->
<ul dojoType="dijit.Menu" id="tree_menu"
style="display: none; width: 8em;">
<li dojoType="dijit.MenuItem" id="addMenu"
iconClass="dijitEditorIcon dijitEditorIconIndent">
添加
<mce:script type="dojo/method" event="onClick" args="evt"><!--
state = "insert";
clearItemInput();
dijit.byId("cDialog").attr("title","添加分类");
dijit.byId("cDialog").show();
// --></mce:script>
</li>
<li dojoType="dijit.MenuSeparator"></li>
<li dojoType="dijit.MenuItem" id="editMenu"
iconClass="dijitEditorIcon dijitEditorIconWikiword">
编辑
<mce:script type="dojo/method" event="onClick" args="evt"><!--
state = "update";
dijit.byId("cDialog").attr("title","修改分类");
doUpdate();
dijit.byId("cDialog").show();
// --></mce:script>
</li>
<li dojoType="dijit.MenuSeparator"></li>
<li dojoType="dijit.MenuItem" id="removeMenu"
iconClass="dijitEditorIcon dijitEditorIconDelete">
删除
<mce:script type="dojo/method" event="onClick" args="evt"><!--
removeCategory();
// --></mce:script>
</li>
</ul>
<div dojoType="dijit.layout.BorderContainer" class="treeLayout"
design="headline" liveSizing="true">
<div dojoType="dijit.layout.ContentPane" region="leading"
splitter="true" style="width: 300px">
<div dojoType="dojo.data.ItemFileWriteStore"
url="categoryTree.action?parentId=0" jsId="categoryJson">
<mce:script type="dojo/connect" event="onNew" args="newItem"><!--
//监听onNew事件，传参newItem
// --></mce:script>
</div>
<div dojoType="dijit.tree.TreeStoreModel" store="categoryJson"
jsId="treeModel"></div>
<div dojoType="dijit.Tree" id="mytree" model="treeModel"
dndController="dijit._tree.dndSource" query="{parent:null}"
style="height: 90%; overflow: auto;">
<mce:script type="dojo/connect"><!--
var menu = dijit.byId("tree_menu");
// when we right-click anywhere on the tree, make sure we open the menu
menu.bindDomNode(this.domNode);
dojo.connect(menu, "_openMyself", this, function(e)
{
// get a hold of, and log out, the tree node that was the source of this open event
var tn = dijit.getEnclosingWidget(e.target);
console.debug(tn);
// now inspect the data store item that backs the tree node:
console.debug("tn.item"+tn.item+"/n tn.item ID:"+tn.item.id);
//转换
lastSelected = tn.item;
console.debug("/nlastSelected ID:"+lastSelected.id);
// contrived condition: if this tree node doesn't have any children, disable all of the menu items
menu.getChildren().forEach(function(i){ i.attr('disabled', !tn.item.children); });
// IMPLEMENT CUSTOM MENU BEHAVIOR HERE
});
// --></mce:script>
<mce:script type="dojo/method" event="onClick" args="item"><!--
lastSelected = item;
console.debug("单击事件/n"+lastSelected);
console.debug("单击事件/nNAME:"+lastSelected.title+"/nID:"+lastSelected.id+"/nURL:"+lastSelected.url);
// --></mce:script>
</div>
<div>
<div dojoType="dijit.form.Button">
添加
<mce:script type="dojo/method" event="onClick" args="evt"><!--
state = "insert";
clearItemInput();
dijit.byId("cDialog").attr("title","添加分类");
dijit.byId("cDialog").show();
// --></mce:script>
</div>
<div dojoType="dijit.form.Button">
删除
<mce:script type="dojo/method" event="onClick" args="evt"><!--
removeCategory();
// --></mce:script>
</div>
<div dojoType="dijit.form.Button">
修改
<mce:script type="dojo/method" event="onClick" args="evt"><!--
state = "update";
dijit.byId("cDialog").attr("title","修改分类");
doUpdate();
dijit.byId("cDialog").show();
// --></mce:script>
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="center">
<h2>
实现CRUD功能,实现右键菜单编辑,实现拖放，但没有执行相应的数据库操作,最后，完美解决
</h2>
</div>
</div>
<div dojoType="dijit.Dialog" id="cDialog" title="编辑分类信息"
class="myDialog">
<table>
<tr>
<td style="text-align: right;" mce_style="text-align: right;">
<label for="cTitle">
目录名称：
</label>
</td>
<td>
<input id="cTitle" dojoType="dijit.form.ValidationTextBox"
size="36" maxlength="36" required="true" promptMessage="请输入分类名称."
invalidMessage="分类名称必须填写!" trim="true" style="width: 36em;">
</td>
</tr>
<tr>
<td style="text-align: right;" mce_style="text-align: right;">
<label for="cUrl">
管理地址：
</label>
</td>
<td>
<input id="cUrl" dojoType="dijit.form.ValidationTextBox" size="36"
maxlength="136" style="width: 36em;">
</td>
</tr>
<tr>
<td style="text-align: right;" mce_style="text-align: right;">
<label for="cDescription">
目录说明：
</label>
</td>
<td>
<!-- style="height: 138px; width: 488px;" class="descriptionEditor"-->
<input id="cDescription" dojoType="dijit.form.ValidationTextBox"
size="36" maxlength="136" style="width: 36em;">保存
放弃
javascript
:
js/My_Tree_Dynamic_Cool_menu.js/**
* dojo树到服务器交互-Cool--全部完成-表单改造完成 开始改按钮为为右键菜单 2010-02-10 d㊣Guang QQ:二一三零二七九六
* 二一三零二七九六@OO.com
*/
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
// dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Tree");
dojo.require("dijit.Editor");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit._tree.dndSource");
dojo.require("dijit.Menu");
// For use in Delete and Rename
var lastSelected = null;
/* 是添加还是修改 */
var state = "";
dojo.addOnLoad(function() {
// 解析dojo
dojo.parser.parse();
clearItemInput();
//wire up the checkItemAcceptance handler...
dijit.byId("mytree").checkItemAcceptance = function(target, source)
{
//convert the target (DOM node) to a tree node and
//then get the item out of it
var item = dijit.getEnclosingWidget(target).item;
//do not allow dropping onto the top (fabricated) level and
//do not allow dropping onto items, only categories
return (item.id != "root" && item.type == "category");
};
})
/**
* 清除表单为空
*/
function clearItemInput() {
dijit.byId('cTitle').setValue("");
dijit.byId('cId').setValue("");
dijit.byId('cUrl').setValue("");
dijit.byId('cDescription').setValue("");
}
function addCategory() {
// 检查节点是否选择
if (!lastSelected || !categoryJson.isItem(lastSelected)) {
// alert('添加节点!'+!lastSelected || !categoryJson.isItem(lastSelected));
alert('请选择节点!');
return;
}
// 取上级节点
var pInfo = lastSelected ? {
parent : lastSelected,
attribute : "children"
} : null;
var parentId = lastSelected.id;
var cTitle = dijit.byId('cTitle').getValue("");
// 修改的时候有用,此处没用var cId = dijit.byId('cId').getValue("");
var cUrl = dijit.byId('cUrl').getValue("");
var cDescription = dijit.byId('cDescription').getValue("");
dojo.xhrGet( {
encoding : 'UTF-8',
url : "editTree.action?id=0&parentId=" + parentId + "&description="
+ cDescription + "&url=" + cUrl + "&title=" + cTitle,
handleAs : "json",
handle : function(response) {
// 只有成功后才插入tree node
categoryJson.setValue(categoryJson.newItem( {
id : response.id,
title : cTitle,
url : cUrl,
description : cDescription,
parentId : lastSelected.id
}, pInfo), "title", newName);
// alert(" RESPONSE：" + response.id + " --new Name " + cTitle);
console.debug(" RESPONSE：" + response.id + " --new Name " + cTitle);
}
});
console.debug(" 添加插入到：" + lastSelected.title + " ID:" + lastSelected.id);
}
function removeCategory() {
if (!lastSelected || !categoryJson.isItem(lastSelected)) {
alert('请选择节点!');
return;
}
categoryJson.deleteItem(lastSelected);
// 提交到服务器
dojo.xhrPost( {
url : "removeTreeNode.action",
// myTree参数名是随意起的
content : {
title : lastSelected.title,
id : lastSelected.id
},
timeout : 1000,
load : function() {
console.debug("删除成功!");
},
error : function(resource) {
alert('Uh oh. 删除失败.' + resource + resource.error);
}
});
}
/* 取表单值-到修改,这里已经点击了树，所以当前lastSelected为需要修改的当前节点 */
function doUpdate() {
// 检查节点是否选择
if (!lastSelected || !categoryJson.isItem(lastSelected)) {
// alert('添加节点!'+!lastSelected || !categoryJson.isItem(lastSelected));
alert('请选择节点!');
return;
}
dijit.byId('cTitle').setValue(lastSelected.title);
dijit.byId('cId').attr("type", "hidden");
dijit.byId('cId').setValue(lastSelected.id);
dijit.byId('cUrl').setValue(lastSelected.url);
dijit.byId('cDescription').setValue(lastSelected.description);
}
function updateCategory() {
if (!lastSelected || !categoryJson.isItem(lastSelected)) {
alert('请选择节点!');
return;
}
var cTitle = dijit.byId('cTitle').getValue();
var cId = dijit.byId('cId').getValue();
var cUrl = dijit.byId('cUrl').getValue();
var cDescription = dijit.byId('cDescription').getValue();
// 使用dijit对话框地更好
categoryJson.setValue(lastSelected, "title", cTitle);
// categoryJson.setValue(lastSelected, "id", cId);
categoryJson.setValue(lastSelected, "url", cUrl);
categoryJson.setValue(lastSelected, "description", cDescription);
// 提交到服务器
dojo.xhrPost( {
url : "editTree.action",
// myTree参数名是随意起的
content : {
id : cId,
title : cTitle,
description : cDescription,
url : cUrl
},
timeout : 1000,
load : function() {
console.debug("修改成功!");
},
error : function() {
alert('Uh oh. 修改/'t 出错啦.');
}
});
}
saveAll = function() {
// 把 JavaScript 转成 JSON. 类似 dojo.objectToJSON, 但是考虑了dojo.data类型映射
var newFileContentString = categoryJson._getNewFileContentString();
dojo.xhrPost( {
url : "datasources/rma_myTree.json",
// myTree参数名是随意起的
content : {
myTree : newFileContentString
},
timeout : 1000,
load : function() {
console.debug("all myTree saved");
},
error : function() {
alert('Uh oh. The myTree weren/'t saved.');
}
});
}
// alert(dojo.version);
// alert(dojo.version);我很陶醉，全部完成:
1:拖动
2:右键
3:表单改造
拖动提交到库其实很简单，无非就是改一下现在的父级ID，就不再做下去了，，，
要COOL就酷到底,马上开始写 最新版本的dojo(1.4X) grid
写完了把部件整合到一起，来个综合应用;
下 一 篇： 要COOL就酷到底
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery 自动创建form表单提交代码 下拉条 ajax模板代码 添加_移除 属性_样式
- jquery在表单提交之前，给submit按钮绑定ajax请求需要注意的细节
- 图片和表单文字信息通过一个按钮来完成提交
- ajax操作提交整个表单内容
- 黄聪：Jquery+php+ajax实现表单异步提交，动态添加回复评论
- 当button按钮放入form表单进行ajax提交遇到的诡异问题
- sssp整合分页之完成修改操作（二）【修改状态下Ajax验证用户名可用性】
- 表单根据不同的提交按钮转向不同的页面操作
- 当button按钮放入form表单进行ajax提交遇到的诡异问题
- 简洁web 表单认证 和 jsp+ajax添加修改除全选等
- Asp.net 更改Alert样式和后台注册Jquery的Ajax异步提交事件[包括处理前操作、处理后操作(注明:此方法只是作为参考，如有需要可自行修改)]
- django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用
- 基本查询语句及利用SQL语句完成数据的添加、删除、修改操作
- XML删除按钮，修改并保存按钮 和 添加按钮。完成这些按钮所对应的功能（XmlDocument）。
- ALV中添加按钮 进行修改、创建、删除、添加、导入、保存等操作
- 当button按钮放入form表单进行ajax提交遇到的诡异问题
- 分享Ajax 提交表单数据到入库的全盘操作流程
- 使用ajax提交带有file的表单，添加完/jquery.min.js、jquery-migrate-1.1.0.js、jquery.form.js后仍然报错
- Javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制