使用存储过程按需加载JSTree

时间:2012-06-02 02:03:04

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

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

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

这可能吗?如果是这样,我会欣赏视图的一些示例代码(尤其是)以及可能使用Microsoft MVC 3框架的控制器。我很感激任何帮助。

1 个答案:

答案 0 :(得分:2)

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

您要做的是使用ajax jstree插件的json_data参数,但要对其进行设置,以便传递dataurl参数将发送已扩展的节点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请求,或者您需要的其他任何参数。