`
天朗java
  • 浏览: 33975 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类
最新评论

jqGrid how to

阅读更多
本文转载至天朗工作室
1.使用json数据格式

(json)数据:
      [{categoryId:'a',categoryCode:'a',categoryName:'a',level:0,parentId:0,creator:'a'},{categoryId:'b',categoryCode:'b',categoryName:'b',level:0,parentId:0,creator:'b'}]
   
html:
<table id="jqGrid"><!--只能是table-->
</table>
js:
jqGrid  = $('#jqGrid').jqGrid({
url:'http://www.51better.info/index.html‘,//获取数据url
//loadComplete:function(data) {console.log(data);},
datatype:'json',//设置数据格式 (json,xml,local)
colNames:['品类编号','品类代号','品类名称','品类级别','上级编号','创建人'],
colModel:[
{name:'categoryId',index:'categoryId',align:'center'},
{name:'categoryCode',index:'categoryCode',align:'center',editable:true,edittype:'text'},
{name:'categoryName',index:'categoryName',align:'center',editable:true,edittype:'text'},
{name:'level',index:'level',align:'center'},
{name:'parentId',index:'parentId',align:'center'},
{name:'creator',index:'creator',align:'center'}
],
autowidth:true,
jsonReader:{
/*total:'total',
records:'rows',
page:'page',*/
repeatitems: false  //如果表格不能正常显示 请检查此设置是否设置为false
}
});

2.添加分页(pagebar)
html:
<table id="jqGrid"><!--只能是table-->
</table>
<div id="pagebar"></div>

js:
jqGrid  = $('#jqGrid').jqGrid({
url:'http://www.51better.info/index.html‘,//获取数据url
//loadComplete:function(data) {console.log(data);},
datatype:'json',//设置数据格式 (json,xml,local)
colNames:['品类编号','品类代号','品类名称','品类级别','上级编号','创建人'],
colModel:[
{name:'categoryId',index:'categoryId',align:'center'},
{name:'categoryCode',index:'categoryCode',align:'center',editable:true,edittype:'text'},
{name:'categoryName',index:'categoryName',align:'center',editable:true,edittype:'text'},
{name:'level',index:'level',align:'center'},
{name:'parentId',index:'parentId',align:'center'},
{name:'creator',index:'creator',align:'center'}
],
                                pager:"#pagebar",
autowidth:true,
jsonReader:{
/*total:'total',
records:'rows',
page:'page',*/
repeatitems: false  //如果表格不能正常显示 请检查此设置是否设置为false
}
});
3.在分页栏显示按钮
js:
jqGrid  = $('#jqGrid').jqGrid({
url:'http://www.51better.info/index.html‘,//获取数据url
//loadComplete:function(data) {console.log(data);},
datatype:'json',//设置数据格式 (json,xml,local)
colNames:['品类编号','品类代号','品类名称','品类级别','上级编号','创建人'],
colModel:[
{name:'categoryId',index:'categoryId',align:'center'},
{name:'categoryCode',index:'categoryCode',align:'center',editable:true,edittype:'text'},
{name:'categoryName',index:'categoryName',align:'center',editable:true,edittype:'text'},
{name:'level',index:'level',align:'center'},
{name:'parentId',index:'parentId',align:'center'},
{name:'creator',index:'creator',align:'center'}
],
                                pager:"#pagebar",
autowidth:true,
jsonReader:{
/*total:'total',
records:'rows',
page:'page',*/
repeatitems: false  //如果表格不能正常显示 请检查此设置是否设置为false
}
}).navGrid("#toolbar",{add:false,edit:false,del:false,search:true,refresh:true});

                       //add:true 显示添加按钮 edit:true 显示编辑按钮 del:true 显示删除按钮

待续……
分享到:
评论

相关推荐

    jqGrid 离线帮助手册

    HOWTO Navigating Pager Navigator Custom Buttons HOWTO Formatter Predefined Formatter Custom Formatter HOWTO Searching Configuration Toolbar Searching Custom Searching Single Searching Advanced ...

    jqGrid 离线帮助手册 来源官方wiki

    HOWTO Navigating Pager Navigator Custom Buttons HOWTO Formatter Predefined Formatter Custom Formatter HOWTO Searching Configuration Toolbar Searching Custom Searching Single Searching Advanced ...

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...

    jqgrid中文文档API

    jQgrid中文文档API jQgrid是一个功能强大且流行的JavaScript插件,用于创建交互式表格。它基于jQuery库,提供了许多强大的功能,例如排序、过滤、编辑、分页等,使得开发者可以快速创建复杂的表格应用程序。本文将...

    jqGrid4.8.2 jqgrid_demo40

    jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...

    jqGrid5.X 官方全Demo下载

    - `upgrade_to_4.8.txt`:如果之前使用的是旧版本,此文件提供了升级到4.8版的指南,有助于平滑过渡。 - `install.txt`:包含安装和配置 jqGrid5.X 的步骤,对于初次使用者非常有帮助。 3. **样式与框架** - `...

    jqGrid4.6完整包

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据。这个"jqGrid4.6完整包"包含了所有你需要的组件来构建功能丰富的、可编辑的表格。以下是关于 jqGrid 4.6 版本的一些关键知识点: 1. **jqGrid ...

    jqGrid中文文档.doc

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和 jQuery 知识,因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...

    jqGrid4.6.0 jqgrid_demo40

    jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...

    jqGrid_api中文文档

    根据提供的文件信息,我们可以提取出关于jqGrid的知识点,具体如下: 1. jqGrid基础概念 jqGrid是一个用于Web应用程序的JavaScript表格插件,它遵循典型的B/S(浏览器/服务器)架构。在这种架构中,服务器端负责...

    jqGrid 4.6和4.7版本

    jqGrid是一款功能强大的jQuery插件,专用于在Web页面上展示和操作表格数据。它以其高效、灵活和可定制性而受到开发者的广泛欢迎。在jqGrid 4.6和4.7这两个版本中,我们可以深入探讨一些核心知识点: 1. **数据网格...

    jquery.jqgrid最新版

    《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件,主要用于构建数据密集型Web应用程序,特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...

    jQgrid demo

    在本"jQgrid demo"中,我们将深入探讨如何利用 jQGrid 实现交互式的数据展示和操作。 jQGrid 的核心特性包括: 1. **数据加载与显示**:jQGrid 支持从服务器或本地数据源动态加载数据,并以表格形式展示。它可以...

    jqGrid demo (完整版)

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1....

    jqGrid5.5 版本

    jqGrid是一款功能强大的JavaScript数据网格插件,专为Web应用程序设计,用于展示和操作大量结构化数据。在jqGrid5.5版本中,它提供了一系列的改进和新特性,使得数据管理和用户界面更加高效和易用。以下是关于jqGrid...

    jqgrid4.6.rar

    jqGrid 是一个基于 jQuery 的开源网格插件,用于在网页上展示和操作数据。这个压缩包 "jqgrid4.6.rar" 包含了 jqGrid 4.6.0 版本,它是一个稳定且功能丰富的表格展示工具,广泛应用于Web开发中数据管理的场景。以下...

    jqgrid +bootstrap4.0 直接使用

    jqGrid 是一个强大的 jQuery 插件,用于在网页上展示和操作数据,它提供了丰富的功能,包括数据排序、筛选、分页和编辑等。Bootstrap 4.0 是一个流行的前端框架,用于构建响应式和移动优先的网站。将 jqGrid 与 ...

    jqgriddemo,样式漂亮,可以直接使用

    **jqGrid介绍** jqGrid是一款基于JavaScript的开源数据网格组件,它是jQuery库的一部分,用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性,深受开发者的喜爱。...

    jqgrid序列

    `jqGrid`是一款基于JavaScript的开源数据网格组件,主要用于在Web应用中展示和管理大量结构化数据。它提供了丰富的特性和功能,包括数据的分页、排序、过滤、编辑以及对服务器端数据的异步操作。jqGrid与jQuery库...

Global site tag (gtag.js) - Google Analytics