2013-12-09 5 views
6

मैं अपने वेबपृष्ठ में पदानुक्रमित डेटा लोड करने के लिए केंडो यूआई ट्री व्यू का उपयोग कर रहा हूं। डिफ़ॉल्ट रूप से, मैं 3 स्तर तक डेटा लोड कर रहा हूं (यानी रूट -> रूट निर्देश -> रूट निर्देश 'निर्देश)। मुझे शेष नोड्स को आलसी लोड करने का एक तरीका चाहिए क्योंकि उपयोगकर्ता पेड़ के नीचे आगे बढ़ता है। साथ ही, पहले से ही प्राप्त किए गए डेटा को पहले से विस्तारित नोड्स के लिए अनावश्यक कॉल से बचने के लिए स्थानीय रूप से कैश किया जाना चाहिए। मैं केंडो यूआई के लिए नया हूं और दस्तावेज के माध्यम से जाने के लिए पर्याप्त समय नहीं है। जेसनकैंडो यूआई वृक्षदृश्य में आलसी लोड

{ 
     Id: '1', 
     ParentId: '-1', 
     Payload: {... } 
     Children: [ 
      Id: '2', 
      ParentId: '1', 
      PayLoad: {...}, 
      Children: [{...}] 
      ] 
      .... 
    } 

कोई कोड नमूने को इंगित कर सकता है? केंडो द्वारा बॉक्स में से कितना उपरोक्त समर्थित है?

अग्रिम धन्यवाद।

उत्तर

8

वह कार्यक्षमता बॉक्स कॉन्फ़िगरेशन के बाहर समर्थित नहीं है, लेकिन एक कस्टम परिवहन के माध्यम से हासिल की जा सकती है। यहां दिए गए हाइब्रिड डेटा स्रोतों को बनाने का तरीका बताया गया है जो आइटम उपलब्ध होने पर localData सरणी के साथ काम करते हैं, और अन्यथा सर्वर से अनुरोध करते हैं।

var localData = [ 
 
    { id: 1, text: "Node 1", hasChildren: true, items: [ 
 
    { id: 101, text: "Node 1.1", hasChildren: true, items: [ 
 
     { id: 10101, text: "Node 1.1.1" } 
 
    ] } 
 
    ] }, 
 
    { id: 2, hasChildren: true, text: "Node 2" }, 
 
    { id: 3, hasChildren: true, text: "Node 3" } 
 
]; 
 

 
function get(data, id) { 
 
    if (!id) { 
 
    return data; 
 
    } else { 
 
    for (var i = 0; i < data.length; i++) { 
 
     if (data[i].id == id) { 
 
     return data[i].items; 
 
     } else if (data[i].items) { 
 
     var result = get(data[i].items, id); 
 
     if (result) return result; 
 
     } 
 
    } 
 
    } 
 
} 
 

 
var homogeneous = new kendo.data.HierarchicalDataSource({ 
 
    transport: { 
 
    read: function (options) { 
 
     var id = options.data.id; 
 
     var data = get(localData, id); 
 
     if (data) { 
 
     options.success(data); 
 
     } else { 
 
     // mock call to server with static data 
 
     // you can use $.ajax() and call options.success(data) on success 
 
     setTimeout(function() { 
 
      options.success([ 
 
      { id: id + 1, text: "Remote node 1", hasChildren: false }, 
 
      { id: id + 2, text: "Remote node 2", hasChildren: true } 
 
      ]); 
 
     }, 1000); 
 
     } 
 
    } 
 
    }, 
 
    schema: { 
 
    model: { 
 
     id: "id" 
 
    } 
 
    } 
 
}); 
 

 
$("#tree").kendoTreeView({ 
 
    dataSource: homogeneous 
 
});
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" /> 
 
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" /> 
 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script> 
 
<div id="tree"></div>

+0

धन्यवाद सिकंदर! यह एक अच्छा प्रारंभिक बिंदु देता है। – prthrokz

+0

क्या आप अपना समाधान पोस्ट कर सकते हैं? मैं उन जेएसबीन सुझाव से काम कर रहा हूं और दिनों के लिए अभी भी दूसरा स्तर नहीं मिल सकता है। कृप्या। – Amanda

0

कुछ और काम करने के बाद, मैं इस काम मिल गया। मुझे अभी भी यकीन नहीं है कि स्थानीय डेटा वैरिएबल की आवश्यकता क्यों है, क्योंकि एक बार नोड पहले से ही मौजूद होने के बाद केंडो ट्रीव्यूव इसका उपयोग नहीं कर रहा है। यहां मेरा समाधान है:

<div id="treeview"> </div> 

<script> 
    var serviceRoot = "http://<local name>:58754/api/"; 

    var localData; 

    $(document).ready(function() {   

     var homogeneous = new kendo.data.HierarchicalDataSource({ 
      transport: { 
       read: function (options) { 
        if (typeof options.data.ID != 'undefined') { 
         var id = options.data.ID; 
         var data = getNextLevel(localData, id); 
         if (data) { 
          options.success(data); 
         } else { 
          var currentnode = get(localData, id); 
          if (currentnode.Level == 1) { 
           $.ajax({ 
            url: serviceRoot + "tree", 
            data: 'ID=' + currentnode.ID + '&Level=' + currentnode.Level, 
            type: "Get", 
            success: function (result) { 
             setTimeout(function() { 
              var res = result; 
              addToLocalData(localData, res, currentnode.ID); 
              options.success(res); 
             }, 1000); 

            }, 
            error: function (result) { 
             options.error(result); 
            } 
           }); 
          } else { 
           if (currentnode.Level == 2) { 
            $.ajax({ 
             url: serviceRoot + "tree", 
             data: 'ID=' + currentnode.ID + '&Level=' + currentnode.Level, 
             type: "Get", 
             success: function (result) { 
              setTimeout(function() { 
               var res = result; 
               addToLocalData(localData, res, currentnode.ID); 
               options.success(res); 
              }, 1000);            
             }, 
             error: function (result) { 
              options.error(result); 
             } 
            }); 
           } 
          } 
         } 
        } 
        else { 
         $.ajax({ 
          url: serviceRoot + "tree", 
          data: 'ID='+ null +'&Level='+ null, 
          type: "Get", 
          success: function (result) { 
           setTimeout(function() { 
            options.success(result); 
           }, 1000); 
           localData = result; 
          }, 
          error: function (result) { 
           options.error(result); 
          } 
         }); 
        } 
       } 
      }, 
      schema: { 
       model: { 
        id: "ID", 
        hasChildren: "HasChildren" 
       } 
      } 
     }); 
     $("#treeview").kendoTreeView({ 
      dataSource: homogeneous, 
      dataTextField: "Name" 
     }); 
    });  

    //Checks if nodes are already in the tree and returns it if it does 
    function getNextLevel(data, id) { 
     if (!id) { 
      return data; 
     } else { 
      for (var i = 0; i < data.length; i++) { 
       if (data[i].ID == id) { 
        return data[i].Items; 
       } else if (data[i].Items) { 
        for (var j = 0; j < data[i].Items.length; j++) { 
         if (data[i].Items[j].ID == id) { 
          return data[i].Items[j].Items; 
         } 
        } 
       } 
      } 
     } 
    } 

    //Get Tree object for a given ID 
    function get(data, id) { 
     if (id) { 
      for (var i = 0; i < data.length; i++) { 
       if (data[i].ID == id) { 
        return data[i]; 
       } 
       else if (data[i].Items) { 
        for (var j = 0; j < data[i].Items.length; j++) { 
         if (data[i].Items[j].ID == id) { 
          return data[i].Items[j]; 
         } 
        } 
       } 
      } 
     } 
     return null; 
    } 

    //Add newly read nodes to cached tree 
    function addToLocalData(localdata, data, id) { 
     if (!id) { 
      return localdata; 
     } else { 
      for (var i = 0; i < localdata.length; i++) { 
       if (localdata[i].ID == id) { 
        localdata[i].Items = data; 
        return; 
       } else { 
        if (localdata[i].Items) { 
         for (var j = 0; j < localdata[i].Items.length; j++) { 
          if (localdata[i].Items[j].ID == id) { 
           localdata[i].Items[j].Items = data; 
           return; 
          } 
         } 
        } 
       } 
      } 
     } 
    } 

</script> 

मैं 3 टेबल से मूल्यों को ट्री ऑब्जेक्ट में पढ़ने के लिए संग्रहीत प्रक्रिया का उपयोग कर रहा हूं।

public class Tree 
{ 
    public Guid ID { get; set; } 
    public string Name { get; set; } 
    public bool HasChildren { get; set; } 
    public int Level { get; set; } 
    public IEnumerable<Tree> Items { get; set; } 
} 

और मेरे संग्रहित प्रक्रिया:: यहाँ ट्री वस्तु के लिए कोड है

ALTER PROCEDURE [dbo].[GetTreeItems] 
@ID uniqueidentifier, @CurrentLevel int 

के रूप में सेट NOCOUNT पर शुरू;

if @CurrentLevel is null 
    select IDStation as ID, StationName as Name, null as IDParent, 1 as [Level] , 
    case when (select COUNT(*) from Unit where Unit.IDStation = Station.IDStation) > 0 then 1 else 0 end as HasChildren 
    from Station 
    order by [Level], Name 
--union 

else if @CurrentLevel = 1 
    select IDUnit as ID, UnitName as Name, Station.IDStation as IDParent, 2 as [Level], 
    case when (select COUNT(*) from Component where Component.IDUnit = Unit.IDUnit) > 0 then 1 else 0 end as HasChildren 
    from Unit inner join Station on Station.IDStation = Unit.IDStation 
    where Station.IDStation = @ID 
    order by [Level], Name 
--union 

if @CurrentLevel = 2 
    select IDComponent as ID, ComponentName as Name, Unit.IDUnit as IDParent, 
    3 as [Level], 0 as HasChildren 
    from Component inner join Unit on unit.IDUnit = Component.IDUnit 
    where Unit.IDUnit = @ID 
    order by [Level], Name 

अंत

संबंधित मुद्दे