JQGrid:基于jQuery的高级表格控件与集成教程

1星 需积分: 10 1 下载量 138 浏览量 更新于2024-07-23 2 收藏 157KB DOCX 举报
JQGrid系列教程是一系列关于使用JQGrid,一个基于jQuery的高级表格控件的文章。JQGrid旨在提供一个强大且灵活的数据展示与交互解决方案,特别适合处理大量复杂数据的显示和筛选需求。它采用AJAX技术与服务器端进行异步通信,使得数据加载更加高效,并且支持多种后端技术如ASP.NET、JavaServerlets、JSP和PHP等的集成。 该教程首先介绍了JQGrid的基本概念,它是如何在jQuery的基础上构建的,以及它提供的功能特性,如外观时尚、功能全面,能够轻松实现表格数据的动态展示和操作。使用场景中强调了其在数据量大且需要复杂查询和筛选功能时的优势。 为了在ASP.NET Web应用程序中集成JQGrid,作者建议遵循以下步骤:首先创建一个新的ASP.NET Web Form项目,然后在指定的JQGrid.aspx页面上设置为起始页。由于JQGrid依赖于jQuery,所以必须下载并引入最新的jQuery库,包括核心库和UI样式。在JQGrid文件夹中,分别添加了`jquery-1.11.1.min.js`、`jquery-ui-1.11.1.custom/jquery-ui.css`、`ui.jqgrid.css`、`grid.locale-cn.js`和`jquery.jqGrid.js`等核心和本地化文件,确保JQGrid的引用顺序在jQuery之后。 此外,教程还推荐了一些参考链接,比如Cnblogs上的文章,以便读者深入了解JQGrid的使用方法和技巧。通过这个系列教程,开发者可以学习如何有效地利用JQGrid在实际项目中构建动态表格,提升用户体验,并且由于它是免费、开源的,使得它成为一个经济且实用的选择。 JQGrid系列教程涵盖了从基础安装配置到实际应用的方方面面,是任何希望在前端开发中运用高级表格控件的开发者不可或缺的学习资源。
2018-04-17 上传
<!DOCTYPE html> <html xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min14ed.css" /> <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/ui.jqgridffe4.css" /> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> [removed][removed] [removed][removed] [removed][removed] [removed] $(document).ready(function(){ $.jgrid.defaults.styleUI="Bootstrap"; var topicjson={ "response": [ { "id": "1", "elementName": "Grouping", "url":"/asd/asda", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "1_1", "elementName": "Simple Grouping", "url":"/asd/12", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "1_2", "elementName": "May be some other grouping", "url":"/asd/14342", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "2", "elementName": "CustomFormater", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "2_1", "elementName": "Image Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true }, { "id": "2_3", "elementName": "Anchor Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true } ] }, grid; grid = jQuery("#jsonmap"); grid.jqGrid({ datastr: topicjson, datatype: "jsonstring", height: "auto", loadui: "disable", colNames: ["id","Items","url"], colModel: [ {name: "id",width:200, hidden:true, key:true}, {name: "elementName", editable:true,width:250, resizable: false}, {name: "url",width:200, editable:true,hidden:false} ], treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "elementName", treeIcons: {leaf:'ui-icon-document-b'}, caption: "jqGrid Demos", autowidth: true, rowNum: 10000, ExpandColClick: true, jsonReader: { repeatitems: false, root: "response" }, onSelectRow: function(id){ } }); }); [removed] </head> <body>
</body> </html>