jqGrid - Chèn HTML tùy chỉnh vào ô

Question

Tôi đang cố chuyển đổi một bảng html cũ thành jqGrid. Bảng cũ có một cột chứa các thẻ được xây dựng bằng cách sử dụng một danh sách không có thứ tự và các mục danh sách.

Here is an example (jsfiddle) của bảng trước và sau đó là jqGrid.

Trong ví dụ này, tôi đang sử dụng custom formatter sử dụng jQuery Templates để tạo thành phần DOM và sau đó trình định dạng trả về $ .html() từ các phần tử DOM kết quả.

function getTagCellContents(cellvalue) { 
    var domitems=$("#jqgrid-tag-list-item").tmpl({tags: callvalue}); 
    return domitems.html(); 
} 

Vấn đề tôi có với đây là khoảng trắng được bao gồm trong html kết quả làm cho các hàng quá cao. Điều này cũng dẫn đến các thuộc tính "Tiêu đề" khó xử trên các ô.

Liệu jqGrid có cung cấp API để chèn các đối tượng DOM trực tiếp vào ô thay vì trả về văn bản từ trình định dạng tùy chỉnh không? Thực hành tốt nhất để đặt html tùy chỉnh vào ô jqGrid là gì?

Answer 1

Tôi thấy câu hỏi của bạn rất thú vị và do đó, +1 từ tôi cho câu hỏi.

Vấn đề chính về hiểu biết khi sử dụng trình định dạng tùy chỉnh là: yêu cầu hàm gọi lại trả về đoạn HTML làm chuỗi. Lợi ích của nó là hiệu suất tốt, mà người ta có thể nhìn thấy chủ yếu là trên lưới lớn. Nếu bạn làm việc với các phần tử DOM và sử dụng các cấu trúc như domitems.html(), bạn sẽ không có hiệu suất tốt như vậy.

Vì vậy, trước hết, tôi khuyên bạn nên sử dụng chức năng $.template của Mẫu jQuery. Nó cho phép bạn làm việc với các chuỗi mà không cần sử dụng DOM. Ví dụ: The answer mô tả ý tưởng chính về sửa đổi mã của bạn.

Để khắc phục vấn đề chính của bạn, tôi đề xuất chỉ để loại bỏ \n và không có khoảng cách từ chuỗi. Tôi không RegEx chuyên nghiệp vì vậy tôi đề nghị các giải pháp nhanh chóng và dơ bẩn sau:

// Create and cache a named template function 
$("#jqgrid-tag-list-item").template("cellContents"); 
var tmpl = $.template("cellContents"); // template function 

function getTagCellContents(a) { 
    var strings = tmpl($, {data: {tags: a}}); // array of strings 
    return strings.join('') 
       .replace(/\n+/g,'') 
       .replace(/\s+/g,' ') 
       .replace(/> </g,'><'); 
} 

bản demo jsfiddle của bạn sẽ the following sau khi sửa đổi như vậy.