jqGrid 是一个用来显示网格数据的jQuery插件

jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面,其官方网址为:http://www.trirand.com

一、jqGrid特性:

  • 基于jquery UI主题,开发者可以根据客户要求更换不同的主题。
  • 兼容目前所有流行的web浏览器。
  • Ajax分页,可以控制每页显示的记录数。
  • 支持XML,JSON,数组形式的数据源。
  • 提供丰富的选项配置及方法事件接口。
  • 支持表格排序,支持拖动列、隐藏列。
  • 支持滚动加载数据。
  • 支持实时编辑保存数据内容。
  • 支持子表格及树形表格。
  • 支持多语言。
  • 最关键目前是免费的。

二、jqGrid使用方式:

1.下载文件
  1. 下载jqGrid的软件包,目前最新版本为4.4.1 下载地址为:http://www.trirand.com/blog/?page_id=6
  2. 下载jQuery文件,目前最新版本为1.8.2 下载地址为:http://code.jquery.com/jquery-1.8.2.min.js
  3. 下载jqGrid皮肤,下载地址为:http://jqueryui.com/themeroller/ 我使用的是:ThemeRoller->gallery->cupertino样式
2.准备文件

在项目的根目录下,建立相应的文件夹,放入下载的文件,目录结构如下图:

3.页面中得代码
3.1、head中加入引用
  • css文件引入:
<link type="text/css" rel="stylesheet" href="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
<link type="text/css" rel="stylesheet" href="jqGrid/themes/ui.jqgrid.css">
  • js文件引入:
<script type="text/javascript" src="jquery-1.8.2.min.js" />
<script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/>
3.2、body中的代码
<!-- jqGrid table list4 -->
<table id="list4"></table>
<!-- jqGrid 分页 div gridPager -->
<div id="gridPager"></div>

其中,list4为列表jqGrid,gridPager为列表的分页div

3.3、js中的代码

$(document).ready(function(){
    $("#list4").jqGrid({
        url:contextPath + "search.action",
        datatype:"json", //数据来源,本地数据
        mtype:"POST",//提交方式
        height:420,//高度,表格高度。可为数值、百分比或‘auto‘
        //width:1000,//这个宽度不能为百分比
        autowidth:true,//自动宽
        colNames:[‘添加日期‘, ‘手机号码‘, ‘银行卡号‘,‘备注‘,‘操作‘],
        colModel:[
            //{name:‘id‘,index:‘id‘, width:‘10%‘, align:‘center‘ },
            {name:‘createDate‘,index:‘createDate‘, width:‘20%‘,align:‘center‘},
            {name:‘phoneNo‘,index:‘phoneNo‘, width:‘15%‘,align:‘center‘},
            {name:‘cardNo‘,index:‘cardNo‘, width:‘20%‘, align:"center"},
            {name:‘remark‘,index:‘remark‘, width:‘35%‘, align:"left", sortable:false},
            {name:‘del‘,index:‘del‘, width:‘10%‘,align:"center", sortable:false}
        ],
        rownumbers:true,//添加左侧行号
        //altRows:true,//设置为交替行表格,默认为false
        //sortname:‘createDate‘,
        //sortorder:‘asc‘,
        viewrecords: true,//是否在浏览导航栏显示记录总数
        rowNum:15,//每页显示记录数
        rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。
        jsonReader:{
            id: "blackId",//设置返回参数中,表格ID的名字为blackId
            repeatitems : false
        },
        pager:$(‘#gridPager‘)
    });
});

至此,整个使用jqGrid的前端使用就基本完毕了,当加载此页面的时候,将初始化jqGrid表格,并通过url请求数据,返回datatype类型的数据。至于后台的数据,大家可以自己调用,并返回json格式的数据即可填充表格。
具体的参数可以查询jqGrid API。

详情请看:http://www.huosen.net/archives/142.html

分类: HtmlJavaScriptJquery

时间: 2024-09-29 10:31:11

jqGrid 是一个用来显示网格数据的jQuery插件的相关文章

处理金额中符号、整数、小数、单位显示不同样式的jquery插件

需求: 做商品的时候,要做商品金额,如下图所示 一共有四个部分,第一部分可能显示金钱符号¥,第二部分是金额整数部分,第三部分是金额小数部分,第四部分是金额的单位 从后台拿到的金额是一个整体,如果这样的场景用的很多,则每次都需要用js对数据处理一次,然后赋予不同的样式. 设计: 我们可以设计的HTML结构大概是这样的 <style> .price-lg {color: #e50013;font-size: 56px;font-family: "arial";} .price-

让png在ie下正常显示 用到了jquery插件DD_belatedPNG 但是在ie6中这句话 前面添加有效 后面移除无效 IE6 jq removeClass无效

jQuery(this).addClass("background").siblings().removeClass("background") 导致IE6移除的css无效: 通过css渲染效果解决:{ background:url(/images/about_us.png) no-repeat left top;_background:none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(e

图片和DOM元素网格布局jQuery插件

jMosaic是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件.可以使用的HTML元素有:img.div.li等.该jQuery插件可以将图片等元素整齐排列,元素的宽高比例不会发生变化. 效果演示:http://www.htmleaf.com/Demo/201503291594.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201503291593.html

Python做一个简单的web服务器,外接一个支持wsgi协议框架显示动态数据

import socket import re import sys import mini_frame # 通过外部传端口号给套接字 # tcp_port = sys.argv[1] class Mini_Wsgi(object): def __init__(self): self.tcp_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM) self.tcp_socket.setsockopt(socket.SOL_SOCKET

图像数据到网格数据-1——MarchingCubes算法

原文:http://blog.csdn.net/u013339596/article/details/19167907 概述 之前的博文已经完整的介绍了三维图像数据和三角形网格数据.在实际应用中,利用遥感硬件或者各种探测仪器,可以获得表征现实世界中物体的三维图像.比如利用CT机扫描人体得到人体断层扫描图像,就是一个表征人体内部组织器官形状的一个三维图像.其中的感兴趣的组织器官通过体素的颜色和背景加以区别.如下图的人体足骨扫描图像.医生通过观察这样的图像可以分析病人足骨的特征,从而对症下药. 这类

ASP.NET - 演练:创建网页以显示 XML 数据

数据通常是以 XML 格式提供给 Web 应用程序的.但是,XML 数据本质上是分层的,因此您可能希望能够在基于列表的控件中使用 XML 数据,如 GridView 或 DropDownList 控件.此演练演示如何将 XML 数据视为表格数据库表中的数据进行处理. 通过此演练,您将学会如何执行以下任务: ·使用数据源控件读取 XML 数据并将数据提供给列表控件. ·将 GridView 和 DataList 控件绑定到 XML 数据. ·创建显示逻辑相关的 XML 数据的主详细信息页. ·对

C#在listview控件中显示数据库数据

一.了解listview控件的属性 view:设置为details columns:设置列 items:设置行 1.将listview的view设置为details 2.设置列属性 点击添加,添加一列 设置一列的Text属性,这就是列名 添加三列 3.编辑items属性,添加一行数据 编辑Text属性,添加一行的第一个数据 编辑subitems属性,添加一行中的其他数据 添加两个数据 填写结果 二.在listview中显示数据库数据 //在listview中显示数据库数据 private voi

Android上使用OpenGLES2.0显示YUV数据

在Android上用OpenGLES来显示YUV图像,之所以这样做,是因为: 1.Android本身也不能直接显示YUV图像,YUV转成RGB还是必要的: 2.YUV手动转RGB会占用大量的CPU资源,如果以这样的形式播放视频,手机会很热,所以我们尽量让GPU来做这件事: 3.OpenGLES是Android集成到自身框架里的第三方库,它有很多的可取之处. 博主的C/C++不是很好,所以整个过程是在Java层实现的,大家见笑,我主要参考(但不限于)以下文章,十分感谢这些朋友的分享: 1. htt

Android用surface直接显示yuv数据(二)

上一篇文章主要是参照AwesomePlayer直接用SoftwareRenderer类来显示yuv,为了能用到这个类,不惜依赖了libstagefright.libstagefright_color_conversion等动态静态库,从而造成程序具有很高的耦合度,也不便于我们理解yuv数据直接显示的深层次原因. 于是我开始研究SoftwareRenderer的具体实现,我们来提取SoftwareRenderer的核心代码,自己来实现yuv的显示. SoftwareRenderer就只有三个方法,