JQgrid使用

原创 2012年03月30日 14:22:52

前台Default.aspx页面代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqgridDemo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="js/grid.locale-cn.js" type="text/javascript"></script>

    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $("#list").jqGrid({
                url: "GetData.ashx",
                datatype: "json",
                colNames: ['编号','客户名', '年龄', '性别'],
                colModel: [
                { name: 'Id', index: 'Id', width: 50 },
    { name: 'CustomerName', index: 'CustomerName', width: 50 },
    { name: 'Age', index: 'Age', width: 50 },
    { name: 'Sex', index: 'Sex', width: 50 }
    ],
    //rowNum: 10,
    rowList: [10, 20, 30],
    height: '100%',
   // pager: '#pager',
    sortname: 'id',
   // viewrecords: true,
    sortorder: "desc",
    caption: "JSON Example"

});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
        });
       
    </script>

</head>
<body>
    <table id="list">
    </table>
    <div id="pager"></div>
</body>
</html>

JqGrid的介绍和使用

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

jqGrid使用方法

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

Jqgrid的使用

对于现在前台表格普遍使用的Jqgrid插件,虽然基础的数据展示没问题,但是对于其他的功能也是让人惊叹的,功能强大,方便快捷。 Jqgrid的API:http://blog.mn886.net/jqG...
  • qq_27949963
  • qq_27949963
  • 2017年04月21日 13:36
  • 196

jqgrid插件使用实例

function inittable() { var userTablevalue = { url: "/Manage/ActivityOrderManage/...
  • yhd0916
  • yhd0916
  • 2017年01月10日 13:57
  • 159

IE下嵌套使用iframe,jqGrid页码条…

1. 首先解决IE下jqGrid报错问题: 在页面顶部加: 红色部分必须是:XHTML1.0 2. 解决条码不显示问题: 在嵌套的页面顶部都加:...
  • a437629292
  • a437629292
  • 2014年08月15日 16:02
  • 1070

jqGrid在MVC中使用方法

Views $(document).ready( function () { ...
  • c1113072394
  • c1113072394
  • 2016年08月04日 08:43
  • 360

解决vue中无法动态修改jqgrid组件 url地址

在项目开发中使用jqgrid有时我们需要动态修改URL地址,修改参数地址是无法改变jqgrid的url地址的,这是我们可以强行修改jqgrid的url地址,修改如下:$("#accountGrid")...
  • o0__0
  • o0__0
  • 2017年08月24日 22:19
  • 793

jqGrid 滚动加载 或者点击分页加载两种方式

分页的使用场景:当需要展示的字段太多,记录的条数太多的情况下,如果采用一次性加载全部的记录,会导致加载页面缓慢,响应速度慢, 影响系统的流程程度,故所以采用分页的方法加载数据是十分必要的 步骤如下...
  • shen19920619
  • shen19920619
  • 2017年06月16日 10:45
  • 286

jqGrid使用总结

1. 如何获取grid选中的行的ID? var rowid = $("#searchResultList").getGridParam("selrow");2. 如何在表格中动态增加一行数据?...
  • alfoo
  • alfoo
  • 2010年03月30日 10:42
  • 8577

JqGrid 完整例子

JqGrid 例子  可以参考   http://blog.mn886.net/jqGrid/ 完整实例压缩包  http://download.csdn.net/detail/ruthywei/9...
  • ruthywei
  • ruthywei
  • 2017年07月04日 11:59
  • 2282
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQgrid使用
举报原因:
原因补充:

(最多只允许输入30个字)