jqGrid - 更改過濾器/搜索彈出窗體 - 在頁面上平坦 - 不是對話框

我正在使用jqgrid。jqGrid - 更改過濾器/搜索彈出窗體 - 在頁面上平坦 - 不是對話框

我真的需要幫助，並且不知道如何去做，但我確定它可能......任何人都可以給我一個部分答案嗎？是從哪裏開始的？

我現在有一個要求說，對於搜索和篩選網格我不希望打開常規模型表單彈出窗口的東西，而是應該在進入頁面時打開過濾器而不是彈出窗體，但應該是在頁面的頂部，但仍然具有所有功能。

需要看起來像這樣：

enter image description here

而且又具有填充有正確的信息（如他們在彈出的形式做）選擇標籤和當點擊「保存」，應該發像普通一樣向服務器發出請求。

這可能嗎？

*******編輯*******

我基本上唯一需要的是有過濾器出來的對話的一部分。

來源

2012-01-12 Ovi

@奧列格，你能幫我一下嗎？並幫助我像你之前做過很多次？ – Ovi 2012-01-12 08:37:31

我收到上面的消息。如果您希望在將來向我發送消息，則應將其發佈在我編寫答案或評論的任何頁面上。只有在這種情況下，我纔會收到有關郵件的通知。 – Oleg 2012-01-12 10:47:31

好的謝謝，我知道下一次... – Ovi 2012-01-12 10:50:42

舊的搜索對話框的問題的解決方案，你可以找到here。我將演示修改爲jqGrid中搜索對話框的當前實現。

你可以看到結果上the demo：

enter image description here

相應的代碼如下：

var $grid = $('#list'); 

// create the grid 
$grid.jqGrid({ 
    // jqGrid opetions 
}); 

// set searching deafauls 
$.extend($.jgrid.search, {multipleSearch: true, multipleGroup: true, overlay: 0}); 

// during creating nevigator bar (optional) one don't need include searching button 
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false, search: false}); 

// create the searching dialog 
$grid.jqGrid('searchGrid'); 

var gridSelector = $.jgrid.jqID($grid[0].id), // 'list' 
    $searchDialog = $("#searchmodfbox_" + gridSelector), 
    $gbox = $("#gbox_" + gridSelector); 

// hide 'close' button of the searchring dialog 
$searchDialog.find("a.ui-jqdialog-titlebar-close").hide(); 

// place the searching dialog above the grid 
$searchDialog.insertBefore($gbox); 
$searchDialog.css({position: "relative", zIndex: "auto", float: "left"}) 
$gbox.css({clear:"left"});

來源

2012-01-12 10:44:48 Oleg

謝謝！我會試試這個...... – Ovi 2012-01-12 11:03:43

@Ovi：不客氣！ – Oleg 2012-01-12 11:04:14

一個問題，第一次搜索後，對話框關閉，我需要它始終保持打開狀態......我該怎麼做？我在你的演示中看到它保持打開狀態，可能是我做錯了什麼？ – Ovi 2012-01-12 11:24:32

下面是使用奧列格的優秀幫助我實現它的方式。

我希望我的用戶能夠立即鍵入搜索條件（在這種情況下，用戶的名稱），並讓jqGrid顯示結果。沒有搞亂彈出的搜索對話框。

這是我的最終結果是：

enter image description here

要做到這一點，我需要這個HTML：

Employee name: 
<input type="text" name="employeeName" id="employeeName" style="width:250px" /> 

<!-- This will be my jqGrid control and pager --> 
<table id="tblEmployees"></table> 
<div id="pager"></div>

和這個JavaScript：

$("#employeeName").on('change keyup paste', function() { 
    SearchByEmployeeName(); 
}); 

function SearchByEmployeeName() 
{ 
    // Fetch the text from our <input> control 
    var searchString = $("#employeeName").val(); 

    // Prepare to pass a new search filter to our jqGrid 
    var f = { groupOp: "AND", rules: [] }; 

    // Remember to change the following line to reflect the jqGrid column you want to search for your string in 
    // In this example, I'm searching through the UserName column. 

    f.rules.push({ field: "UserName", op: "cn", data: searchString }); 

    var grid = $('#tblEmployees'); 
    grid[0].p.search = f.rules.length > 0; 
    $.extend(grid[0].p.postData, { filters: JSON.stringify(f) }); 
    grid.trigger("reloadGrid", [{ page: 1 }]); 
}

同樣，我感謝Oleg展示如何使用這些搜索過濾器。

這確實使jqGrid 太多更方便用戶使用。

來源

2014-07-02 09:58:26

Hi @ Mike.This解決方案效果很好，但如果我們加載所有1000個沒有分頁的記錄，然後過濾不能正常工作。任何建議呢？ – 2017-02-10 11:09:13

我已經設置rowNum：-1在這種情況下一次加載所有記錄過濾不能正常工作。 – 2017-02-10 11:09:45

jqGrid - 更改過濾器/搜索彈出窗體 - 在頁面上平坦 - 不是對話框

回答

相關問題