Web中可以任意拖拽的树.

这哥们使用的是PHP +　EXT JS.　正好有网友提问这个问题,就顺手写了写，将这个可以树转换成了C#的．

我使用的是Framework3.5 SP1, SQL Express 2005. 　对数据库的访问使用了Linq,　其实还是我比较懒,　不想写SQL语句．

 

CREATE TABLE [dbo].[employees]( [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]

以上代码是由SQL2005自动生成的,可能跑在SQL2000上会有点问题,照着结构手动创建一个也是可以的．

 

这是前台显示树的页面中所使用到的方法．　其中OnReady的方法,是将树初始化，建立一个根节点，然后向后台的页面请求子结点的信息. 然后将处理过的信息显示在tree-div中.

 <div id="tree-div" style="height:400px;"></div>

<mce: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(); }); // --></mce:script>

子结点是JSON结构的,不过这个Ext JS很是脆弱,JSON只识别那种在中括号内的. 类似下面那种格式. 
在网上搜索了不少关于JSON转换的,没有一种可以实现下面的格式. 所以只有写了一个递归的办法来读取.

 

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/"}]");

 

用递归的办法将数据表中的内容读取出来,拼接成JSON的格式.

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; }

 

在接受信息的时候,使用的是serverPage.ashx文件, 是一个页面与代码混合的文件. 因为如果使用aspx页面的时候, ajax回调时会产生一些页面信息.比如<!document 之类的,因此使用serverPage.ashx的时候, 返回的信息可以自由的控制.

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); }

 

 

最后一步写入数据库是指TreeReparent和TreeReorder中加入数据库更新的代码就可以了. 然后返回一个1告诉前台的JS,我已经将数据成功的更新啦....

 

天很晚了,有时间再将最后一步补齐.

 

这是PHP版的, CakePHP的MVC结构真是乱啊．．看的头都痛了．

http://blogs.bigfish.tv/adam/2008/02/12/drag-and-drop-using-ext-js-with-the-cakephp-tree-behavior/

 

这是提问网友的地址

http://topic.csdn.net/u/20090114/20/6f4f68f2-b29b-481c-b35a-203e7215a0dd.html

 

文中提到的extjs的网站http://extjs.com/