0

我正在尝试在 JqxTree 上实现搜索，我在 JSON 的帮助下填充数据。

我想以一种方式实现搜索，当我在文本框中输入字符串时，树应该扩展到该组件。

谁能帮我解决这个问题。

以下是我的jsp代码： -

  <link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/demos.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqwidgets/jqxtree.js"></script>
</head>
<body>
    <div id='content' style='float: right;'>

        <script type="text/javascript">

          $(document).ready(function () {

            $('#ExpandAll').jqxButton({ height: '25px', width: '100px'});  
            $('#CollapseAll').jqxButton({ height: '25px', width: '100px'});

            // Expand All
            $('#ExpandAll').click(function () {
                $('#jqxWidget').jqxTree('expandAll');
            });

            //Collapse All
            $('#CollapseAll').click(function () {
                $('#jqxWidget').jqxTree('collapseAll');
            });

            var data = <%=request.getAttribute("data")%>

            // prepare the data
            var source =
             {
                 datatype: "json",
                 datafields: [
                        { name: 'categoryId' },
                        { name: 'parentId' },
                        { name: 'categoryName' },
                    ],
                    id: 'categoryId',
                    localdata: data
              };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);

                // perform Data Binding.
                dataAdapter.dataBind();

                // Get the tree items. 
                //The 1st parameter is the item's id. 
                //The 2nd parameter is the parent item's id. 
                //The 'items' parameter represents the sub items collection name. 
                //Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. 
                //The last parameter specifies the mapping between the 'text' and 'label' fields.  

               var records = dataAdapter.getRecordsHierarchy('categoryId', 'parentId', 'items', [{ name: 'categoryName', map: 'label'}]);
                $('#jqxWidget').jqxTree({ source: records, width: '500px'});
            });
        </script>
       </div> 
        <!-- DIV COMPONENTS -->

        <div style='margin-top: 10px;'>
                    <input type="button" id='ExpandAll' value="Expand All" />
        </div>
        <div style='margin-top: 10px;' >
                    <input type="button" id='CollapseAll' value="Collapse All" />
        </div><br/>
        <div id='jqxWidget'>
        </div>


</body>
</html>

请帮帮我..!! :)

4

1 回答 1

0

这是我实现它的方法

        $("#btnSearchTree").on('click', function () {
                    //Setting current selected item as null 
                    $('#jqxWidget').jqxTree('selectItem', null);

                    //collapsing tree(in case if user has already searched it )
                    $('#jqxWidget').jqxTree('collapseAll');

                    //Using span for highlighting text so finding earlier searched items(if any)
                    var previousHighlightedItems = $('#jqxWidget').find('span.highlightedText');

                    // If there are some highlighted items, replace the span with its html part, e.g. if earlier it was <span style="background-color:"Yellow">Te></span>st then it will replace it with "Te""st"
                    if (previousHighlightedItems && previousHighlightedItems.length > 0) {
                        var highlightedText = previousHighlightedItems.eq(0).html();

                        $.each(previousHighlightedItems, function (idx, ele) {
                            $(ele).replaceWith(highlightedText);
                        });
                    }

                    //Getting all items for jqxTree
                    var items = $('#jqxWidget').jqxTree("getItems");

                    //Getting value for input search box and converting it to lower for case insensitive(may change)
                    var searchedValue = $("#ipSearchTreeText").val().toLowerCase();

                    //Searching the text in items label
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].label.toLowerCase().indexOf(searchedValue) > -1) {

                           //If found expanding the tree to that item
                            $('#jqxWidget').jqxTree('expandItem', items[i].parentElement);

                            //selecting the item : not necessary as it selects the last item if multiple occurrences are found             
                            $('#jqxWidget').jqxTree('selectItem', items[i]);

                            //changing the innerhtml of found item and adding span with highlighted color
                            var itemLabelHTML = $(items[i].element).find('div').eq(0).html();

                            //splitting the item text so that only searched text 
can be highlighted by appending span to it.
                            var splittedArray = itemLabelHTML.split(searchedValue);
                            var highlightedText = '';
                            //if there are multiple occurrences of same searched text then adding span accordingly
                            for (var j = 0; j < splittedArray.length; j++) {
                                if (j != splittedArray.length - 1)
                                    highlightedText = highlightedText + splittedArray[j] + '<span class="highlightedText" style="background-color:yellow">' + searchedValue + '</span>';
                                else
                                    highlightedText = highlightedText + splittedArray[j];

                            }
                            //var highlightedText = splittedArray[0] + '<span style="background-color:yellow">' + searchedValue + '</span>' + splittedArray[1];

        //replacing the item html with appended styled span
        $(items[i].element).find('div').eq(0).html(highlightedText);

                        }
                    };
                });
于 2015-05-04T09:41:07.390 回答