Kích thước tập tin. 6. 07 KBViews Tổng cộng. 10292Cập nhật lần cuối. 19/02/2019 00. 22. 00 UTC Ngày Xuất bản. 18/02/2019 01. 35. 51 UTCTrang web chính thức. Tới trang webGiấy phép. MIT
Tải xuống bản trình diễn
Thêm trong danh mục này
Xem các plugin được đề xuất
TOP 100 Plugin jQuery 2022
Chrome, IE9+, FireFox, Opera, Safari#XML
Plugin SimpleXML jQuery tự động định dạng và hiển thị dữ liệu XML của bạn ở định dạng dạng xem dạng cây có thể thu gọn để dễ đọc hơn
Người dùng của bạn có thể thu gọn và mở rộng các nút bằng cách nhấp/nhấn vào các mũi tên. Đánh dấu cú pháp cũng được hỗ trợ
Làm thế nào để sử dụng nó
1. Chèn các tệp JavaScript và CSS của plugin jQuery SimpleXML vào trang
2. Tạo phần tử vùng chứa để đặt dữ liệu XML được định dạng
3. Gọi hàm trên phần tử vùng chứa và chỉ định đối tượng XML để định dạng
var xml = "Hello fd";
$["#simpleUseCase"].simpleXML[{ xmlString: xml }];
4. Chỉ định ký tự sẽ được hiển thị khi nút bị thu gọn. Mặc định là '. '
$["#simpleUseCase"].simpleXML[{ xmlString: xml, collapsedText: "..." }];
Nhật ký thay đổi
2019-02-19
- Bổ sung hỗ trợ cho các thuộc tính
Plugin jQuery tuyệt vời này được phát triển bởi borsuksoftware. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức
CoronaVirus Hàng triệu người chết trên thế giới Bởi Editor, Example Press Ấn Độ Thứ ba ngày 2 tháng 6 năm 2020 8. 28 ISTĐây là bài viết thứ hai trong loạt bài tôi đã viết để thảo luận về những vấn đề thú vị mà tôi gặp phải trong thời gian thực tập.
Bài đăng này bao gồm
- Hiển thị dữ liệu XML được thụt lề trong HTML
div
không có bất kỳ thư viện nào - Thêm chức năng 'Tìm' và đánh dấu văn bản đã tìm kiếm
Và nếu bạn đang cố gắng đạt được điều gì đó tương tự và đang vật lộn với nó, thì bạn đang ở đúng nơi. Hãy nhảy ngay vào VUI VẺ
Vấn đềYêu cầu 1.
Giả sử chúng ta muốn hiển thị nguyên trạng XML bên dưới, trong một số thành phần giao diện người dùng [phương thức, lưới, div, v.v. ] và bạn đang nhận XML này từ một dịch vụ back-end REST [của tôi là trong Java]. Yêu cầu này khá phổ biến ở các công ty làm việc với dữ liệu XML khổng lồ và của tôi là một. Chúng tôi sẽ làm điều này mà không cần sử dụng bất kỳ thư viện in đẹp nào ở mặt trước.
Bạn có thể thấy điều này quá dễ dàng và đúng như vậy — có rất nhiều bài đăng trên stackoverflow. Nhưng có một bước ngoặt. Tôi có một yêu cầu bổ sung không chỉ đơn giản là phù hợp với điều này [Tôi sẽ thảo luận về nó sau].
Vì tôi đã sử dụng Java nên tôi sẽ thảo luận về back-end trong Java nhưng bạn cũng có thể dễ dàng tìm thấy các lớp tương tự trong ngôn ngữ phía máy chủ của mình.
Để đơn giản hiển thị XML này trong giao diện người dùng của chúng tôi, chúng tôi có thể
- Gửi dữ liệu XML được định dạng dưới dạng chuỗi từ dịch vụ Java. Tôi đã in chuỗi XML đẹp bằng cách sử dụng lớp
XMLOutputter
trong Java - Giả sử bạn có dữ liệu XML được lưu trữ trong một đối tượng
Document
. Nếu bạn là mộtString
, hãy tạo mộtDocument
trước tiên bằng cách sử dụngDocument
trước tiên
Tạo tài liệu từ chuỗi XML và sau đó định dạng nó
- Trong mã Angular của chúng tôi, chúng tôi tạo một dịch vụ đưa ra các yêu cầu trực tiếp đến máy chủ bằng cách sử dụng mô-đun
XMLOutputter
0 bao bọc chuỗi XML của chúng tôi
ứng dụng. dịch vụ. ts
- Tiếp theo, trong thành phần Angular tương ứng, chúng ta cần gọi
XMLOutputter
1 trên observable được trả về bởi phương thứcXMLOutputter
2. Chúng tôi đưa một phiên bảnXMLOutputter
3 vào thành phần này.
[Tôi biết đây là tất cả những điều cơ bản, nhưng sẽ không hại gì khi thảo luận về các bước chi tiết] 🙈
ứng dụng. thành phần. ts
- Trong tệp HTML tương ứng, tôi đã tạo một
XMLOutputter
4 [bạn có thể có nó theo trường hợp sử dụng của mình] và trong các kiểu CSS- thêmXMLOutputter
5 vàoXMLOutputter
4 cùng với các kiểu khác. Đây là phải. Xem bên dưới
Mẫu HTML và kiểu CSS
Và Voila. Chúng tôi có nó làm việc
Hiển thị dữ liệu XML thụt lề trong ứng dụng web
Càng xa càng tốt. Nhưng ở đây có sự thay đổi
vấn đề mở rộngYêu cầu 2.
Ngoài việc hiển thị XML theo phương thức, yêu cầu của tôi là cung cấp chức năng 'Tìm' nơi người dùng tìm kiếm bất kỳ chuỗi nào và chuỗi đó sẽ được đánh dấu trên màn hình [một trường hợp sử dụng rất phổ biến nữa .
Điều này có thể được thực hiện bằng cách sử dụng ống góc.
Các đường ống góc lấy dữ liệu làm đầu vào, chuyển đổi nó thành đầu ra mong muốn và hiển thị cho người dùng. Chúng có thể được sử dụng trong bất kỳ mẫu nào [HTML]
Như trước đây, có rất nhiều bài đăng trực tuyến nhưng tôi phải kết hợp hai yêu cầu này vào dự án của mình — hiển thị XML được làm đẹp và cho phép tìm kiếm mẫu cho cùng một.
Trước khi thảo luận về giải pháp, một điều quan trọng- Làm nổi bật văn bản được tìm kiếm có nghĩa là tìm kiếm chuỗi đầu vào trong chuỗi XML và thay đổi nền của nó thành màu vàng [hoặc bất kỳ thứ gì khác] trong HTML tương ứng. Chúng tôi dự định sửa đổi HTML của div
chứa XML và do đó, chỉ thực hiện XMLOutputter
8 sẽ không hiệu quả. Bởi vì ngay cả khi chúng ta bao quanh chuỗi đã tìm kiếm trong XMLOutputter
9 với các thẻ Document
0, thì chuỗi đã sửa đổi sẽ được hiển thị nguyên trạng với các thẻ HTML trong đó. Và do đó, chúng tôi yêu cầu tài sản Document
1 của div
.
Hãy thử. Chúng tôi thêm tính năng 'tìm' như sau
- Tạo một
Document
3pipe nơi chúng tôi thực hiện tìm kiếm Regex và thay thế các chuỗi phù hợp bằng các thẻDocument
4 xung quanh chúng. Đây làDocument
5pipe
Document
6- Áp dụng đường ống này cho
Document
7 trong mẫu của thành phần. Chúng tôi lấy chuỗiDocument
8 làm đầu vào từ người dùng và liên kết hai chiều bằng cách sử dụngDocument
9. Đừng quên khởi tạoDocument
8 thành một chuỗi rỗng
ứng dụng. thành phần. ts
Hãy xem đầu ra
Demo tính năng tìm kiếm và đánh dấu
Lạ nhỉ? .
Where are the XML tags? All we see are the values inside them.
Và khi chúng tôi nhập truy vấn tìm kiếm, một số XML gốc có thể có mẫu này được đánh dấu [một lần nữa, lạ. ]
Lưu ý đầu ra Bảng điều khiển trong Công cụ dành cho nhà phát triển
Cách ngăn chặn cross-site scripting [XSS] của Angular
Chúng tôi không thể xem dữ liệu XML vì Angular nhận ra đó là mã độc được đưa vào DOM. Đọc thêm về các biện pháp bảo vệ tích hợp sẵn của Angular chống lại cross-site scripting [XSS].
Nếu bạn tìm kiếm về cảnh báo này, sẽ có nhiều bài đăng đề xuất sử dụng String
1 để vượt qua bảo mật. Và tôi cũng đã thử điều đó.
Sử dụng DomSanitizer trong tìm kiếm nổi bật. ts
Đây là kết quả
Không hoạt động. 😞
Dữ liệu XML được hiển thị chính xác khi tải, nhưng khi tìm kiếm, nó lại hiển thị hành vi lạ. Tin tôi đi, tôi đã chơi rất nhiều và thử mọi thứ có thể nhưng dường như không có gì hiệu quả.
Sau rất nhiều nỗ lực, tôi đã tìm ra một cách thỏa mãn cả hai yêu cầu của mình [hiển thị đúng XML & sử dụng String
2].
Bây giờ, không có cách nào Angular cho phép chúng tôi bỏ qua bảo mật và hiển thị đúng XML khi được chuyển vào thuộc tính String
2. Và nếu không có String
2, chúng tôi không thể sửa đổi HTML của XMLOutputter
4[như đã giải thích ở trên] dựa trên kết quả tìm kiếm.
Nếu bằng cách nào đó chúng ta có thể chuyển chuỗi chứa XML ẩn tới thuộc tính Document
1 sao cho Angular không biết nó có đánh dấu, thì chúng ta đã hoàn thành.
Điều này có thể đạt được bằng cách thoát các ký tự XML trong Chuỗi. Vì vậy, chúng tôi chuyển Document
7 đã thoát cho trình duyệt String
8 nhận ra nó dưới dạng các ký tự XML và hiển thị chính xác. Điều này có thể được thực hiện ở mặt trước hoặc mặt sau và có thể được thực hiện theo nhiều cách khác nhau. Dưới đây là một số cách nó được thực hiện ở phía máy chủ