0
私はthis postを私のコードの基礎として使用して、保存ボタンをクリックしてグリッドの状態を保存できるようにしました。 。jqGrid Free - ボタンとして状態をロード/保存する機能
フィルターデータを保存して再読み込みするという点ではほとんど機能していますが、列の順序や表示を変更すると、保存ボタンをクリックするとこれらの変更は保存されません。
私は、ソースコードでこのコメントを理解していない
// filterToolbarテキスト入力のIDは "gs_" + colModel.name
if(col_arr[i].search && $("#gs_" + col_arr[i].name).val().length) { toolbar_search_array.push({ name: col_arr[i].name, value: $("#gs_" + col_arr[i].name).val() }); }
ですその結果、保存をクリックするとコンソールエラーが表示されます。このセクションをコメントアウトすると、列の順序と可視性なしでフィルタ条件を保存できます。
以下は、私のコードの実際の例です。
$(function() {
"use strict";
$.jgrid.defaults.guiStyle = "bootstrap";
$.jgrid.defaults.iconSet = "fontAwesome";
var template1 = {
"groupOp": "AND",
"rules": [{
"field": "r",
"op": "eq",
"data": "YES"
}]
};
var template2 = {
"groupOp": "AND",
"rules": [{
"field": "hz",
"op": "eq",
"data": "YES"
}]
};
\t
\t \t var mygrid = jQuery("#jqGrid").jqGrid({
\t \t \t \t url: 'https://dl.dropboxusercontent.com/s/nh7rcwcimxljjr2/data.json',
\t \t \t \t datatype: "json",
\t \t \t \t cmTemplate: {
\t \t \t \t \t autoResizable: false,
\t \t \t \t \t align: "center",
\t \t \t \t searchoptions: {
\t \t \t \t searchOperMenu: true,
\t \t \t \t sopt: ["bw" ,"eq", "ne" , "lt", "le" ,"gt" ,"ge" , "bn" ,"in" ,"ni" ,"ew" ,"en" ,"cn" ,"nc" ,"nu" ,"nn"]
\t \t \t \t }
\t \t \t \t },
\t \t \t \t colModel: [{
label: 'Position',
name: 'p',
width: 100
}, {
label: 'Equipment Nbr',
key: true, // ??? only if e is unique in the input data
name: 'e'
}, {
label: 'Length',
name: 'l',
width: 95
}, {
label: 'Height',
name: 'ch',
width: 90
}, {
label: 'ISO Code',
name: 'i',
width: 110
}, {
label: 'Carrier',
name: 'c',
width: 95
}, {
label: 'Bay',
name: 'ba',
width: 75
}, {
label: 'Row',
name: 'ro',
width: 75
}, {
label: 'Tier',
name: 'ti',
width: 75
}, {
label: 'Type',
name: 'ty',
width: 90
}, {
label: 'Status',
name: 's',
width: 90
}, {
label: 'Bundle?',
name: 'b',
width: 100
}, {
label: 'Attached Nbr',
name: 'a',
}, {
label: 'Pos Format',
name: 'pf',
width: 125
}, {
label: 'VGM',
name: 'wv',
width: 100
}, {
label: 'Weight',
name: 'w',
width: 100
}, {
label: 'OOG',
name: 'o',
width: 75
}, {
label: 'Dimensions',
name: 'dn',
width: 200
}, {
label: 'Hazardous',
name: 'hz',
width: 120
}, {
label: 'IMDG Code',
name: 'im',
width: 125
}, {
label: 'UN Number',
name: 'un',
width: 125
}, {
label: 'Reefer',
name: 'r',
width: 90
}, {
label: 'Temp',
name: 'tp',
}, {
label: 'Range',
name: 'ra',
width: 130
}, {
label: 'Description',
name: 'd',
width: 125
}, {
label: 'Handling',
name: 'h',
width: 125
}, {
label: 'Load Remarks',
name: 'lr',
width: 140
}, {
label: 'POL',
name: 'pl',
width: 80
}, {
label: 'POD',
name: 'pd',
width: 80
}, {
label: 'Optional POD',
name: 'op',
width: 140
}, {
label: 'Destination',
name: 'de',
width: 125
}, {
label: '1st POD',
name: 'p1',
width: 110
}, {
label: '2nd POD',
name: 'p2',
width: 110
}, {
label: '3rd POD',
name: 'p3',
width: 110
}, {
label: '4th POD',
name: 'p4',
width: 110
}, {
label: '5th POD',
name: 'p5',
width: 110
}, {
label: 'Transhipment Port',
name: 'pt',
width: 175
}, {
label: 'Next POD',
name: 'np',
width: 115
}, {
label: 'Ref Code',
name: 'rc',
width: 110
}, {
label: 'Ref',
name: 'ref',
width: 80
}],
\t
\t \t \t \t viewrecords: true,
autowidth: true,
sortable: true,
height: 400,
rowNum: 17,
shrinkToFit: false,
autoresizeOnLoad: false,
loadonce: true,
\t \t \t \t colMenu : true,
sortname: 'p',
hoverrows: true,
iconSet: "fontAwesome",
\t \t \t \t rowNum: 250,
\t \t \t \t autoResizing: { compact: true },
\t \t \t \t rowList: [250, 1000, 2500, "10000:All"],
rownumbers: true,
\t \t rownumWidth: 60,
multiselect: true,
multiPageSelection: true,
pager: true,
groupingView: {
groupOrder: ["desc"],
groupText: ["<b>{0}</b> - {1} record(s) found"],
groupColumnShow: [true],
\t \t \t \t groupCollapse: true
},
searching: {
stringResult: true,
searchOperators: true,
loadDefaults: false,
multipleSearch: true,
caption: "Advanced Query Builder",
Find: " Filter",
Reset: " Reset",
multipleGroup: true,
showQuery: false,
tmplNames: ["Reefers", "Hazardous"],
tmplFilters: [template1, template2]
}
}).jqGrid('filterToolbar')
\t .jqGrid("gridResize")
\t .jqGrid("navGrid", {
\t \t \t \t iconsOverText: true,
\t \t \t \t addtext: "Add",
\t \t \t \t edittext: "Edit",
\t \t \t \t deltext: "Delete",
\t \t \t \t searchtext: "Search",
\t \t \t \t refreshtext: "Refresh",
\t \t \t \t viewtext: "View",
\t \t \t \t view: true
\t \t \t })
\t \t \t .jqGrid("navButtonAdd", {
caption: "Show/Hide Filters",
id: "toggleToolbar",
//buttonicon: "ui-icon-calculator",
//commonIconClass: "ui-icon",
buttonicon: "ui-pg-button-text ui-pg-button-icon-over-text fa-toggle-off",
title: "Toggle toolbar",
onClickButton:function(){
\t \t \t \t \t \t \t \t \t mygrid[0].toggleToolbar()
\t \t \t \t \t \t \t \t }
})
\t \t \t .jqGrid("navButtonAdd", {
caption: "Clear Filters",
id: "clearFilters",
//buttonicon: "ui-icon-calculator",
//commonIconClass: "ui-icon",
buttonicon: "ui-pg-button-text ui-pg-button-icon-over-text fa-eraser",
title: "Clear Filters",
onClickButton:function(){
\t \t \t \t \t \t \t \t \t mygrid[0].clearToolbar()
\t \t \t \t \t \t \t \t }
})
\t \t \t .jqGrid("navButtonAdd", {
\t \t \t caption: "Show/Hide Columns",
\t \t \t buttonicon: "ui-pg-button-text ui-pg-button-icon-over-text fa-table",
\t \t \t title: "Choose columns",
\t \t \t onClickButton: function() {
\t \t \t $(this).jqGrid("columnChooser", {
\t \t \t done: function (perm) {
\t \t \t if (perm) {
\t \t \t this.jqGrid("remapColumns", perm, true);
\t \t \t saveColumnState.call(this);
\t \t \t }
\t \t \t }
\t \t \t });
\t \t \t }
\t \t \t })
\t \t \t .jqGrid("navButtonAdd", {
caption: "Default Settings",
buttonicon: "ui-pg-button-text ui-pg-button-icon-over-text fa-times",
title: "Clear saved grid's settings",
onClickButton: function() {
window.location.reload();
}
});
\t \t \t
\t \t \t
$("#dynamicGrouping").change(function() {
var groupingName = $(this).val();
if (groupingName) {
$("#jqGrid").jqGrid("setGridParam", {rowNum: 9999})
\t .jqGrid('groupingGroupBy', groupingName);
} else {
$("#jqGrid").jqGrid("setGridParam", {rowNum: 250})
\t .jqGrid('groupingRemove');
\t $('#jqGrid').trigger('reloadGrid');
}
});
$("#getSelectedRows").click(function() {
\t \t var selectedIDs = $("#jqGrid").getGridParam("selarrrow");
\t \t alert(selectedIDs.length === 0 ? "No rows are selected" : selectedIDs.join());
});
}),
\t
\t \t \t \t $("#savestate").click(function(){
\t \t \t \t \t saveState();
\t \t \t \t });
\t \t \t \t $("#loadstate").click(function(){
\t \t \t \t \t loadState();
\t \t \t \t });
\t
\t \t \t \t function navigateToLang(lng) {
$.jgrid.setRegional('jqGrid',{regional: lng});
}
function getSelectedRows() {
var grid = $("#jqGrid");
var rowKey = grid.getGridParam("selrow");
if (!rowKey)
alert("No rows are selected");
else {
var selectedIDs = grid.getGridParam("selarrrow");
var result = "";
for (var i = 0; i < selectedIDs.length; i++) {
result += selectedIDs[i] + ",";
}
alert(result);
}
}
\t
function saveState(){
// i have to access the colModel in order to get the names of my columns
// which i need to get the values of the filter-toolbar textboxes later:
var col_arr = $("#jqGrid").jqGrid("getGridParam", "colModel");
// my own array to save the toolbar data:
var toolbar_search_array = [];
/*
for(var i = 0, max = col_arr.length; i < max; i++)
{
// only saving the data when colModel's "search" is set to true
// and value of the filterToolbar textbox got a length
// the ID of the filterToolbar text-input is "gs_" + colModel.name
if(col_arr[i].search && $("#gs_" + col_arr[i].name).val().length)
{
toolbar_search_array.push({ name: col_arr[i].name, value: $("#gs_" + col_arr[i].name).val() });
}
}*/
// putting everything into one object
var pref = {
// 1. toolbar filter data - used to fill out the text-inputs accordingly
toolbar : toolbar_search_array,
// 2. postData - contains data for the actual filtering
post : $("#jqGrid").jqGrid("getGridParam", "postData"),
// 3. settings - this data is also included in postData - but doesn't get applied
// when using 'setGridParam'
sortname: $('#jqGrid').jqGrid('getGridParam', 'sortname'),
sortorder: $('#jqGrid').jqGrid('getGridParam', 'sortorder'),
page: $('#jqGrid').jqGrid('getGridParam', 'page'),
rowNum: $('#jqGrid').jqGrid('getGridParam', 'rowNum')
};
//saving in localStorage
localStorage.setItem("jqGrid", JSON.stringify(pref));
};
function loadState(){
\t \t var localsave = JSON.parse(localStorage.getItem("jqGrid"));
\t \t
\t \t // these settings are also saved in postData,
\t \t // but they don't get applied to the grid when setting the postData:
\t \t $('#jqGrid').jqGrid('setGridParam', {
\t \t sortname: localsave.sortname,
\t \t sortorder: localsave.sortorder,
\t \t page: localsave.page,
\t \t rowNum: localsave.rowNum
\t \t });
\t \t
\t \t // this applies the filtering itself and reloads the grid.
\t \t // it's important that you don't forget the "search : true" part:
\t \t $("#jqGrid").jqGrid("setGridParam", {
\t \t search : true,
\t \t postData : localsave.post
\t \t }).trigger("reloadGrid");
\t \t
\t \t // this is loading the text into the filterToolbar
\t \t // from the array of objects i created:
\t \t console.log(localsave.toolbar);
\t \t for(i = 0, max = localsave.toolbar.length; i < max; i++)
\t \t {
\t \t $("#gs_" + localsave.toolbar[i].name).val(localsave.toolbar[i].value);
\t \t } \t
\t
}a.soptclass {
border: 2px;
}
th {
background-color: #aaa;
}
.two-col {
overflow: hidden;
/* Makes this div contain its floats */
}
.two-col .col1,
.two-col .col2 {
width 49%;
}
.two-col .col1 {
float: left;
}
.two-col .col2 {
float: right;
}
.two-col label {
display: block;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
\t <div style="margin-left:20px; margin-right:20px;">
<div class="two-col">
<div class="col1">
<div class="form-group">
\t \t \t \t \t \t <label for="dynamicGrouping">Group Data By:</label>
\t \t \t \t \t \t <select id="dynamicGrouping" class="form-control" style="width:auto;">
\t \t \t \t <option value="">No Grouping</option>
\t \t \t \t <option value="c">Carrier</option>
\t \t \t \t <option value="l">Length</option>
\t \t \t \t <option value="h">Height</option>
\t \t \t \t <option value="i">ISO Code</option>
\t \t \t \t <option value="ba">Bay</option>
\t \t \t \t <option value="s">Status</option>
\t \t \t \t <option value="o">Is OOG?</option>
\t \t \t \t <option value="hz">Is Hazardous?</option>
\t \t \t \t <option value="r">Is Reefer?</option>
\t \t \t \t </select>
\t \t \t \t </div>
</div>
</div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
\t <br>
\t <button id="savestate" class="btn btn-default">Save Table State</button>
\t <button id="loadstate" class="btn btn-default">Load Table State</button>
\t </br>
\t <input class="btn btn-default" type="button" value="Get Selected Container Numbers" onclick="getSelectedRows()" />
</div>
私はあなたのデモを使用してテーブルを稼働させました。テーブルの状態によって、columnChooserとFilterの両方の基準が正しく保存されるようになりましたが、ページを更新するときにフィルタは使用されません。私の** [デモ]（https://test.baplieviewer.com/userareajqGrid/?filetoload=../JSON/mtrayn01/Elaine.json）** をご覧ください。どうぞご覧ください私はこの仕事をするために追加する必要がありますか？私はそれがあなたのデモでうまく動作しているので、私は間違ったことをしているに違いない。 – MarkT
@ MarkT：問題を再現するための正確なテストケースを説明できますか？フィルタをいくつか設定してEnterキーを押すと、フィルタリングされた結果が表示されます。 1つのcaその後、ページをリロードするためにF5を押すことができます。 **最後にフィルタを適用して**ページがロードされることがわかります。私はテストでChrome 55を使用しました。 – Oleg
デモをロードしてEquipment NbrフィルタにSEGUと入力し、Enterキーを押すと、レコードが61に絞り込まれます。F5キーを押すと、フィルタにはまだSEGUが表示されますが、結果はフィルタ処理されなくなり、あなたは2273のレコードを持っています。 Safari、Firefox、ChromeでMacをテストしています。 – MarkT