`
sillycat
  • 浏览: 2556027 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

jqgrid学习(三)其他格式

    博客分类：
  • UI
jQueryjsonJSPvelocityHTML 
阅读更多
jqgrid学习(三)其他格式

寻求其他更为方便的数据格式

1. json
通过读取服务器返回的json数据来构造grid，参考页面jqgrid-demo-json.html：
<!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" 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="../components/jqgrid/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../components/jqgrid/css/ui.jqgrid.css" />
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
<script src="../components/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../components/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../components/jqgrid/js/src/grid.loader.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'jqgrid-demo-json-data.jsp',
datatype: "json",
mtype: 'POST',
colModel:[
{name:'name',label:'Name', width:150,editable: true},
{name:'id',width:50, sorttype:"int", editable: true},
{name:'email',label:'Email', width:150,editable: true,formatter:'email'},
{name:'stock',label:'Stock', width:60, align:"center", editable: true,formatter:'checkbox',edittype:"checkbox"},
{name:'item.price',label:'Price', width:100, align:"right", editable: true,formatter:'currency'},
{name:'item.weight',label:'Weight',width:60, align:"right", editable: true,formatter:'number'},
{name:'ship',label:'Ship Via',width:90, editable: true,formatter:'select', edittype:"select",editoptions:{value:"2:FedEx;1:InTime;3:TNT;4:ARK;5:ARAMEX"}},     
{name:'note',label:'Notes', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}     
   ],
jsonReader : {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        userdata: "userdata",
        id: "0"
    },
   rowNum:10,
   rowList:[10,20,30],
   pager: '#pager',
   sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
  });
  alert(jQuery("#list").getGridParam('userData'));
  alert(jQuery("#list").getUserData() + ":" + jQuery("#list").getUserDataItem( "tax" ));
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

json的模拟数据返回，写了个简单的jsp页面jqgrid-demo-json-data.jsp
<%@page contentType="text/html;charset=UTF-8"%>
{
   "page" : "1",
   "total" : "1",
   "records" : "4",
   "userdata" : { totalinvoice:"1",tax:"sillycat"},
   "rows":[
      {id:"12345",name:"Desktop Computers",email:"josh@josh.com",item:{price:"1000.72", weight: "1.22" }, note:"note",stock:"0",ship:"1"},
      {id:"23456",name:"<var>laptop</var>",note:"Long text ",stock:"yes",item:{price:"56.72", weight:"1.22"},ship:"2"},
      {id:"34567",name:"LCD Monitor",note:"note3",stock:"true",item:{price:"99999.72", weight:"1.22"},ship:"3"},
      {id:"45678",name:"Speakers",note:"note",stock:"false",ship:"4"}
    ]
}

2. array data
比较喜欢这种模式。基本上不用怎么去修改原有的项目。用在velocity上，改动量很小。参考页面jqgrid-demo-client.html.
<!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" 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="../components/jqgrid/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../components/jqgrid/css/ui.jqgrid.css" />
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
<script src="../components/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../components/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../components/jqgrid/js/src/grid.loader.js" type="text/javascript"></script>

<script>
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: "local",
height: 250,
   colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   colModel:[
   {name:'id',index:'id', width:60, sorttype:"int"},
   {name:'invdate',index:'invdate', width:90, sorttype:"date"},
   {name:'name',index:'name', width:100},
   {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
   {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
   {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
   {name:'note',index:'note', width:150, sortable:false}
   ],
   multiselect: true,
   caption: "Manipulating Array Data"
});

var mydata = [
    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++){
jQuery("#list").addRowData(i + 1, mydata[i]);
}
jQuery("#list").addRowData("10", {id:"10",amount:"1100.00"});
var data = jQuery("#list").getRowData("10");
jQuery("#list").delRowData("1");
jQuery("#list").setRowData("2",data);
jQuery("#list").setRowData( "3", { tax:"3333", total:"3333" });
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

3. function
    没有了解
4. user data
    没有测试成功，只成功的访问到了array，但是访问item不对，这个还得测试下
alert(jQuery("#list").getGridParam('userData'));
alert(jQuery("#list").getUserData() + ":" + jQuery("#list").getUserDataItem( "tax" ));



分享到：
| jqgrid学习(二)读取XML数据
评论
2 楼 sillycat 2010-01-21  
好。慢慢的都加上格式。哈哈。
1 楼 suiye007 2010-01-21   
public ActionResult ShowData()
        {
            return View();
        }
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件，用于在Web应用...通过深入学习JqGrid中文API文档，开发者可以充分利用其强大功能，创建功能丰富的数据展示和管理界面。结合提供的示例代码，实践应用将变得更加直观和便捷。

    jquery.jqgrid最新版

    jqGrid是基于jQuery库的表格插件，它提供了一套完整的解决方案，包括数据的加载、排序、筛选、分页、编辑以及格式化等。jqGrid支持多种数据源，如JSON、XML、HTML、CSV等，能够无缝集成到各种Web项目中。其核心功能...

    jqgrid使用

    另外，jqGrid也支持Bootstrap、FontAwesome等第三方库的集成，以实现更丰富的视觉效果。 ### 6. 扩展与插件 jqGrid社区提供了许多扩展和插件，如导出数据到Excel、PDF，图表集成，以及拖放排序等，可以根据项目...

    jqGrid 4.4.1

    - `docs`: 官方文档，帮助开发者了解和学习如何使用jqGrid。 - `src`: jqGrid的源代码，方便开发者查看和定制。 通过以上内容，我们可以看到jqGrid 4.4.1是一个功能强大的表格插件，提供了全面的数据管理和展示功能...

    jqgrid表格插件

    - `css`：存放jqGrid的样式文件，包括主样式表（如ui.jqgrid.css）和其他定制样式。 - `plugins`：包含jqGrid的扩展插件，如小图标、树形网格、拖放排序等。 - `js`：jqGrid的核心JavaScript文件，包括主库（jqGrid....

    jqGrid(版本:5.1.0)

    - **导出功能**：可以将表格数据导出为Excel、CSV或其他格式。 - **国际化**：支持多语言，方便不同地区的用户使用。 - **主题化**：可自定义主题，与网站整体风格保持一致。 ### 2. jqGrid的安装与基本使用 首先...

    jqgrid基本格式

    ### jqGrid基本格式详解 #### 一、简介 `jqGrid`是一款基于jQuery的表格插件，用于在网页...希望本文能帮助到正在学习或使用`jqGrid`的朋友。 以上就是关于“jqgrid基本格式”的详细解析，希望能够对大家有所帮助。

    ASP.NET jqGRID 控件 源代码 示例

    三、创建jqGrid实例 在ASP.NET中，jqGrid可以通过JavaScript代码动态创建。在HTML元素（通常是一个空的`&lt;div&gt;`）上应用jqGrid，设置必要的参数，例如列定义、数据源等： ```javascript $("#grid").jqGrid({ url: '...

    jqgrid jquery 表格插件

    **三、使用jqGrid的步骤** 1. 引入jqGrid的JavaScript和CSS文件。 2. 创建HTML表格结构，设置必要的属性，如id和class。 3. 初始化jqGrid，设置数据源、列模型、分页参数等。 4. 可选：添加自定义的事件监听和回调...

    jqGrid源码及操作文档

    jqGrid是一款广泛应用于Web开发中的JavaScript表格插件，它基于jQuery库，提供了强大的数据网格功能，...通过对jqGrid的源码学习和操作文档的参考，开发者可以更好地掌握其使用方法，提升Web应用的数据展示和管理能力。

    jqGrid使用手册

    4. 导入导出：jqGrid支持数据导入和导出，可以将表格数据导出为Excel、PDF或其他格式。 二、jqGrid的高级应用 1. 内置功能：jqGrid内置了多种高级功能，如行选择、行拖放、列拖动、行级操作图标等，提高了用户体验...

    Jquery Jgrid使用手册

    三、jqGrid学习——jqGrid参数 JqGrid有众多可配置的参数，例如`url`用于指定数据来源，`datatype`定义数据类型（如'json', 'xml'等），`colNames`和`colModel`定义列的显示名称和属性，`pager`设置分页控件等。 四...

    free-jqgrid-4.15.5.tgz

    本文将深入探讨free-jqgrid-4.15.5版本，此版本包含了所有的js和css文件，为开发者提供了完整的jqGrid学习和应用资源。 一、jqGrid概述 jqGrid是一款基于jQuery的开源数据网格组件，它允许用户在网页上创建交互式...

    MVC4网站中集成jqGrid表格插件-示例源代码.zip

    在控制器中，创建一个返回JSON数据的方法，如`GetEmployees`，它将从数据库或其他数据源获取数据并将其转换为JSON格式，供jqGrid使用。 4. **创建视图** 创建一个名为`Employees.cshtml`的视图，其中包含jqGrid的...

    底层框架搭建

    3. AJAX技术：理解异步请求的工作原理，如何使用JqGrid与其他前端库（如jQuery）协同工作。 4. JSON和XML：掌握这两种数据交换格式，知道如何在前后端之间传输数据。 5. 安全性：学习如何在Struts2中配置安全控制，...

    grid示例jquary

    "grid示例jQuery"标题所指的可能是利用jQuery来创建或操作表格展示数据的一种方法，通常这涉及到使用jQuery插件，如jQuery UI的DataGrid或者第三方的jqGrid等。 DataGrid是一种强大的组件，它允许开发者以网格形式...

Magicbox
Global site tag (gtag.js) - Google Analytics