반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://stackoverflow.com/q/13673340/315935</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
.ui-jqgrid tr.myfootrow td
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/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://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint browser: true, plusplus: true */
$(function () {
"use strict";
var myData = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDate = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 100);
},
numberTemplate = ,
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
$grid.jqGrid({
datatype: "local",
data: myData,
colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{name: "name", width: 65},
{name: "invdate", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: , datefmt: "d-M-Y",
editoptions: { dataInit: initDate },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDate }},
{name: "amount", width: 75, template: numberTemplate },
{name: "tax", width: 52, template: numberTemplate },
{name: "total", width: 65, template: numberTemplate },
{name: "closed", width: 80, align: "center", formatter: "checkbox",
edittype: "checkbox", editoptions: ,
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
value: ":Any;true:Yes;false:No"
}},
{name: "ship_via", width: 100, align: "center", formatter: "select",
edittype: "select",
editoptions: {
value: "FE:FedEx;TN:TNT;IN:Intim",
defaultValue: "Intime"
},
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
value: ":Any;FE:FedEx;TN:TNT;IN:Intim"
}},
{name: "note", width: 100, sortable: false}
],
cmTemplate: ,
rowNum: 5,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
ignoreCase: true,
rownumbers: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
height: "100%",
hidegrid: false,
caption: "How to implement multiline footer",
footerrow: true,
loadComplete: function () {
var $this = $(this),
sum = $this.jqGrid("getCol", "amount", false, "sum"),
$footerRow = $(this.grid.sDiv).find("tr.footrow"),
localData = $this.jqGrid("getGridParam", "data"),
totalRows = localData.length,
totalSum = 0,
$newFooterRow,
i;
$newFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
if ($newFooterRow.length === 0) {
// add second row of the footer if it's not exist
$newFooterRow = $footerRow.clone();
$newFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
$newFooterRow.children("td").each(function () {
this.style.width = ""; // remove width from inline CSS
});
$newFooterRow.insertAfter($footerRow);
}
$this.jqGrid("footerData", "set", );
// calculate the value for the second footer row
for (i = 0; i < totalRows; i++) {
totalSum += parseInt(localData[i].amount, 10);
}
$newFooterRow.find(">td[aria-describedby=" + this.id + "_invdate]").text("Grand Total:");
$newFooterRow.find(">td[aria-describedby=" + this.id + "_amount]").text(
$.fmatter.util.NumberFormat(totalSum, $.jgrid.formatter.number)
);
}
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>반응형
'DEMO CODE > jQuery 활용' 카테고리의 다른 글
| [Chart] Morris.js Bar Chart (0) | 2016.03.25 |
|---|---|
| [Chart] Morris.js Area Chart (0) | 2016.03.25 |
| [Chart] Morris.js Line Chart (0) | 2016.03.25 |
| [jQuery] jqGrid array 테이블 (0) | 2014.05.08 |
| 구글 지도 예제소스 (0) | 2014.04.01 |
