LI未按预期排序

时间:2018-02-14 13:43:43

标签: javascript jquery asp.net kendo-ui kendo-treeview

嗨我离开了侧面导航,它被绑定为$(“#navigation-treeview”)。kendoTreeView如下

     $("#navigation-treeview").kendoTreeView({
        dataSource: {
            transport: {
                read: {
                    url: "@Html.Raw(Url.Action("ListAll", "Knowledgebase"))",
                    dataType: "json",
                    data: function () {
                        var data = {};
                        var tokenInput = $('input[name=__RequestVerificationToken]');
                        if (tokenInput.length) {
                            data.__RequestVerificationToken = tokenInput.val();
                        }
                        return data;
                    }
                }
            },
            schema: {
                model: {
                    id: "SEName",
                    hasChildren: "Children",
                    children: "Children",
                    SEName: "SEName"
                }
            }
        },
        dataTextField: "Text",
        dataSpriteCssClassField: "SpriteCssClass",
        @if (TempData.ContainsKey("Nodes"))
        {
            <text>
                dataBound: expandNavigation([@Html.Raw(TempData["Nodes"])]),
            </text>
        }                    
        select: preventParentSelection,
        template: navigationTemplate()                   
    });
    sortCategyList("k-group");
});
function sortCategyList(ul, sortDescending) {

    if (typeof ul == "string")
        ul = document.getElementsByClassName(ul)[0];
    alert(ul);               
    if (!ul) {                    
        return;
    }

    var lis = ul.getElementsByTagName("li");              
     var lis =ul.querySelectorAll("li");
    var vals = [];

    for (var i = 0, l = lis.length; i < l; i++)
        vals.push(lis[i].innerHTML);

    vals.sort();

    if (sortDescending)
        vals.reverse();

    for (var i = 0, l = lis.length; i < l; i++)
        lis[i].innerHTML = vals[i];
}

这里我要做的是当左侧导航完全通过Kendo UI代码获取字段,然后在我的函数调用之后,并按字母格式左侧导航。

但我放置sortCategyList(“k-group”)的代码;正在给我UL未定义 我希望我的红色突出显示部分按字母排序顺序

enter image description here

我想要它     5甲酰四氢叶酸     蒡     辛酸

ans控制台设计形式为

<ul class="k-group k-treeview-lines" role="group">
  <li role="treeitem" class="k-item k-first" data-uid="d44db53a-44e5-4fac-a099-ca274c56d874" data-expanded="true" aria-expanded="true" id="navigation-treeview_tv_active" aria-selected="true">
    <div class="k-top"><span class="k-icon k-minus" role="presentation"></span><span class="k-in k-state-selected k-state-focused"><span class="k-sprite category"></span><a href="http://localhost:55390/ingredients">Ingredients</a></span>
    </div>
    <ul class="k-group" role="group" style="display: block;">
      <li role="treeitem" class="k-item" data-uid="4b2277d6-2d9d-479a-91bf-9224862ba6c6">
        <div class="k-top"><span class="k-in"><span class="k-sprite article"></span><a href="http://localhost:55390/5-formyl-tetrahydrofolate">5 Formyl Tetrahydrofolate</a></span>
        </div>
      </li>
      <li role="treeitem" class="k-item" data-uid="3666357e-f036-4026-9899-9971b8748a52">
        <div class="k-mid"><span class="k-in"><span class="k-sprite article"></span><a href="http://localhost:55390/caprylic-acid">Caprylic Acid</a></span>
        </div>
      </li>
      <li role="treeitem" class="k-item k-last" data-uid="06064474-0b96-4d6f-9e53-2ce0a2e6986c">
        <div class="k-bot"><span class="k-in"><span class="k-sprite article"></span><a href="http://localhost:55390/burdock">Burdock</a></span>
        </div>
      </li>
    </ul>
  </li>
  <li role="treeitem" class="k-item" data-uid="ad489cf4-c486-4d2d-a0fe-2de68a0ac870">
    <div class="k-mid"><span class="k-icon k-plus" role="presentation"></span><span class="k-in"><span class="k-sprite category"></span><a href="http://localhost:55390/health-conditions">Health Conditions</a></span>
    </div>
  </li>
  <li role="treeitem" class="k-item k-last" data-uid="5b6870b8-75c0-4f0d-9c20-efd67b6fc358">
    <div class="k-bot"><span class="k-icon k-plus" role="presentation"></span><span class="k-in"><span class="k-sprite category"></span><a href="http://localhost:55390/research">Research</a></span>
    </div>
  </li>
</ul>

我认为问题是我的函数调用sortCategyList(“k-group”);在kendoi-ui仍在格式化结构之前

0 个答案:

没有答案