<!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>Just simple local grid</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" /><link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/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.1.2/js/jquery.jqGrid.src.multicol.js"></script><script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint browser: true, plusplus: true */
$.jgrid.formatter.integer.thousandsSeparator = ',';
$.jgrid.formatter.number.thousandsSeparator = ',';
$.jgrid.formatter.currency.thousandsSeparator = ',';
$(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");
grid.jqGrid({
datatype: 'local',
data: mydata,
colNames: [/*'Inv No', */'Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
colModel: [
//{name: 'id', index: 'id', width: 65, align: 'center', sorttype: 'int'},
{name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
{name: 'name', index: 'name', width: 70},
{name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', resizable: false, align: 'right'},
{name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', resizable: false, align: 'right'},
{name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', resizable: false, align: 'right'},
{name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
{name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
{name: 'note', index: 'note', width: 70, sortable: false}
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
caption: 'Just simple local grid',
height: '100%',
footerrow: true,
loadComplete: function () {
var sum = grid.jqGrid('getCol', 'amount', false, 'sum');
grid.jqGrid('footerData','set', {invdate: 'Total:', amount: sum});
}
});
});
//]]>
</script></head><body><table id="list"><tr><td/></tr></table><div id="pager"></div></body></html>
分享到:
相关推荐
JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...
jQgrid中文文档API jQgrid是一个功能强大且流行的JavaScript插件,用于创建交互式表格。它基于jQuery库,提供了许多强大的功能,例如排序、过滤、编辑、分页等,使得开发者可以快速创建复杂的表格应用程序。本文将...
JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...
jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据。这个"jqGrid4.6完整包"包含了所有你需要的组件来构建功能丰富的、可编辑的表格。以下是关于 jqGrid 4.6 版本的一些关键知识点: 1. **jqGrid ...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和 jQuery 知识,因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
根据提供的文件信息,我们可以提取出关于jqGrid的知识点,具体如下: 1. jqGrid基础概念 jqGrid是一个用于Web应用程序的JavaScript表格插件,它遵循典型的B/S(浏览器/服务器)架构。在这种架构中,服务器端负责...
jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据表格。它提供了丰富的功能,如数据分页、排序、过滤、编辑和更多。本资源为 jqGrid5.X 的官方全Demo下载,包含中文文档和离线演示,用户可以在...
jqGrid提供了内置的统计功能,可以通过`groupSummary`和`summaryType`属性来实现。例如,我们想要对"price"列进行求和统计: ```javascript colModel: [ { name: 'category', ... }, { name: 'price', ..., ...
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid是一款功能强大的jQuery插件,专用于在Web页面上展示和操作表格数据。它以其高效、灵活和可定制性而受到开发者的广泛欢迎。在jqGrid 4.6和4.7这两个版本中,我们可以深入探讨一些核心知识点: 1. **数据网格...
《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件,主要用于构建数据密集型Web应用程序,特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1....
在本"jQgrid demo"中,我们将深入探讨如何利用 jQGrid 实现交互式的数据展示和操作。 jQGrid 的核心特性包括: 1. **数据加载与显示**:jQGrid 支持从服务器或本地数据源动态加载数据,并以表格形式展示。它可以...
jqGrid是一款功能强大的JavaScript数据网格插件,专为Web应用程序设计,用于展示和操作大量结构化数据。在jqGrid5.5版本中,它提供了一系列的改进和新特性,使得数据管理和用户界面更加高效和易用。以下是关于jqGrid...
jqGrid 是一个强大的 jQuery 插件,用于在网页上展示和操作数据,它提供了丰富的功能,包括数据排序、筛选、分页和编辑等。Bootstrap 4.0 是一个流行的前端框架,用于构建响应式和移动优先的网站。将 jqGrid 与 ...
**jqGrid介绍** jqGrid是一款基于JavaScript的开源数据网格组件,它是jQuery库的一部分,用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性,深受开发者的喜爱。...
jqGrid是一款功能强大的JavaScript表格插件,用于在网页上展示并操作数据,它支持各种操作,包括数据的加载、排序、搜索以及分页等。在这个"jqgrid加载本地数据并且分页例子"中,我们将深入探讨如何利用jqGrid实现从...
jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据。它在Web开发领域中被广泛使用,特别是在需要处理大量结构化数据的场景下。jqGrid 3.5版本是该插件的一个较早版本,但仍然具有丰富的...
jqGrid 是一个基于 jQuery 的开源网格插件,用于在网页上展示和操作数据。这个压缩包 "jqgrid4.6.rar" 包含了 jqGrid 4.6.0 版本,它是一个稳定且功能丰富的表格展示工具,广泛应用于Web开发中数据管理的场景。以下...