jqGrid thanh công cụ bộ lọc hiển thị tìm kiếm toán tử chọn chỉ cho một cột

Question

Tôi có bảng jqGrid với nhiều cột. Tìm kiếm trong lưới được thực hiện bằng cách sử dụng thanh công cụ bộ lọc. Đối với hầu hết trong số họ tìm kiếm chỉ là nhà điều hành mặc định đơn giản. Đối với một cột datetime tôi muốn loại khác nhau của các nhà khai thác và bộ chọn datepicker. Tôi đã thêm dataInit khởi tạo datepicker thành searchoptions, các toán tử cần thiết vào searchoptions.sopt. Để hiển thị các toán tử này, tôi đã đặt searchOperators thành true. Vì vậy, cho cột này tất cả là ok. Tôi có datepicker với popup chọn nhà điều hành. Nhưng đối với tất cả các cột khác, biểu tượng toán tử mặc định được hiển thị ở bên trái của nó. Nó là gây phiền nhiễu như là nhà điều hành là mặc định và người dùng không thể thay đổi nó. Vì vậy, có một số khả năng để ẩn chúng bằng cách sử dụng API jqGrid? Theo như tôi có thể nhìn thấy tôi có thể ẩn này chỉ sử dụng mã tùy chỉnh của tôi:

Tôi cần phải kiểm tra mô hình cột của tôi và sau khi render của lưới (có thể trong loadComplete) cho tất cả các cột có sản phẩm nào sopt hoặc sopt.length == 0 để loại bỏ hành bộ chọn. Hoặc thêm lớp CSS ẩn nó. Không chắc chắn giải pháp nào tốt hơn (ẩn hoặc xóa) vì việc xóa có thể đã phá vỡ một số logic và việc ẩn có thể ảnh hưởng đến tính toán chiều rộng. Dưới đây là ví dụ về ý nghĩa của tôi trên fiddle

function fixSearchOperators() 
{ 
    var columns = jQuery("#grid").jqGrid ('getGridParam', 'colModel'); 
    var gridContainer = $("#grid").parents(".ui-jqgrid"); 
    var filterToolbar = $("tr.ui-search-toolbar", gridContainer); 

    filterToolbar.find("th").each(function() 
    { 
     var index = $(this).index(); 
     if(!(columns[index].searchoptions && 
      columns[index].searchoptions.sopt && 
      columns[index].searchoptions.sopt.length>1)) 
     { 
      $(this).find(".ui-search-oper").hide(); 
     } 
    }); 
} 

Có ai có ý tưởng nào tốt hơn không?

Answer 1

Tôi tìm ý tưởng để xác định khả năng hiển thị của các hoạt động tìm kiếm trong mỗi cột ý tưởng rất hay. +1 từ tôi.

Tôi sẽ chỉ đề nghị bạn thay đổi một chút tiêu chí để chọn cột thanh công cụ tìm kiếm nào sẽ nhận được các thao tác tìm kiếm. Dường như với tôi bản địa hơn bao gồm một số thuộc tính mới bên trong của searchoptions. Vì vậy mà bạn có thể viết một cái gì đó giống như

searchoptions: { 
    searchOperators: true, 
    sopt: ["gt", "eq"], 
    dataInit: function(elem) { 
     $(elem).datepicker(); 
    } 
} 

Tôi nghĩ rằng một số cột, giống như các cột với stype: "select", có thể vẫn cần phải có sopt (ít nhất sopt: ["eq"]), nhưng người ta không muốn nhìn thấy toán tử tìm kiếm cho ví dụ cột. Việc xác định khả năng hiển thị của các hoạt động tìm kiếm ở cấp cột sẽ rất thực tế trong những trường hợp như vậy.

Bản sửa đổi fiddle được sửa đổi bạn có thể tìm thấy here. Tôi đã bao gồm trong bản demo CSS từ the fix (xem the answer và the corresponding bug report). Mã đầy đủ là bên dưới

var dataArr = [ 
    {id:1, name: 'steven', surname: "sanderson", startdate:'06/30/2013'}, 
    {id:2, name: "valery", surname: "vitko", startdate: '07/27/2013'}, 
    {id:3, name: "John", surname: "Smith", startdate: '12/30/2012'}]; 

function fixSearchOperators() { 
    var $grid = $("#grid"), 
     columns = $grid.jqGrid ('getGridParam', 'colModel'), 
     filterToolbar = $($grid[0].grid.hDiv).find("tr.ui-search-toolbar"); 

    filterToolbar.find("th").each(function(index) { 
     var $searchOper = $(this).find(".ui-search-oper"); 
     if (!(columns[index].searchoptions && columns[index].searchoptions.searchOperators)) { 
      $searchOper.hide(); 
     } 
    }); 
} 

$("#grid").jqGrid({ 
    data: dataArr, 
    datatype: "local", 
    gridview: true, 
    height: 'auto', 
    hoverrows: false, 
    colModel: [ 
     { name: 'id', width: 60, sorttype: "int"}, 
     { name: 'name', width: 70}, 
     { name: 'surname', width: 100}, 
     { name: 'startdate', sorttype: "date", width: 90, 
      searchoptions: { 
       searchOperators: true, 
       sopt: ['gt', 'eq'], 
       dataInit: function(elem) { 
        $(elem).datepicker(); 
       } 
      }, 
      formatoptions: { 
       srcformat:'m/d/Y', 
       newformat:'m/d/Y' 
      } 
     } 
    ] 
}); 

$("#grid").jqGrid('filterToolbar', { 
    searchOnEnter: false, 
    ignoreCase: true, 
    searchOperators: true 
}); 
fixSearchOperators(); 

Nó hiển thị các kết quả tương tự như thanh niên: