是在web 项目中 。。 谢谢
Treeview 树 ， 随意拖动树的节点， 拖到那个节点下面，就挂在哪个节点下面。 我 主要是不了解那个节点如何拖动， 如： 1 北京市 0
2 东城区 1
3 长沙 0
4 天心 3 当我拖到了，相应的改变数据库里面的 上级ID
我要把那天心 拖动到 北京市下面
北京市 0
东城区 1
天心 1
长沙 0
Treeview 树 ， 随意拖动树的节点， 拖到那个节点下面，就挂在哪个节点下面。 我 主要是不了解那个节点如何拖动， 如： 1 北京市 0
2 东城区 1
3 长沙 0
4 天心 3 当我拖到了，相应的改变数据库里面的 上级ID
我要把那天心 拖动到 北京市下面
北京市 0
东城区 1
天心 1
长沙 0
期待啊？
http://blogs.bigfish.tv/adam/2008/02/12/drag-and-drop-using-ext-js-with-the-cakephp-tree-behavior/这是演示地址
http://blogs.bigfish.tv/adam/examples/tut01-extjs-cakephp/employees/
* CakePHP 1.2 PHP的一个框架,用的MVC,看的头晕, 但是无非就是添加,删除数据. 后台代码换成C#也是一样的吧.
* Ext JS 2.0 一个JS的库.
如果想同时使用Prototype和Ext JS,那么这个代码不适合你... 不兼容Prototype不往下翻译了,应该能实现你的要求.
http://www.ajaxjs.com/ajaxjs/index/
可以去下
我对php 是一点都不懂 谁知道的帮我解释 解释 ，谢谢
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [varchar](255) NULL,
[parent_id] [int] NULL,
[left] [int] NULL,
[right] [int] NULL,
CONSTRAINT [PK_employees] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
JS向后台发送数据的时候,使用到的后台ashx文件. serverPage.ashx<%@ WebHandler Language="C#" Class="serverPage" %>using System;
using System.Web;
using System.Text;
using System.Collections.Generic;
using System.Collections;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Web.Script.Serialization;
public class serverPage : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
if (context.Request["action"] != null && context.Request["action"] == "get")
{
InitTreeList(context);
}
else if (context.Request["node"] != null && context.Request["parent"] != null && context.Request["position"] != null)
{
this.TreeReparent(context);
}
else if (context.Request["delta"] != null && context.Request["node"] != null)
{
this.TreeReorder(context);
}
}
public bool IsReusable {
get {
return false;
}
}
private void TreeReparent(HttpContext context)
{
//Update your database. ... 这里就是你的操作....更新数据库什么的.
context.Response.ContentType = "text/plain";
context.Response.Write("1");
}
private void TreeReorder(HttpContext context)
{
//Change your record .. 你的更新数据库的操作.
context.Response.ContentType = "text/plain";
context.Response.Write("1");
}
private void InitTreeList(HttpContext context)
{
context.Response.ContentType = "application/json";
int parent = 0;
if (context.Request["node"] != null && context.Request["node"].ToString() != "root") parent = int.Parse(context.Request["node"].ToString());
//sb.Append("[{\"cls\":\"folder\",\"id\":10,\"leaf\":false,\"children\":[{\"cls\":\"file\",\"id\":11,\"leaf\":true,\"children\":null,\"text\":\"S600\"},");
//sb.Append("{\"cls\":\"file\",\"id\":12,\"leaf\":true,\"children\":null,\"text\":\"SLK200\"}],\"text\":\"Benz\"}]");
string tree = InitTreeNode(0);
tree = "[" + tree + "]";
tree = tree.Replace(",,", ",").Replace("[]","null");
context.Response.Write(tree);
}/*这个函数,是用递归的方法,将数据表中的内容显示出来. 我这里使用的是Linq,用ADO.NET取出Datatable或者是DataReader再循环,其实是一样的效果.
LINQ写起来方便一点.
*/
private string InitTreeNode(int parent_id)
{
TreeDBDataContext db = new TreeDBDataContext();
StringBuilder sb = new StringBuilder();
var tbl = from p in db.employees where p.parent_id == parent_id select p;
foreach(var row in tbl)
{
// sb.Append("{");
sb.Append("\"text\":\"" + row.name + "\",");
sb.Append("\"id\":\"" + row.id + "\",");
System.Linq.IQueryable<employee> children = (from p in db.employees where p.parent_id == row.id select p);
if (children.Count() > 0)
{
sb.Append("\"cls\":\"folder\",");
//sb.Append("\"leaf\":\"true\",");
}
else
{
sb.Append("\"cls\":\"file\",");
sb.Append("\"leaf\":\"true\",");
}
sb.Append(",children:[");
sb.Append(InitTreeNode(row.id));
sb.Append("]},");
}
string str = sb.ToString();
if (str.Length > 0 && str[str.Length-1] == ',') str = str.Substring(0, str.Length - 1); return str; }
}
<head runat="server">
<title></title>
<link href="js/resources/css/ext-custom.css" rel="stylesheet" type="text/css" />
<script src="js/ext-custom.js" type="text/javascript"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = 'js/resources/images/default/s.gif';Ext.onReady(function() { var getnodesUrl = 'serverPage.ashx?action=get';
var reorderUrl = 'serverPage.ashx';
var reparentUrl = 'serverPage.ashx'; var Tree = Ext.tree; var tree = new Tree.TreePanel({
el: 'tree-div',
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
rootVisible: true,
loader: new Ext.tree.TreeLoader({
dataUrl: getnodesUrl
})
}); var root = new Tree.AsyncTreeNode({
text: 'Employees',
draggable: false,
id: 'root'
});
tree.setRootNode(root); // track what nodes are moved and send to server to save var oldPosition = null;
var oldNextSibling = null; tree.on('startdrag', function(tree, node, event) {
oldPosition = node.parentNode.indexOf(node);
oldNextSibling = node.nextSibling;
}); tree.on('movenode', function(tree, node, oldParent, newParent, position) { if (oldParent == newParent) {
var url = reorderUrl;
var params = { 'node': node.id, 'delta': (position - oldPosition) };
} else {
var url = reparentUrl;
var params = { 'node': node.id, 'parent': newParent.id, 'position': position };
} // we disable tree interaction until we've heard a response from the server
// this prevents concurrent requests which could yield unusual results tree.disable(); Ext.Ajax.request({
url: url,
params: params,
success: function(response, request) { // if the first char of our response is not 1, then we fail the operation,
// otherwise we re-enable the tree if (response.responseText.charAt(0) != 1) {
request.failure();
} else {
tree.enable();
}
},
failure: function() { // we move the node back to where it was beforehand and
// we suspendEvents() so that we don't get stuck in a possible infinite loop tree.suspendEvents();
oldParent.appendChild(node);
if (oldNextSibling) {
oldParent.insertBefore(node, oldNextSibling);
} tree.resumeEvents();
tree.enable(); alert("Oh no! Your changes could not be saved!");
} }); });
tree.render();
root.expand();});</script></head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="btnInitTree" runat="server" onclick="btnInitTree_Click"
Text="Init Tree" />
<div id="tree-div" style="height:400px;"></div>
</form>
</body>
</html>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ }
protected void btnInitTree_Click(object sender, EventArgs e)
{
InitTreeList(); }
/*作用是将数据表中的内容全部删除,然后重新生成一下.
* 这里用的是Linq,用ADO.NET也行
*/
private void InitTreeList()
{
TreeDBDataContext db = new TreeDBDataContext();
//Delete all records from database
var tbl = from p in db.employees select p;
foreach (var row in tbl)
{
db.employees.DeleteOnSubmit(row);
}
db.SubmitChanges(); employee r = new employee();
r.name = "Harry Potter";
r.parent_id = 0;
db.employees.InsertOnSubmit(r);
db.SubmitChanges(); int parent_id = r.id;
r = new employee();
r.parent_id = parent_id;
r.name = "Ron Weasley";
db.employees.InsertOnSubmit(r); r = new employee();
r.parent_id = parent_id;
r.name = "Hermione Granger";
db.employees.InsertOnSubmit(r); r = new employee();
r.parent_id = parent_id;
r.name = "Adam Royle";
db.employees.InsertOnSubmit(r); r = new employee();
r.parent_id = parent_id;
r.name = "Lord Voldemort";
db.employees.InsertOnSubmit(r); r = new employee();
r.name = "Albus Dumbledore";
r.parent_id = 0;
db.employees.InsertOnSubmit(r);
db.SubmitChanges();
parent_id = r.id;
r = new employee();
r.parent_id = parent_id;
r.name = "Professor McGonagall";
db.employees.InsertOnSubmit(r); r = new employee();
r.parent_id = parent_id;
r.name = "Professor Flitwick";
db.employees.InsertOnSubmit(r); r = new employee();
r.parent_id = parent_id;
r.name = "Severus Snape";
db.employees.InsertOnSubmit(r);
r = new employee();
r.parent_id = parent_id;
r.name = "Hagrid";
db.employees.InsertOnSubmit(r); db.SubmitChanges();
}
}
http://blog.csdn.net/w59879213
可以,将Linq的部份改为ADO.NET就行了.