free-jqgrid
Version:
grid as jQuery plugin - fork of jqGrid before licensing change
210 lines (209 loc) • 12.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>https://stackoverflow.com/a/28973635/315935</title>
<meta name="author" content="Oleg Kiriljuk">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.6.1.css">
<style>
html, body { font-size: 75%; }
.ui-jqgrid .ui-jqgrid-bdiv .myAltRowClass {
background-color: #DCFFFF;
background-image: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.6.1.js"></script>
<script>
//<![CDATA[
/*global $ */
/*jslint browser: true */
$(function () {
"use strict";
var mydata = [
{ id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: 0, tax: 0, closed: true, ship_via: "TN", total: 0 },
{ id: "21", invdate: "2007-10-02", name: "test2", note: "note2", amount: 351.75, tax: 23.45, closed: false, ship_via: "FE", total: 375.2 },
{ id: "31", invdate: "2007-09-01", name: "test3", note: "note3", amount: 400, tax: 30, closed: false, ship_via: "FE", total: 430 },
{ id: "41", invdate: "2007-10-04", name: "test4", note: "note4", amount: 200, tax: 10, closed: true, ship_via: "TN", total: 210 },
{ id: "51", invdate: "2007-10-31", name: "test5", note: "note5", amount: 300, tax: 20, closed: false, ship_via: "FE", total: 320 },
{ id: "61", invdate: "2007-09-06", name: "test6", note: "note6", amount: 400, tax: 30, closed: false, ship_via: "FE", total: 430 },
{ id: "71", invdate: "2007-10-04", name: "test7", note: "note7", amount: 200, tax: 10, closed: true, ship_via: "TN", total: 210 },
{ id: "81", invdate: "2007-10-03", name: "test8", note: "note8", amount: 300, tax: 20, closed: false, ship_via: "FE", total: 320 },
{ id: "91", invdate: "2007-09-01", name: "test9", note: "note9", amount: 400, tax: 30, closed: false, ship_via: "TN", total: 430 },
{ id: "101", invdate: "2007-09-08", name: "test10", note: "note10", amount: 500, tax: 30, closed: true, ship_via: "TN", total: 530 },
{ id: "111", invdate: "2007-09-08", name: "test11", note: "note11", amount: 500, tax: 30, closed: false, ship_via: "FE", total: 530 },
{ id: "121", invdate: "2007-09-10", name: "test12", note: "note12", amount: 500, tax: 30, closed: false, ship_via: "FE", total: 530 }
],
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 100);
},
editableInAddForm = function (options) {
if (options.mode === "addForm") {
return true;
}
if (options.mode === "editForm") {
return "disabled";
}
return false; // don't allows editing in other editing modes
},
$grid = $("#grid");
$grid.jqGrid({
data: mydata,
colModel: [
{ name: "name", label: "Client", width: 100, editable: true },
{ name: "invdate", label: "Date", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" }, editable: editableInAddForm,
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "amount", label: "Amount", width: 75, template: "number" },
{ name: "tax", label: "Tax", width: 100, template: "number",
searchoptions: { sopt: ["nIn", "eq", "ne", "lt", "le", "gt", "ge", "in", "ni"] } },
{ name: "total", label: "Total", width: 60, template: "number" },
{ name: "closed", label: "Closed", width: 70, template: "booleanCheckboxFa", editable: editableInAddForm },
{ name: "ship_via", label: "Shipped via", width: 105, align: "center", formatter: "select", editable: editableInAddForm,
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", label: "Notes", width: 60, edittype: "textarea", sortable: false, editable: true }
],
pager: true,
iconSet: "fontAwesome",
autoencode: true,
viewrecords: true,
rowNum: 10,
altRows: true,
altclass: "myAltRowClass",
rowList: [5, 10, 20, "10000:All" ],
caption: "Demonstration of the usage editable property of colModel as function",
navOptions: {
del: false
},
searching: {
closeAfterSearch: true,
closeAfterReset: true,
closeOnEscape: true,
searchOnEnter: true,
multipleSearch: true,
multipleGroup: true,
showQuery: true
}
}).jqGrid("navGrid");
QUnit.test("grid exists", function(assert) {
assert.equal($grid.length, 1, "Passed!");
});
QUnit.test("gbox exists", function(assert) {
assert.equal($grid.closest(".ui-jqgrid").length, 1, "Passed!");
});
QUnit.test("grid expando exists", function(assert) {
assert.notEqual($grid[0].grid, undefined, "Passed!");
});
QUnit.test("p expando exists", function(assert) {
assert.notEqual($grid[0].p, undefined, "Passed!");
});
QUnit.test("rows of grid exist - it's table", function(assert) {
assert.notEqual($grid[0].rows, undefined, "Passed!");
});
QUnit.test("grid has 11 rows", function(assert) {
assert.equal($grid[0].rows.length, 11, "Passed!");
});
QUnit.test("grid has 1 hidden first rows (with class jqgfirstrow)", function(assert) {
assert.equal($($grid[0].rows[0]).hasClass("jqgfirstrow"), true, "Passed!");
});
QUnit.test("grid has 10 data rows (with class jqgrow)", function(assert) {
assert.equal($grid.find(">tbody>tr.jqgrow").length, 10, "Passed!");
});
QUnit.test("grid has the pager", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).length, 1, "Passed!");
});
QUnit.test("the pager is DIV", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector)[0].nodeName.toUpperCase(), "DIV", "Passed!");
});
QUnit.test("the pager is inside of gbox", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).closest(".ui-jqgrid").length, 1, "Passed!");
});
QUnit.test("the pager is inside of gbox", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).closest(".ui-jqgrid").length, 1, "Passed!");
});
QUnit.test("the pager has INPUT with 1", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).find("input.ui-pg-input").val(), "1", "Passed!");
});
QUnit.test("the last page is 2", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager"),
lastPageSpanId = "#sp_1_" + pagerIdSelector.substring(1);
assert.equal($(lastPageSpanId).text(), "2", "Passed!");
});
QUnit.test("the page size is 10", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).find("select.ui-pg-selbox").val(), "10", "Passed!");
});
QUnit.test("the page info \"View 1 - 10 of 12\"", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).find(".ui-paging-info").text(), "View 1 - 10 of 12", "Passed!");
});
QUnit.test("the pager contains navigator bar", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).find(".navtable").length, 1, "Passed!");
});
QUnit.test("the navigator bar is DIV", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).find(".navtable")[0].nodeName.toUpperCase(), "DIV", "Passed!");
});
QUnit.test("the navigator bar contains 4 buttons", function(assert) {
var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
assert.equal($(pagerIdSelector).find(".navtable").find(".ui-pg-button>.ui-pg-div").length, 4, "Passed!");
});
QUnit.test("the first row if data have id 11", function(assert) {
assert.equal($grid[0].rows[1].id, "11", "Passed!");
});
QUnit.test("formatted 2007-10-01 is 01-Oct-2007", function(assert) {
assert.equal($($grid[0].rows[1].cells[1]).text(), "01-Oct-2007", "Passed!");
});
QUnit.test("0 formatted as number is 0.00", function(assert) {
assert.equal($($grid[0].rows[1].cells[2]).text(), "0.00", "Passed!");
});
QUnit.test("test data returned by getRowData for the rowid=51", function(assert) {
var rowData = $grid.jqGrid("getRowData", "51");
assert.deepEqual(rowData, { invdate: "31-Oct-2007", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: "false", ship_via: "FE", total: "320.00" }, "Passed!");
});
QUnit.test("test add data by addRowData for the rowid=10", function(assert) {
var rowData = $grid.jqGrid("addRowData", "10", { invdate: "2015-04-03", name: "test15", note: "note15", amount: 300.00, tax: 20.00, closed: true, ship_via: "FE", total: 320.00 });
assert.equal($grid[0].rows.length, 12, "the grid has 11 data rows");
assert.equal($($grid[0].rows[11].cells[1]).text(), "03-Apr-2015", "2015-04-03 is displayed as 03-Apr-2015");
assert.equal($($grid[0].rows[11]).hasClass("myAltRowClass"), false, "the last row has no myAltRowClass");
assert.equal($($grid[0].rows[10]).hasClass("myAltRowClass"), true, "the previous row has myAltRowClass");
});
});
//]]>
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="outerDiv" style="margin:5px;">
<table id="grid"></table>
</div>
</body>
</html>