<!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/10850978/315935</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="author" content="Oleg Kiriljuk"/> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/redmond/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.3/css/ui.jqgrid.css"/> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.12/jquery.multiselect.css"/> <style type="text/css"> html, body { font-size: 75%; } .ui-jqgrid-hdiv { overflow-y: hidden; } </style> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.min.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.3/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.3.3/js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.12/jquery.multiselect.js"></script> <script type="text/javascript"> //<![CDATA[ $(function () { "use strict"; var mydata = [ { id: "1", invdate: "2007-10-01", name: "test1", note: "note1", 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"), initDateEdit = function (elem) { $(elem).datepicker({ dateFormat: "dd-M-yy", autoSize: true, changeYear: true, changeMonth: true, showButtonPanel: true, showWeek: true }); }, initDateSearch = function (elem) { setTimeout(function () { $(elem).datepicker({ dateFormat: "dd-M-yy", autoSize: true, changeYear: true, changeMonth: true, showWeek: true, showButtonPanel: true }); }, 100); }, numberTemplate = {formatter: "number", align: "right", sorttype: "number", editrules: {number: true, required: true}, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }}; $grid.jqGrid({ data: mydata, datatype: "local", colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"], colModel: [ { name: "name", align: "center", width: 65, editrules: {required: true}, formoptions:{rowpos: 1, colpos: 1} }, { name: "invdate", width: 80, align: "center", sorttype: "date", formatter: "date", formatoptions: { newformat: "d-M-Y" }, datefmt: "d-M-Y", editoptions: { dataInit: initDateEdit }, formoptions:{rowpos: 1, colpos: 2}, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } }, { name: "amount", width: 75, template: numberTemplate, formoptions:{rowpos: 2, colpos: 1}}, { name: "tax", width: 52, template: numberTemplate, formoptions:{rowpos: 2, colpos: 2} }, { name: "total", width: 60, template: numberTemplate, formoptions:{rowpos: 3, colpos: 1} }, {name: "closed", width: 70, align: "center", formatter: "checkbox", edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}, stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" }, formoptions:{rowpos: 3, colpos: 2} }, {name: "ship_via", width: 105, align: "center", formatter: "select", edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN", dataInit: function(elem) { $(elem).css("margin-top", "8px" ); }}, stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" }, formoptions:{rowpos: 4, colpos: 1} }, { name: "note", width: 60, sortable: false, edittype: "textarea", formoptions: {rowpos: 4, colpos: 2} } ], cmTemplate: { editable: true }, pager: "#pager", rowNum: 10, rowList: [5, 10, 20, 50], sortname: "id", sortorder: "asc", viewrecords: true, gridview: true, height: "100%", caption: "Demonstrate the usage of jQuery UI MultiSelect Widget" }); $.extend($.jgrid.view, { width: 450, recreateForm: true }); $.extend($.jgrid.edit, { width: 450, recreateForm: true }); $grid.jqGrid("navGrid", "#pager", {view: true}); }); //]]> </script> </head> <body> <table id="list"><tr><td></td></tr></table> <div id="pager"></div> </body> </html>
相关推荐
对于刚接触jquerygrid的人相当不错哦,各个按钮事件都有介绍
jqGrid详解及高级应用
MVC+Jqgrid+存储过程 全部代码
jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用
jqgrid 修改一列 。修改所有的行。通过vue.js 与jqgrid 的应用,供大家参考学习。多多提意见 。相互学习交换意见
jqgrid的简单应用,直接显示,无需服务器数据库
自己搜集的jqGrid与Struts2的结合应用的方法
在mvc 中 应用 jqgrid技术,一个在mvc中应用 最广泛的表格插件。
JQGrid的简单应用及第三方分页的实现 后端实现使用C#实现 通过第三方分页控件实现JQGrid的动态分页
jqgrid与struts2结合的例子
jQuery 的jqGrid包 现在已经更新到了3.8了 ,但是其中的主要应用是不会有太大的改动的,希望这个帮助文档能对jQuery插件的学习有所帮助。
通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用,本文给大家介绍jqGrid表格应用之新增与删除数据,需要的朋友参考下
jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合。 jqGrid特性: 基于...
jqgriddemo各种表格应用示例,版本:5。0,jqgrid 文档离线demo打包. 下载 本地可架设运行
Test JQGrid 项目手把手开发文档.doc ,为我们提供jqgrid更好的应用与学习,jqgrid的强大功能,很不错哦,望各位童鞋们不要错过哦,嘻嘻
jqGrid详解及高级应用,Jquery Jqgrid使用手册.能使jqGrid初学者更加方便快捷的掌握jqGrid控件的使用,让有一定jqGrid基础的人更深层次的认识jqGrid
JSP使用jquery插件jqGrid的演示后台使用struts2实现,对想在JSP中应用jqGrid有一定的借鉴。导入Eclipse可以直接看效果
但是这些模块会使得整个插件体积显得有点庞大,而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用,所以笔者放弃jqGrid自有的search和edit表格模块,借助jquery利器来完成相关功能,符合项目的实际应用。...
主要参考www helloweba com 作者:月光光 qGrid表格应用 读取与查询数据 还有其他网上作者无私奉献心得 鄙视官方jqgrid Demo 修改了代码中的错误 增加了编辑功能 和jqueryUI 日历datepicker插件