Thanks for your responses.
For questions 3, 5, and 6, I’ve created a screen shot here:
NEW question, this might be related to the above:
Your example link was helpful. I recreated it locally and I get similar formatting issues as above. Screen shot of formatting issues:
https://app.box.com/s/4jfrk4leh3yccoagzkljwfa1zju3omox" />
I used jqgrid 5.1 . I copied your example code then I changed the paths for the css and js, for my local drive, but it is similar to your original example.
It feels like I’m missing a link to css or js?
Here’s my code:
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<!– The jQuery library is a prerequisite for all jqSuite products –>
<!– <script src="js/jquery-2.1.1.js"></script> –>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<!– We support more than 40 localizations –>
<script src="js/plugins/jqGrid/i18n/grid.locale-en.js"></script>
<!– This is the Javascript file of jqGrid –>
<script src="js/plugins/jqGrid/jquery.jqGrid.min.js"></script>
<!– This is the localization file of the grid controlling messages, labels, etc.
<!– A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!– The link to the CSS that the grid needs –>
<link href="css/plugins/jqGrid/ui.jqgrid-bootstrap-ui.css" rel="stylesheet">
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = ‘Bootstrap’;
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jqGrid Loading Data – Column Reordering</title>
</head>
<body>
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div { font-size:11px; }
/* set the size of the autocomplete search control*/
.ui-menu-item {
}
.ui-autocomplete {
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div></div>
&amp;lt;script type="text/javascript"&amp;gt;
$(document).ready(function () {
var filter;
$("#jqGrid").jqGrid({
url: ‘data.json’,
mtype: "GET",
datatype: "json",
colModel: [
{ label : "Order ID",
//sorttype: ‘integer’,
name: ‘OrderID’,
key: true,
width: 75 ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : [‘eq’,’gt’,’lt’,’ge’,’le’]
}
},
{
label: "Customer ID",
name: ‘CustomerID’,
width: 150,
hidedlg : true,
// stype defines the search type control – in this case HTML select (dropdownlist)
stype: "select",
// searchoptions value – name values pairs for the dropdown – they will appear as options
searchoptions: {
value: " :[All];ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT;BERGS:BERGS;BLAUS:BLAUS;BLONP:BLONP;BOLID:BOLID;BONAP:BONAP;BOTTM:BOTTM;BSBEV:BSBEV;CACTU:CACTU;CENTC:CENTC;CHOPS:CHOPS;COMMI:COMMI;CONSH:CONSH;DRACD:DRACD;DUMON:DUMON;EASTC:EASTC;ERNSH:ERNSH;FAMIA:FAMIA;FOLIG:FOLIG;FOLKO:FOLKO;FRANK:FRANK;FRANR:FRANR;FRANS:FRANS;FURIB:FURIB;GALED:GALED;GODOS:GODOS;GOURL:GOURL;GREAL:GREAL;GROSR:GROSR;HANAR:HANAR;HILAA:HILAA;HUNGC:HUNGC;HUNGO:HUNGO;ISLAT:ISLAT;KOENE:KOENE;LACOR:LACOR;LAMAI:LAMAI;LAUGB:LAUGB;LAZYK:LAZYK;LEHMS:LEHMS;LETSS:LETSS;LILAS:LILAS;LINOD:LINOD;LONEP:LONEP;MAGAA:MAGAA;MAISD:MAISD;MEREP:MEREP;MORGK:MORGK;NORTS:NORTS;OCEAN:OCEAN;OLDWO:OLDWO;OTTIK:OTTIK;PERIC:PERIC;PICCO:PICCO;PRINI:PRINI;QUEDE:QUEDE;QUEEN:QUEEN;QUICK:QUICK;RANCH:RANCH;RATTC:RATTC;REGGC:REGGC;RICAR:RICAR;RICSU:RICSU;ROMEY:ROMEY;SANTG:SANTG;SAVEA:SAVEA;SEVES:SEVES;SIMOB:SIMOB;SPECD:SPECD;SPLIR:SPLIR;SUPRD:SUPRD;THEBI:THEBI;THECR:THECR;TOMSP:TOMSP;TORTU:TORTU;TRADH:TRADH;TRAIH:TRAIH;VAFFE:VAFFE;VICTE:VICTE;VINET:VINET;WANDK:WANDK;WARTH:WARTH;WELLI:WELLI;WHITC:WHITC;WILMK:WILMK;WOLZA:WOLZA"
}
},
{
label: "Order Date",
name: ‘OrderDate’,
width: 150,
sorttype:’date’,
formatter: ‘date’,
srcformat: ‘Y-m-d’,
stype : ‘text’,
newformat: ‘n/j/Y’,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).datepicker({
id: ‘orderDate_datePicker’,
dateFormat: ‘m/d/yy’,
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: ‘focus’
});
}
}
},
{
label : "Ship Name",
name: ‘ShipName’,
width: 150,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).autocomplete({
id: ‘AutoComplete’,
source: function(request, response){
this.xhr = $.ajax({
url: ‘http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&amp;amp;acelem=ShipName’,
data: request,
dataType: "jsonp",
success: function( data ) {
response( data );
},
error: function(model, response, options) {
response([]);
}
});
},
autoFocus: true
});
},
sopt : [‘cn’]
}
},
{
label: "Freight",
sorttype: ‘number’,
name: ‘Freight’,
width: 150,
sopt : [‘eq’]
},
],
loadonce: true,
viewrecords: true,
width: 780,
height: 250,
rowNum: 10,
colMenu : true,
shrinkToFit : true,
pager: "#jqGridPager"
});
// activate the toolbar searching
$(‘#jqGrid’).jqGrid(‘filterToolbar’,{
stringResult: true,
//searchOnEnter: false,
searchOperators : true
});
$(‘#jqGrid’).jqGrid(‘navGrid’,"#jqGridPager", {
search: false, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
});
$("#save").click(function(){
filter = $("#jqGrid").jqGrid(‘getGridParam’, ‘postData’).filters;
var perm = [ 1, 0, 2, 4, 3 ];
$("#jqGrid").jqGrid(‘remapColumns’, perm, true, false);
console.log($("#jqGrid").jqGrid(‘getGridParam’,’colModel’));
});
$("#load").click(function(){
console.log(filter);
$("#jqGrid").jqGrid(‘refreshFilterToolbar’, {
filters : filter,
onClearVal: function ( elem, name) {
if(name === ‘CustomerID’) {
console.log(elem);
elem.multiselect(‘refresh’);
}
},
onSetVal: function ( elem, name) {
if(name === ‘CustomerID’) {
console.log(elem);
elem.multiselect(‘refresh’);
}
}
});
});
var timer;
$("#search_cells").on("keyup", function() {
var self = this;
if(timer) { clearTimeout(timer); }
timer = setTimeout(function(){
//timer = null;
$("#jqGrid").jqGrid(‘filterInput’, self.value);
},0);
});
});
&amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&amp;nbsp;
[/code]
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
