`

jqGrid 笔记 获取rowData colModel 不同类型字段 不同查询 (转)

阅读更多
Java代码
1.<table id="users" style="font-size:11px;font-family:Calibri,Tahoma;"></table>  
2. 
3.$("#users").jqGrid({  
4.        url:'search',  
5.        datatype: "json",  
6.        colNames:[  
7. 
8.       ........  
9. 
10.} 
<table id="users" style="font-size:11px;font-family:Calibri,Tahoma;"></table>

$("#users").jqGrid({
        url:'search',
        datatype: "json",
        colNames:[

       ........

}
Java代码
1.ondblClickRow: function(id){   
2.            var row=$("#users").getRowData(id);  //根据ID拿到一行的数据  
3.              $("#Select").val(row.rowName);  
4.              $.fn.colorbox.close();  
5.            } 
ondblClickRow: function(id){
            var row=$("#users").getRowData(id);  //根据ID拿到一行的数据
              $("#Select").val(row.rowName);
              $.fn.colorbox.close();
            }Java代码
1.colModel:[  
2.           {name:'id',index:'id',width:40,sortable:true,hidden:true},  
3.           {name:'rowName',index:'indexName',width:105,sortable:true}, 
colModel:[
            {name:'id',index:'id',width:40,sortable:true,hidden:true},
            {name:'rowName',index:'indexName',width:105,sortable:true}, 


colModel

中 name是js端用来获取rowData的值时用的

index是传到服务器端用来做 searchField ,  sidx (orderby 的字段)



和extjs不同的是 服务器传过来的json数据,他是按顺序一个一个填充到列里去的,服务器上的json属性名和colModel中的不一样也可以

{name:'invdate',index:'invdate', width:90, jsonmap:"invdate"},这个jsonmap才是做映射的



指定查询  可以进行的操作, 不同类型字段 不同查询

{name:'email',index:'email',width:160,sortable:true,searchoptions:{sopt:['eq','ne','cn','nc']}}

{name:'cellphone',index:'cellphone',width:90,sortable:true,searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},





http://www.trirand.com/blog/jqgrid/jqgrid.html

http://www.secondpersonplural.ca/jqgriddocs/index.htm

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config

===============================================================



转:



http://blog.csdn.net/alfoo/archive/2010/03/30/5434022.aspx

1. 如何获取grid 选中的行的ID ?

var rowid = $("#searchResultList
").getGridParam("selrow
");2. 如何在表格中动态增加一行数据?

//$("#jqgrid").addRowData(rowId, data, pos, idx);

//pos可以为[first,last,before,after],为后两者是需要指定相对的行ID

$("#jqgrid
").addRowData("1
", {"name
":"test
","age
":12}, "first
");3. 如何动态修改某行的数据内容,如某几列的值?

//setRowData( rowid, data );

$("#jqgrid
").setRowData( "1
", { tax:"5
", total:"205
" });4. jqgrid 的常用属性?

$("#jqgrid
").jqGrid({
url:"${ctx}/sys/role/search.dm
",
colNames:["角色名称
"],//,"角色代码"

colModel:["roleName
"],//"roleCode"还可以用对象替换

jsonReader:{id:"roleId
",root:"dataList
"},
width:240,
height:250,
rowNum:20,//每页20条记录

pager: "logListPager
",//分页显示的DIVID

sortname: "actionTime
",//默认排序的列名

sortorder: "desc
",//默认排序的顺序

scroll
:true
,//鼠标滚动翻页

onSelectRow: function
(rowid) {}
});5. 获取某一行的数据对象?

var
rowid = $("#searchResultList
").getGridParam("selrow
");
var
rowData = $("#searchResultList
").getRowData(rowid);6. 如何使用API 动态修改选中的行?

//true:重新加载表格数据, false:不重新加载表格数据

$("#jqGrid
").setSelection("1
", true
);
分享到:
评论

相关推荐

    jQuery插件jqGrid动态获取列和列字段的方法

    在本文中,我们将探讨如何在jqGrid中动态获取列和列字段,这对于创建自定义功能或者根据用户需求动态展示数据非常有用。 首先,问题背景是关于jqGrid表格插件的使用,我们需要获取表格的表头(即列名)和表格字段,...

    jqgrid colModel中文配置文档

    jqGrid是一款功能强大的jQuery插件,用于创建交互式的表格,其中`colModel`是jqGrid的核心配置之一,它定义了表格列的各种属性和行为。在本篇文档中,我们将深入探讨`colModel`的各项配置选项。 1. `align`: 这个...

    获取jqGrid中选择的行的数据

    下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow');...var rowData = $(“#gridTable”).jqGrid(‘getRowData',rowId);

    jqGrid4.5.2强大的多列排序终于有了

    在此之前,jqGrid只支持单列排序,而多列排序的加入使得用户可以根据多个字段进行复杂的数据筛选和排列,这对于数据分析和展示至关重要。 多列排序允许用户同时按两个或更多列对表格数据进行排序。例如,你可以首先...

    jqGrid Wiki部分文档说明

    wiki_options - jqGrid Wiki wiki_colmodel_options - jqGrid Wiki wiki_methods - jqGrid Wiki wiki_events - jqGrid Wiki 4个pdf文件

    关于jqGrid中查询功能

    `Rule`类表示单个查询规则,包含字段名、操作符和数据值。`SearchUntil`类封装了整个查询条件,包括逻辑操作符和规则列表。使用`ObjectMapper`从JSON字符串反序列化成对应的Java对象,这可以通过`JsonHelper`类的`...

    jqGrid_各种参数_详解

    jqGrid 参数详解 jqGrid 是一个基于 jQuery 的表格控件,以 Ajax 方式与服务器端通信。它提供了强大的数据显示和处理功能,能够满足大多数的数据显示需求。下面是 jqGrid 的参数详解: 1. 安装 jqGrid jqGrid 的...

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    这个学习笔记主要围绕“jqGrid学习笔记1”展开,内容来源于jqGrid的英文PDF文档,结合了源码解析和实用工具的介绍。 首先,jqGrid支持多种数据源,包括JSON、XML、HTML、CSV等,这使得它能灵活地与各种后端服务进行...

    数据表格JqGrid自适应列宽度

    5. **使用CSS和媒体查询**:除了JqGrid内部的自适应机制,还可以结合CSS和媒体查询(Media Queries)来控制表格在不同屏幕尺寸下的表现。例如,可以为小屏幕设备定义不同的列宽和布局。 6. **jQuery插件**:有时...

    jqGrid 各种参数详解

    8. `loadonce`:boolean 类型,如果设置为 `true`,jqGrid 将一次性从服务器获取所有数据并在本地进行分页。 此外,jqGrid 还支持各种事件处理,例如 `loadComplete`(数据加载完成后触发)、`beforeSelectRow`(行...

    jqgrid中文文档API

    本文将详细介绍jQgrid的中文文档API,涵盖了其原理、使用方法、参数配置、事件处理、数据处理、ColModel API等方面的知识点。 原理 jQgrid是典型的B/S架构,服务器端只是提供数据管理,客户端只是提供数据显示。...

    jqGrid数据调用实例

    这些文件通常可以从jqGrid官方网站或者CDN服务获取。确保引入了核心的jQuery库、jqGrid主文件和主题样式表。 ```html &lt;!DOCTYPE html&gt; &lt;link rel="stylesheet" type="text/css" href="path/to/ui.jqgrid.css" /&gt;...

    JqGrid中文API文档

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

    jqGrid表格内容查询读取代码.zip

    在"jqGrid表格内容查询读取代码.zip"压缩包中,我们可以找到实现jqGrid表格内容查询读取的相关代码。 首先,让我们深入理解jqGrid的核心概念: 1. **初始化表格**:在HTML页面中,我们需要创建一个空的表格元素,...

    jqgrid学习笔记

    - 其他参数还包括 `colModel`(定义列的属性),`pager`(设置分页器),`sortname` 和 `sortorder`(初始排序的字段和顺序),以及 `rowList`(定义分页大小的选项列表)等。 6. **使用 jqGrid**: 在页面中,你...

    jqGrid属性中文详细说明

    ### jqGrid 属性中文详细说明 #### 一、简介 jqGrid是一款非常强大的jQuery插件,主要用于在网页上实现表格数据展示与管理的功能。通过设置不同的属性,可以灵活地控制表格的表现形式和交互行为,满足各种复杂的...

    jqGrid_api中文文档

    文件中提及了jqGrid中的一些核心概念,例如ColModel API、参数配置、自定义搜索、搜索工具栏、搜索、自定义格式化类型、格式化、自定义按钮、翻页功能、配置json、方法和事件。这些内容涉及了如何通过编程方式操作...

    table表格样式利用jqgrid实现

    你可以通过`url`参数设置数据来源,jqGrid会自动向指定URL发起请求获取数据。例如: ```javascript url: '/data.php', datatype: 'json', ``` 这里的`datatype`可以是'json'、'xml'或其他格式,根据服务器返回的...

    JQuery Mobile 中实现 jqGrid 数据分组

    在本文中,我们将深入探讨如何在JQuery Mobile中实现jqGrid数据分组,这是一个非常实用的功能,可以帮助用户更有效地组织和展示大量数据。首先,我们需要理解JQuery Mobile和jqGrid的基本概念。 JQuery Mobile是一...

Global site tag (gtag.js) - Google Analytics