Question

我第一次使用jstree和asp.net mvc 4，实体framwork 6.1代码。

我将表格i数据库设为Categories

CategoryId        Name         CreatedDate          ParentId
1               category    2014-05-06 19:00:20.107     0
2               Category1   2014-05-06 19:00:20.107     1
3               Category2   2014-05-06 19:00:20.107     1

我将jstree与此表绑定为

我的分类控制器代码是

 public JsonResult GetList(int id = 0)
        {
            var objList = GetTreeVeiwList();
           return Json(objList, JsonRequestBehavior.AllowGet);
        }

public List GetTreeVeiwList（） {

        var rootNode = (from e1 in _CategoriesBusiness.Select()
                        where e1.ParentId == 0
                        select new TreeViewNodeVM()
                        {
                            id =Convert.ToString(e1.CategoryId),
                            text = e1.Name
                        }).ToList();
        BuildChildNode(rootNode);

        return rootNode;
    }

    public JsonResult SaveChanges(string ar)
    {
        var data = new JavaScriptSerializer().Deserialize<string[]>(ar);
        Categories objCategories=null;
        foreach (var a in data)
        {
            var ab = a.Split(' ');
             objCategories=new Categories();
             int tempCategoryId;
             if (int.TryParse(ab[1], out tempCategoryId))
             {
                 objCategories.CategoryId = tempCategoryId;

                 var objcat=(from cat in _CategoriesBusiness.Select() where cat.CategoryId==tempCategoryId select cat).FirstOrDefault();
                 if (objcat != null)
                 {
                     objcat.Name = ab[0].Trim();
                     int tempParantId;
                     if (int.TryParse(ab[2], out tempParantId))
                     {
                         objcat.ParentId = tempParantId;
                     }
                     _CategoriesBusiness.Update(objcat);
                 }
                 else
                 {
                     objCategories.CategoryId = Convert.ToInt32(ab[1]);
                     objCategories.Name = ab[0];
                     int tempParantId1;
                     if (int.TryParse(ab[2], out tempParantId1))
                     {
                         objCategories.ParentId = tempParantId1;
                     }
                     _CategoriesBusiness.Create(objCategories);
                 }

             }
             else
             {
                 objCategories.Name = ab[0];
                 int tempParantId1;
                 if (int.TryParse(ab[2], out tempParantId1))
                 {
                     objCategories.ParentId = tempParantId1;
                 }
                 _CategoriesBusiness.Create(objCategories);

             }
                        }

        return Json(new { },JsonRequestBehavior.AllowGet);
    }

    private void BuildChildNode(List<TreeViewNodeVM> ListrootNode)
    {
        foreach (TreeViewNodeVM rootNode in ListrootNode)
        {
            if (rootNode != null)
            {
                List<TreeViewNodeVM> chidNode = (from e1 in _CategoriesBusiness.Select()
                                                 where e1.ParentId.ToString() == rootNode.id
                                                 select new TreeViewNodeVM()
                                                 {
                                                     id = Convert.ToString(e1.CategoryId),
                                                     text = e1.Name
                                                 }).ToList<TreeViewNodeVM>();
                if (chidNode.Count > 0)
                {
                    BuildChildNode(chidNode);
                    foreach (var childRootNode in chidNode)
                    {
                        rootNode.children.Add(childRootNode);
                    }

                }
            }
        }
    }

并且查看是：

@*@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@


<link href="../../Content/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../../Content/dist/libs/jquery.js"></script>
<script src="../../Content/dist/jstree.js"></script>
@*<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.6/jquery.min.js" type="text/javascript"></script>*@

<script type='text/javascript' src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>


@model List<Web.ViewModels.TreeModels.TreeViewNodeVM>
@{

    ViewBag.Title = "Index";
}
<h2>
    Categories</h2>

<input type="button" id="btnaddFolder" value="Add new folder" onclick="File_Folder()" />
<input type="button" id="btnaddCat" value="Add new Category" onclick="File_create()" />
<input type="button" id="btnSave" value="Save Changes" onclick="SaveChanges()" />
<input type="button" id="btnCancel" value="Cancel" />

<div id="jstree">

</div> 

  <script>


      function SaveChanges() {
          debugger
          var ar = [];
          var i = 0;
          var arr = "";
          $('#jstree li').each(function () {
              debugger

              var id = $(this).attr('id');
              var text = $(this).find("a:first").text();              

              if ($(this).parent('ul.jstree-children')) {
                  var parent = $(this).parent('ul.jstree-children').parent('li').attr('id');
                  alert(text + " " + id + " " + parent);

                  var item = text + " " + id + " " + parent;
                  ar.push(item);

                  i++;
              }

          });
          arr = JSON.stringify(ar);
          //$('#jstree li.jstree-node').each(function () {

          //    some.push($(this).attr("id"));
          //    // or
          //    //some.push(this.id);
          //});
          debugger;
          $.ajax({
              type: 'post',
              url: "/Category/SaveChanges", data: { ar: arr }, success: function (result) {
                  $("#div1").html(result);
              }
          });

      }

      function AddNewNode()
      {
          File_create();
      }



      $(function () {
          // 6 create an instance when the DOM is ready
          debugger

          $("#jstree").jstree({

              "core": {


                  "animation": 0,
                  "check_callback": true,
                  "themes": { "stripes": true },
                  'data': {

                      'url': function (node) {

                          debugger
                          return node.id === '#' ?
                            '/Category/GetList' : '/Category/GetList1';
                      },
                      'data': function (node) {
                          debugger
                          return { 'id': node.id };
                      }
                  }
              },



              "contextmenu": {
                  "items": function ($node) {
                      var tree = $("#jstree").jstree(true);
                      return {
                          "Create": {
                              //"separator_before": false,
                              //"separator_after": false,
                              "label": "Create",
                              "action": function (data) {
                                  debugger;
                                      File_create();
                                  //var ref = $('#jstree').jstree(true);
                                  //ref.create_node(data);
                              }
                          },
                          "Rename": {
                              "separator_before": false,
                              "separator_after": false,
                              "label": "Rename",
                              "action": function (obj) {
                                  debugger;
                                  tree.edit($node);
                              }
                          },
                          "Remove": {
                              "separator_before": false,
                              "separator_after": false,
                              "label": "Remove",
                              "action": function (obj) {
                                  tree.delete_node($node);
                              }
                          }
                      };
                  }
              },




              "types": {
                  "#": {
                      "max_children": 1,
                      "max_depth": 4,
                      "valid_children": ["root"]
                  },
                  "root": {
                      "icon": "/static/3.0.0/assets/images/tree_icon.png",
                      "valid_children": [],
                      "name":"Folder"
                  },
                  "default": {

                      "valid_children": ["default", "file"]
                  },
                  "file": {
                      "icon": "glyphicon glyphicon-file",
                      "valid_children": []
                  }
              },
              "plugins": [
                "contextmenu", "dnd", "search",
                "state", "types", "wholerow"
              ]


          })


      });


      function File_Folder() {


          debugger
          var ref = $('#jstree').jstree(true),
              sel = ref.get_selected();
          if (!sel.length) { return false; }
          var number = 1 + Math.floor(Math.random() * 10);


          sel = ref.create_node(sel, { "type": "default"});
          if (sel) {
              ref.edit(sel);
          }
      }


      function File_create() {
          debugger
          var ref = $('#jstree').jstree(true),
              sel = ref.get_selected();
          if (!sel.length) { return false; }         

          sel = ref.create_node(sel, { "type": "file"});
          if (sel) {
              ref.edit(sel);
          }
      }
  </script>

它显示如下：

enter image description here

我必须保存Save changes button click数据库中的所有节点CategoryId，Name，ParentId如果存在CategoryId，update不是insert new node

现在如图所示，你可以看到有一个根节点类别，如果我想将这些子节点保存在数据库中，我现在点击leavel1,leavel2,leavel3添加了3个子节点add new folder button { {1}} 这是主要问题：

parentid的父ID为leavel1，因为它确实存在id数据库，Category node parent应该是level2但它在数据库中不存在，我动态创建它（在clint方面）。那么如何设置level1。？

Answer 1

首先将级别1添加到_CategoriesBusiness并在同一次调用中为level2和level3提交相同的内容，因为此时已读取所有数据。

Answer 2

您可以在保存点击事件中设置来自前端的ID。

   $(document).ready(function () {
    var maxId = LastCategoryId();
    jQuery('#dialog').dialog(
        {
            'autoOpen': false,
            title: 'Info',
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });

    $('#categoriesWrapperId')
        .jstree(
        {
            plugins: ["contextmenu", "dnd", "themes"],
            'core': {
                'check_callback': true,
                "themes": {
                    "name": "default"
                }
            }

        });

    $('#categoriesWrapperId').on('ready.jstree', function () {
        $("#categoriesWrapperId").jstree("open_all");
    });

    $("#saveButton").on("click", function () {
        var categoriesArray = new Array();
        var i = 0;
        $('#categoriesWrapperId li').each(function () {

            var id = $(this).attr('id').toString();
            if (id.indexOf("j") >= 0) {
                id = maxId + 1;
                $(this).attr('id', id);
                maxId = maxId + 1;
            }

            var text = $(this).find("a:first").text().trim();

            if ($(this).parent('ul.jstree-children')) {
                var parentId = $(this).parent('ul.jstree-children').parent('li').attr('id');
                var category = { id: id, name: text, parentId: parentId, createdDate: Date.now }

                categoriesArray.push(category);

                i++;
            }
        });

        $.ajax({
            type: 'post',
            url: "/Categories/Save",
            data: { categoriesArray: categoriesArray },
            success: function (response) {
                jQuery('#dialog').text(response.Message).dialog('open');
                maxId = response.LastCategoryId;
            }
        });
    });
});

function LastCategoryId() {
    var idsArray = [];
    var i = 0;
    $('#categoriesWrapperId li').each(function () {
        var id = $(this).attr('id').toString();
        idsArray.push(id);
        i++;
    });
    return Math.max.apply(Math, idsArray);
}

maxId =是来自后端的id，总是数据库中最大的id。

如何在点击按钮时保存jstree？

2 个答案: