一棵树，从jquery到Ext 的研究

异步操作的问题充斥了整个过程，以及每个细节。

 

这棵树实现了如下功能：

 

    a.只加载子目录，子目录的子目录需要点击“展开按钮”才加载

    b.点击“目录名”是选中目录

    c.选中后就能对它进行添加子节点，修改、删除、访问设置的操作了。（增删查都是异步实现）。

 

我用Asp.net Mvc + jquery / Ext + Linq + lambda表达式做的文档管理系统。

 

首先说一下我用Jquery 实现的过程吧。

 

    标准的jquery.treeview.js

 

    小技巧展示：html文件头，加载脚本、样式文件、以及meta标记

   

 

 

     看到最后两个js引用了吧？这就是操作这棵树的js代码。贴一下啦！

dir_com.js

     var parent_id = 0; //父级目录id默认为0； var img_parent_id = 0; //添加一个目录到目录树 var append_dir = function(dirs) { var id = "tree_browser"; //目录id，默认是根目录id if (img_parent_id != 0) { id = img_parent_id; } var bra = ''; $.each(dirs, function(i, dir) { bra += '<li class="closed"><span class="folder">' + dir.DIR_TITLE + '</span><ul id="' + dir.DIR_ID + '"></ul></li>'; }); if (bra != '') { $('#' + id).removeClass('treeview'); var bran = $(bra).appendTo('#' + id); $('#' + id).treeview(); $('#' + id).treeview({ add: bran }); //点击加号事件 $('#' + id).find('li> .hitarea').click(folder_img_click); //点击标题事件 $('#' + id).find('li>span').click(folder_click); } //当ajax完成时，绑定目录点击事件 }; //end：添加一个目录到目录树 //加载目录 var load_dirs = function() { $.ajax({ type: "GET", url: dirListUrl + img_parent_id, cache: false, dataType: "json", timeout: 30000, success: function(r_data) { append_dir(r_data); }, error: function() { alert("请求失败或超时，请稍后再试！"); return; } }); }; //end：加载目录 //加载目录和文档 var load_dir_doc = function() { var frm = $('#main_frame'); if (frm != undefined) { if (parent_id == 0) { return; } frm.attr('src', dirDocListUrl + parent_id); } }; //end：加载目录和文档 //目录单击事件，重新设定parent_id的值 var folder_img_click = function() { img_parent_id = $(this).siblings('ul').attr('id'); //如果该目录已经加载了子目录或文件，退出函数 $(this).siblings('ul').html(''); load_dirs(); return false; }; var folder_click = function() { try { parent_id = $(this).siblings('ul').attr('id'); load_dir_doc(); $('#oper_tit').html(getRoute(parent_id)); dir_id = parent_id; //点击后的文字变色为色，并加粗 $('#tree_browser span').css('color', '#000000'); $('#tree_browser span').css('font-weight', 'normal'); $(this).css('color', 'green'); $(this).css('font-weight', 'bold'); } catch (err) { return false; } return false; }; //end：目录单击事件 var setDocList = function(listData) { var doc_list = ''; var temp = ''; $.each(listData, function(i, doc) { temp = ''; temp += '<div class="files_list">'; temp += '<div style="text-align:left;" mce_style="text-align:left;"> <a target="_blank" href="' + docShowUrl + doc.DOC_ID + '" mce_href="' + docShowUrl + doc.DOC_ID + '" title="' + doc.DOC_TITLE + '">' + doc.DOC_TITLE + '</a></div>'; temp += '<div> ' + doc.DOC_VERSION + '</div>'; temp += '<div> ' + doc.DOC_DIR + '</div>'; temp += '<div> ' + doc.DOC_USER_NAME + '</div>'; temp += '<div>【' + doc.DOC_STATUS + '】</div>'; temp += '<div> ' + doc.DOC_UPDATETIME + '</div>'; temp += '<div> ' + doc.DOC_AUTHOR + '</div>'; temp += '</div>'; doc_list += temp; }); if (doc_list == '') { return '<font style="margin:30px;line-height:50px;font-size:16px;color:#ff6600;" mce_style="margin:30px;line-height:50px;font-size:16px;color:#ff6600;">没有找到相关内容！</font>'; } else { return doc_list; } }; //得到指定目录的路由字符串，以‘ > ’分隔 var getRoute = function(id) { var str = ''; if (id == 'tree_browser' || id=='0') { return '根目录 > '; } str += $('#' + id).prev().text() + ' > '; return str = getRoute($('#' + id).parent().parent().attr('id')) + str; }; //end：得到指定目录的路由字符串，以‘ > ’分隔

dir_edit.js

     $(document).ready(function() { var checkSome = function(tit, num) { var aaaa = ''; if (num == 1) { if (parent_id == 0) { aaaa = $('#tree_browser>li>span'); } else { aaaa = $('#' + parent_id + '>li>span'); } } else { aaaa = $('#' + parent_id).parent().parent().find('>li>span'); } var succ = false; aaaa.each(function() { if ($.trim($(this).text()) == tit) { succ = true; } }); if (succ) { alert('已经存在同名目录！'); } return succ; }; //加载目录 load_dirs(); //注册添加目录事件 $('#sub_add_dir').click(function() { var tit = $.trim($('#dir_tit_add').val()); if (tit == '') { alert('请输入目录名称！'); return; } if (checkSome(tit, 1)) { return; } $.ajax({ type: "GET", url: dirAddUrl + parent_id + '/' + encodeURIComponent(tit), cache: false, dataType: "json", timeout: 30000, success: function(dirs) { if (dirs == -1) { alert("对不起，您没有该操作权限！"); return; } //新添加一个目录 // append_dir(dirs); var id = "tree_browser"; //目录id，默认是根目录id if (parent_id != 0) { id = parent_id; } $('#' + id).treeview(); var bra = ''; $.each(dirs, function(i, dir) { bra += '<li class="closed"><span class="folder">' + dir.DIR_TITLE + '</span><ul id="' + dir.DIR_ID + '"></ul></li>'; }); if (bra != '') { $('#' + id).removeClass('treeview'); var bran = $(bra).appendTo('#' + id); $('#' + id).treeview(); $('#' + id).treeview({ add: bran }); //点击加号事件 $('#' + id).find('li> .hitarea').click(folder_img_click); //点击标题事件 $('#' + id).find('li>span').click(folder_click); } //window.location.reload(); }, error: function() { alert("请求失败或超时，请稍后再试！"); return; } }); $('#edit_window').hide(); }); $('.sub_can_dir').click(function() { $('#edit_window').hide(); }); //注册删除目录事件 $('#del_dir').click(function() { if (parent_id == 0) { alert("对不起，不能删除根目录！"); return; } if (window.confirm("删除“" + decodeURIComponent(encodeURIComponent($('#' + parent_id).prev().text())) + "”目录")) { $.getJSON(dirDelUrl + parent_id, function(data) { if (data == -1) { alert("对不起，您没有该操作权限！"); return; } //更新当前目录名称 var pid = $('#' + parent_id).parent().parent().attr('id'); $('#' + parent_id).parent().remove(); if (pid == 'tree_browser') { parent_id = 0; } else { parent_id = pid; } $('#oper_tit').html(getRoute(parent_id)); }); } }); //修改目录名称事件 $('#sub_update_dir').click(function() { var title2 = $.trim($('#dir_tit_add').val()); if (title2 == '') { return; } if (checkSome(title2, 0)) { return; } // if (window.confirm("修改'" + encodeURIComponent(title2) + "'")) { $.getJSON(dirUpdUrl + parent_id + '/' + encodeURIComponent(title2), function(data) { if (data == -1) { alert("对不起，您没有该操作权限！"); return; } //更新当前目录名称 $('#' + parent_id).prev('span').text(title2); //更新目录路径名称 $('#oper_tit').html(getRoute(parent_id)); }); // } $('#edit_window').hide(); }); //全局ajax绑定 $("#loading").bind("ajaxSend", function() { var ttt = $('#tree_browser'); var offset = ttt.offset(); $(this).css({ 'top': offset.top, 'left': offset.left }); var hhh = ttt.height() + 20; $(this).height(hhh); $(this).show(); }).bind("ajaxComplete", function() { $(this).hide(); }); //end：全局ajax绑定 });  

 

com里有加载树目录的代码

ajax请求，设置了超时30秒，取消缓存等。然后循环向根目录里添加子目录。

注意到我给每一个UL都treeview了吧？问题就出在这里了。我开始删除了这个UL的treeview样式，但是如果它的里边已经有了LI 和UL节点。下一次就会把样式弄乱了。

幸运的是，如果你给它两次treeview 的话样式还是正常的。所以，浏览目录时的样式是不会出错的。

不幸的是，如果你添加目录，这样就遭了。同级节点的样式就乱了，本来是打开的图标，却显示的是展开的样式；有的更或混杂在一起。

 

一个解决方案是，用他们自带的jquery.treeview.ansy.js异步文件。但是好像不怎么好用。我就没搞懂。

 

怎么也搞不好这个混乱的样式了。弄其他的吧，Ext 在树状控件方面做的很好了。但也被我发现了恶心的地方。

 

Ext 的tree 确实给我们带来了很强大、很方便的操作：

 

    1. 面向对象的节点添加方法，只要node.addChildren(leaf)就行。

 

    2. 丰富的事件操作。

    如：tree.expandChildNodes(true)自动展开子节点，node.expand(false, true)展开效果，tree.on('expandnode', function(node) {//做你想做的事}展开事件重载。（我认为这一套操作是很重要的）

 

    3. 再就是一个toolbar。让你轻松操作这棵树！！！

 

    4. 废话不多说了，看我的代码吧！

 

    Ext.BLANK_IMAGE_URL = url_root + 'Scripts/ext-js/resources/images/default/s.gif'; Ext.namespace('My'); Ext.namespace('MyTree'); MyTree.TreePanel = function(treeid, width, height, rootid, children_id) { this.treeid = treeid; this.rootid = rootid; this.children_id = children_id; this.init = function() { var tbdel = new Ext.Toolbar.Button({ id: "tbdel" + this.treeid, text: '<img alt="删除" title="删除" src="' + url_root + 'Content/css1/images/DELETE.PNG" mce_src="' + url_root + 'Content/css1/images/DELETE.PNG" />删除', handler: function() { var node = tree.opNode; if (!node) { alert("请选择树目录！"); return false; } if (parseInt(node.id) == 0) { alert("不能删除根目录！"); return false; } tree.opNode = node.parentNode; node.parentNode.select(); MyTree.delNode(node); } }); var tbrefresh = new Ext.Toolbar.Button({ id: 'tbrefresh' + this.treeid, text: '<img alt="根目录" title="根目录" src="' + url_root + 'Content/css1/images/arrow_refresh.png" mce_src="' + url_root + 'Content/css1/images/arrow_refresh.png" />根目录', handler: function() { tree.opNode = root; root.select(); } }); var tbadd = new Ext.Toolbar.Button({ id: 'tbadd' + this.treeid, text: '<img alt="新增" title="新增" src="' + url_root + 'Content/css1/images/ADD.png" mce_src="' + url_root + 'Content/css1/images/ADD.png" />新增', handler: function() { var node = tree.opNode; if (!node) { alert("请选择树目录！"); return false; } MyTree.addNode(node); } }); var tbrename = new Ext.Toolbar.Button({ id: "tbrename" + treeid, text: '<img alt="重命名" title="重命名" src="' + url_root + 'Content/css1/images/edit.png" mce_src="' + url_root + 'Content/css1/images/edit.png" />重命名', handler: function() { var node = tree.opNode; if (!node) { alert("请选择树目录！"); return false; } if (parseInt(node.id) == 0) { alert("不能重命名根目录！"); return false; } MyTree.renameNode(node); } }); var tbset = new Ext.Toolbar.Button({ id: 'tbset' + this.treeid, text: '<img alt="权限" title="权限" src="' + url_root + 'Content/css1/images/access_set.png" mce_src="' + url_root + 'Content/css1/images/access_set.png" />权限', handler: function() { var node = tree.opNode; if (!node) { if (parseInt(node.id) == 0) { alert("不能设置根目录权限！"); return false; } alert("请选择树目录！"); return false; } MyTree.setNode(node); } }); var tbar = new Ext.Toolbar({ id: 'Toolbar' + this.treeid, items: [tbrefresh, tbadd, tbrename, tbdel, tbset] }); var tree = new Ext.tree.TreePanel({ id: "tree" + this.treeid, autoScroll: true, rootVisible: false, //隐藏根节点 animate: true, //设置在展开和收缩目录时是否使用动画效果 width: this.width, height: this.height, border: false, header: false, enableDD: false, containerScroll: true, tbar: tbar, loader: new Ext.tree.TreeLoader() }); var root = new Ext.tree.AsyncTreeNode({ text: "根目录", id: this.rootid, qtip: "根目录", children: [] }); var load_dirs = function(node) { if (node.hasChildNodes()) { return; } //加载下级目录 $.ajax({ type: "GET", url: dirListUrl + node.id, cache: false, dataType: "json", timeout: 30000, success: function(r_data) { var root_leaf = ''; $.each(r_data, function(i, dir) { root_leaf = new Ext.tree.AsyncTreeNode({ text: dir.text, //dir.DIR_TITLE, id: dir.id, //dir.DIR_ID, qtip: dir.text, //dir.DIR_TITLE, children: [] }); node.leaf = false; node.appendChild(root_leaf); node.expand(false, true); }); }, error: function(xhr, st, err) { alert("请求失败（" + err + "），请稍后再试！"); return; } }); }; var node_click = function(node) { // if (!node.isLeaf()) { // node.toggle(); // } load_dirs(node); }; tree.setRootNode(root); //设置根节点 tree.render(Ext.get('edit_tree')); //设置要放置到得页面容器 root.expand(false, true); //设置根节点展开效果 load_dirs(root); //加载一级子节点 tree.opNode = root; root.select(); tree.on("click", function(node) { tree.opNode = node; node.select(); }); tree.on('expandnode', function(node) { node_click(node); }); tree.on("contextmenu", function(node, event) { event.preventDefault(); node.select(); var depth = node.getDepth(); if (node.id != '0') { if (depth <= 2) { MyTree.rightmenulevel1(node, event); } else { MyTree.rightmenulevel3(node, event); } } }); }; //树形区块的宽度 this.width = width; //树形区块的高度 this.height = height; //树形区块根目录的定义 }; MyTree.addNode = function(node) { Ext.MessageBox.prompt('添加子目录', '请输入子目录名称:', function(btn, text) { if (btn == 'ok') { if ($.trim(text) == '') { alert('目录名称不能为空'); return false; } if ($.trim(text).length > 30) { alert('目录名称长度不能超过30'); return false; } $.ajax({ type: "GET", url: dirAddUrl + node.id + '/' + encodeURIComponent($.trim(text)), cache: false, dataType: "json", timeout: 30000, success: function(r_data) { if (parseInt(r_data) == -1) { alert('对不起，您没有该操作权限！'); return; } if (parseInt(r_data) == 0) { alert('已存在相同名称的目录！'); return; } var newnode = new Ext.tree.TreeNode({ id: r_data[0].DIR_ID, text: r_data[0].DIR_TITLE, qtip: r_data[0].DIR_TITLE }); node.leaf = false; node.appendChild(newnode); }, error: function(xhr, st, err) { alert("请求失败（" + err + "），请稍后再试！"); return; } }); } }); } MyTree.renameNode = function(node) { Ext.MessageBox.prompt('目录重命名', '将"' + node.text + '" 修改为:', function(btn, text) { if (btn == 'ok') { if ($.trim(text) == '') { alert('目录名称不能为空'); return false; } if ($.trim(text).length > 30) { alert('目录名称长度不能超过30'); return false; } $.ajax({ type: "GET", url: dirUpdUrl + node.id + '/' + encodeURIComponent($.trim(text)), cache: false, dataType: "json", timeout: 30000, success: function(data) { if (parseInt(data) == -1) { alert('已存在相同名称的目录！'); return; } if (parseInt(data) == 0) { alert('对不起，您没有该操作权限！'); return; } node.setText(text); //更新目录内容 }, error: function(xhr, st, err) { alert("请求失败（" + err + "），请稍后再试！"); return; } }); } }); } MyTree.delNode = function(node) { if (!node) { alert("请选择树目录"); return false; } if (parseInt(node.id) == 0) { alert("不能删除根目录！"); return false; } Ext.MessageBox.confirm("请确认", "真的要删除这个的目录？", function(button, text) { if (button == "yes") { $.ajax({ type: "GET", url: dirDelUrl + node.id, cache: false, dataType: "json", timeout: 30000, success: function(data) { if (parseInt(data) == -1) { alert("对不起，您没有该操作权限！"); return false; } node.remove(); return true; }, error: function(xhr, st, err) { alert("请求失败（" + err + "），请稍后再试！"); return false; } }); } }); } //访问设置 MyTree.setNode = function(node){ if (!node) { alert("请选择树目录"); return false; } if (parseInt(node.id) == 0) { alert("对不起，不能设置根目录权限！"); return false; } window.open(right_page + node.id + '/3', '权限设置窗口'); } MyTree.rightmenulevel1 = function(node, event) { var menu = new Ext.menu.Menu({ id: 'tv' + node.id, items: [ { id: 'level1' + node.id + '2', text: '新增子目录', handler: function() { MyTree.addNode(node); } }, { id: 'level1' + node.id + '3', text: '重名名', handler: function() { MyTree.renameNode(node); } }, { id: 'level1' + node.id + '5', text: '删除', handler: function() { MyTree.delNode(node); } }, { id: 'level1' + node.id + '8', text: '权限', handler: function() { MyTree.setNode(node); } } ] }); menu.showAt(event.getXY()); return menu; } MyTree.rightmenulevel3 = function(node, event) { var menu = new Ext.menu.Menu({ id: 'tv' + node.id, items: [ { id: 'level3' + node.id + '4', text: '重名名', handler: function() { MyTree.renameNode(node); } }, { id: 'level3' + node.id + '5', text: '删除', handler: function() { MyTree.delNode(node); } }, { id: 'level3' + node.id + '8', text: '权限', handler: function() { MyTree.setNode(node); } } ] }); menu.showAt(event.getXY()); return menu; }

 

 

 

    这个代码实现了增删改，并且点击展开图标加载下一级目录的功能。

 

  如果你想直接定位一个目录并且这个目录是一部加载的，怎么办？

 

  解决方案：

    1.在controller里返回这么一组json：

    var dirIDs = SerializationHelper.ReaderJson<IList<IndentityName>>(DMSFacade.GetDirRoute(id)).Select(idn => Convert.ToInt32(idn.ID)).OrderBy(i => i); var dirListMore = new ExtTree() { id = 0, text = "根目录" }; var tempList = dirListMore.children; ExtTree tempParent = dirListMore; int index = 1; //一个目录树的表达式lambda实现 foreach (var dirid in dirIDs) { if (dirid == 0) { dirListMore.children = EnumToList(DMSFacade.GetDirListByParentID(dirid).Select(d => new ExtTree { id = d.DIR_ID, text = d.DIR_TITLE })); } else { if (index < dirIDs.Count()) { //tempList = dirListMore.children.First(ch => ch.id == dirid); tempParent = tempParent.children.First(ch => ch.id == dirid); tempList = EnumToList(DMSFacade.GetDirListByParentID(dirid).Select(d => new ExtTree { id = d.DIR_ID, text = d.DIR_TITLE })); tempParent.children = tempList; } } ++index; } //权限判断 IList<ExtTree> dirsReal = new List<ExtTree>(); foreach (ExtTree dir in dirListMore.children) { if (isAllRightUser(dir.id.ToString(), 1)) { dirsReal.Add(dir); } } return Json(dirsReal);

 

 

 

    2. 在ext树里边添加这么一个代码：

 

     var first_load = function(in_node) { if (in_node.hasChildNodes()) { return; } //加载下级目录 $.ajax({ type: "GET", url: dirInfoList + children_id, cache: false, dataType: "json", timeout: 30000, success: function(r_data) { $.each(r_data, function(i, dir) { var root_leaf = new Ext.tree.AsyncTreeNode({ text: dir.text, //dir.DIR_TITLE, id: dir.id, //dir.DIR_ID, qtip: dir.text, //dir.DIR_TITLE, children: dir.children }); in_node.appendChild(root_leaf); }); in_node.leaf = false; in_node.expand(false, true); in_node.expandChildNodes(true); }, error: function(xhr, st, err) { alert("请求失败（" + err + "），请稍后再试！"); return; } }); } var load_dirs = function(node) { if (node.hasChildNodes()) { return; } //加载下级目录 $.ajax({ type: "GET", url: dirListUrl + node.id, cache: false, dataType: "json", timeout: 30000, success: function(r_data) { var root_leaf = ''; $.each(r_data, function(i, dir) { root_leaf = new Ext.tree.AsyncTreeNode({ text: dir.text, //dir.DIR_TITLE, id: dir.id, //dir.DIR_ID, qtip: dir.text, //dir.DIR_TITLE, children: [] }); node.leaf = false; node.appendChild(root_leaf); node.expand(false, true); }); if (tree.getNodeById(children_id) != undefined) { tree.getNodeById(children_id).select(); } }, error: function(xhr, st, err) { alert("请求失败（" + err + "），请稍后再试！"); return; } }); }; 

 

    往哪里放这些代码？你自己决定了！

 

    再看看你的树，是不是能够在加载的时候就自动展开到你想要的节点，然后把它选中呢？

 

 

 

 

    好了，就说到这里了。以后又什么补充的，我会直接以回复的形式追加。