使用存储过程按需加载 JSTree答案

【问题标题】：Loading a JSTree on demand with Stored Procedures使用存储过程按需加载 JSTree
【发布时间】：2012-06-02 02:03:04
【问题描述】：

目前，我在 SQL Server 中有两个存储过程来处理从数据库中检索树：
当您传入一个级别编号时，第一个检索特定级别的所有节点。
另一个在传入 Level、Left 和 Right 值时检索特定节点的子节点。

我正在使用 MVC 3。
理想情况下，我想设置 JSTree 以在每次用户单击展开节点时调用数据库。因此，我不想将整个树加载到服务器上的 Json 模型中，然后将其传递给 JSTree，而是只传递用户单击的特定节点的子节点。这将发生在每个节点上，因此只有直接节点的子节点必须被传递到 JSTree 而不是整个树。

这可能吗？如果是这样，我将不胜感激（特别是）视图的一些示例代码，可能还有使用 Microsoft 的 MVC 3 框架的控制器。如有任何帮助，我将不胜感激。

【问题讨论】：

我想我对自己的问题有一个理论上应该可行的答案。我编写了一个递归方法，将整个树填充到 Json 对象中，然后将其发送到 jstree 进行渲染。这样可行。因为你真的只需要在树中填充父节点和子节点，我想我可以让树最初只构建两个级别。之后，我可以使用被点击的节点从 jstree 对服务器上的操作方法进行 Json 调用。我可以使用该节点 ID，找出它的级别，为其添加 1 级（为其子级），然后将树填充到更高的 2 级。
是否可以通过 ajax 调用重新渲染具有 2 个以上级别的树，或者这会导致 jstree 出现问题？换句话说，如果 jstree 第二次发送一个 json 对象列表，它会自动销毁第一个并重新创建一个新对象吗？非常感谢您的建议！

标签： javascript jquery json asp.net-mvc-3 jstree

【解决方案1】：

是的，这是可能的，使用 jstree 实际上非常简单。

您想要做的是使用json_data jstree 插件的ajax 参数，但是设置它以便data 或url 参数传递一个函数，该函数将发送哪个节点ID已扩展，以便您的 Web 服务可以调用您的存储过程并返回所选节点的子节点的数据。

这是http://www.jstree.com/documentation/json_data 中的一个示例，稍作修改：

$("#tree").jstree({ 
  "json_data" : {
     "ajax" : {
       "url" : "/yourwebservice/getnodechildren",
       "data" : function (node) { 
           //this is passed the node being opened
           //or -1 if it's the root node

           var dataToPass = {};

           if (node === -1) {
              //pass parameters to the webservice that will build and return
              //first two tree levels

              dataToPass = { 
                id : 0,
                initialLoad: true
              }; 
           }

           if (node.attr && node.attr("id") {
               dataToPass = {
                 id: node.attr("id"),
                 initialLoad: false
               }
           }

           return dataToPass;

        },
        "success" : function (dataFromWebservice) {
            //depending on how the webservice returns
            //data you may need to do this
            return dataFromWebservice.d;
        }
      }
    },
"plugins" : [ "themes", "json_data" ]
});

您可以使这段代码更加优雅，但这就是要点。这将允许您按需构建树，而不是一次全部构建。

如果您的 web 服务设置为在 url 上传递参数，只需将 url 设为函数并使用它来使用节点的 id 或您需要的任何其他参数来构建您的 url 请求。

【讨论】：