$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "2007-10-01", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "60", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
var $self = $(this);
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true,
onSelect: function () {
if (this.id.substr(0, 3) === "gs_") {
// call triggerToolbar only in case of searching toolbar
setTimeout(function () {
$self[0].triggerToolbar();
}, 100);
}
}
});
}, 100);
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
$grid.jqGrid({
datatype: "local",
data: mydata,
colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
colModel: [
{ name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
{ name: "invdate", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" }, editable: true, datefmt: "d-M-Y",
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{ name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "note", width: 60, sortable: false, editable: true, edittype: "textarea", hidden: true },
{ name: "tax", width: 52, editable: true, template: numberTemplate, hidden: true },
{ name: "amount", width: 75, editable: true, template: numberTemplate, hidden: true },
{ name: "total", width: 60, template: numberTemplate }
],
cmTemplate: {editable: true, editrules: {edithidden: true}},
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
autoencode: true,
ignoreCase: true,
sortname: "name",
viewrecords: true,
sortorder: "desc",
rownumbers: true,
shrinkToFit: false,
height: "auto",
ondblClickRow: function (rowid) {
$(this).jqGrid("viewGridRow", rowid);
}
});
$.extend($.jgrid.view, {
caption: "View Record Details",
recreateForm: true
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false, search: false, refresh: false, view: true,
viewtitle: "View details of selected row"
});
$grid.jqGrid("navButtonAdd", "#pager", {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose Columns to display in the grid",
onClickButton: function () {
$(this).jqGrid("columnChooser");
}
});
});
.ui-jqgrid-hdiv { overflow-y: hidden; }
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/ui.multiselect-fixed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/jQuery.jqGrid.columnChooser.js"></script>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
