Eine kurze Diskussion über die Verarbeitung von Baumlistenbedingungen und Abfragebedingungen durch das BootstrapTable+jstree-Plug-in

In diesem Artikel erfahren Sie, wie Sie mit Baumlistenbedingungen und Abfragebedingungen umgehen, wenn Sie das BootstrapTable-Tabellen-Plug-in und das jstree-Baumlisten-Plug-in in Bootstrap verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

In meinem Boosttrap-Framework müssen an vielen Stellen das BootstrapTable-Tabellen-Plug-In und das JStree-Tree-List-Plug-In verwendet werden, um gemeinsam eine gemeinsame Abfrageschnittstelle zu erstellen. Das BootstrapTable-Tabellen-Plug-In wird hauptsächlich zum Realisieren von Datenpaging und Tabellenanzeige verwendet , während jstree Das Baumlisten-Plug-in wird verwendet, um eine Baumliste zur schnellen Klassifizierung und Abfrage anzuzeigen. In vielen Fällen kann die Kombination der beiden eine bessere Benutzererfahrung erzielen.

In diesem Aufsatz wird die Verarbeitung von Baumlistenbedingungen und Abfragebedingungen bei Verwendung des BootstrapTable-Tabellen-Plug-Ins und des Jstree-Baumlisten-Plug-Ins im Bootstrap-Entwicklungsframework vorgestellt. Dies bedeutet, dass die Paging-Bedingungsinformationen auch schnell angezeigt werden können aktualisiert werden. [Verwandte Empfehlungen: „Bootstrap-Tutorial“]

1. Verwendung des BootstrapTable-Tabellen-Plug-Ins und des Jstree-Tree-List-Plug-Ins

---

BootstrapTable-Table-Plug-In und Jstree-Tree-List-Plug-In werden ebenfalls häufig gesehen in der Schnittstelle, die sie kombiniert, um Daten anzuzeigen, wie unten gezeigt.

Und bei der Auswahl der Benutzerinformationsseite müssen Benutzer auch nach Bedingungen gefiltert werden.

Der Anzeige der Benutzeroberfläche nach zu urteilen, kann die Kombination beider zwar sehr praktisch sein, aber bei der Verwendung muss besonders auf die Verarbeitung verwandter Attribute geachtet werden, da sonst alle Datensätze im Paging angezeigt werden.

Der Code für die Standard-Paging-Abfrage lautet wie folgt.

Der Bindungsoperationscode der Standardattributliste lautet wie folgt.

//绑定左侧树形列表
        //如果update为True，则重新更新缓存
        function initJsTree(update) {
            var baseUrl = "/Apply/GetMyApplyJson?r=" + Math.random();
            var url = update ? baseUrl + "&update=true" : baseUrl;
            bindJsTree("jstree_div", url);

            //树控件的变化事件处理
            $('#jstree_div').on("changed.jstree", function (e, data) {
                var icon = data.node.icon;
                loadData(data.selected);
            });
        }

Standardmäßig wird die Paging-Abfragesteuerung durch Bedingungen neu aktualisiert, die von der Baumliste ausgelöst werden, oder basierend auf Bedingungen, wie unten gezeigt.

//加载指定的对象数据
        var clickId = "";
        function loadData(id) {
            var condition = { CustomedCondition: id + '' };

            //修改条件后需要重新刷新
            $table.bootstrapTable('refresh', { url: queryUrl, query: condition, pageNumber:1});
            clickId = id;
        }

Wenn dies jedoch nur die Verarbeitung ist, werden beim Paging der Daten durch Klicken auf die nächste Seite die Baumlistenbedingungen gerade nicht aufgezeichnet. Dann müssen wir die ausgewählten Baumbedingungen aufzeichnen, damit wir sie beim Aktualisieren der Bedingungen hinzufügen können Geben Sie die erforderlichen Bedingungen ein und ändern Sie dann den obigen Code in den folgenden Code.

//加载指定的对象数据
        var clickId = "";
        var where = {};//树列表条件
        function loadData(id) {
            var condition = { CustomedCondition: id + '' };
            where = {};//清空
            where["CustomedCondition"] = id + '';//使用自定义条件

            //修改条件后需要重新刷新
            $table.bootstrapTable('refresh', { url: queryUrl, query: condition, pageNumber:1});
            clickId = id;
        }

Nach der Verarbeitung auf diese Weise können wir die Verarbeitung dieser Bedingung im Bedingungsverarbeitungsteil des BootstrapTable-Plug-Ins hinzufügen.

Nachdem wir die Bedingungen im roten Feld hinzugefügt haben, erhalten wir die richtigen Ergebnisse, wenn wir Paging auswählen, was keine Inkompatibilität zwischen den beiden Bedingungen verursacht. Gleichzeitig kehren wir zu den Bedingungen zurück die erste Seitenzahl.

Und wo die Bedingungen unserer Attributliste gespeichert sind, die im JSON-Modus gespeichert sind, können Sie bei Bedarf die von Ihnen benötigten Paging-Bedingungen hinzufügen, z. B. meine anderen Auswahlbedingungen für die Benutzeroberfläche. Sie können den folgenden angezeigten Code verwenden.

Die Seitenanzeige und die bedingte Klassifizierungsbaumanzeige der Prozessvorlage lauten beispielsweise wie folgt.

Zum Beispiel sehen die Baumliste und die Datenanzeigeschnittstelle eines der Menüs wie folgt aus.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Verarbeitung von Baumlistenbedingungen und Abfragebedingungen durch das BootstrapTable+jstree-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!