`

jqgrid总结 收藏

阅读更多
转自:http://alfoo.iteye.com/blog/628528

当使用jqgrid来做数据表格控件时,如果搜索不到数据,是没有提示的。现在我们有一个需求就是如果当没有搜索到符合条件的数据时,需要在界面上提示。查了一下jqgrid的api,使用loadComplete事件可以满足这个要求。以下是相关代码:
Javascript代码

    loadComplete: function(xhr) { 
        var rowNum = parseInt($(this).getGridParam("records"), 10); 
        if (rowNum <= 0) { 
            alert("没有符合条件的记录!"); 
        } 
    } 

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

   1. var rowid = $("#searchResultList").getGridParam("selrow"); 

var rowid = $("#searchResultList").getGridParam("selrow");


2. 如何在表格中动态增加一行数据?
Javascript代码

   1. //$("#jqgrid").addRowData(rowId, data, pos, idx); 
   2. //pos可以为[first,last,before,after],为后两者是需要指定相对的行ID 
   3. $("#jqgrid").addRowData("1", {"name":"test","age":12}, "first"); 

//$("#jqgrid").addRowData(rowId, data, pos, idx);
//pos可以为[first,last,before,after],为后两者是需要指定相对的行ID
$("#jqgrid").addRowData("1", {"name":"test","age":12}, "first");


3. 如何动态修改某行的数据内容,如某几列的值?
Javascript代码

   1. //setRowData( rowid, data ); 
   2. $("#jqgrid").setRowData( "1", { tax:"5", total:"205" }); 

//setRowData( rowid, data );
$("#jqgrid").setRowData( "1", { tax:"5", total:"205" });


4. jqgrid的常用属性?
Javascript代码

   1. $("#jqgrid").jqGrid({ 
   2.     url:"${ctx}/sys/role/search.dm", 
   3.     colNames:["角色名称"],//,"角色代码" 
   4.     colModel:["roleName"],//"roleCode" 还可以用对象替换 
   5.     jsonReader:{id:"roleId",root:"dataList"}, 
   6.     width:240, 
   7.     height:250, 
   8.     rowNum:20,//每页20条记录 
   9.     pager: "logListPager",// 分页显示的DIVID 
  10.     sortname: "actionTime",// 默认排序的列名 
  11.     sortorder: "desc",//默认排序的顺序 
  12.     scroll:true,//鼠标滚动翻页 
  13.     onSelectRow: function(rowid) {} 
  14. }); 

$("#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. 获取某一行的数据对象?
Javascript代码

   1. var rowid = $("#searchResultList").getGridParam("selrow"); 
   2. var rowData = $("#searchResultList").getRowData(rowid); 

var rowid = $("#searchResultList").getGridParam("selrow");
var rowData = $("#searchResultList").getRowData(rowid);


6. 如何使用API动态修改选中的行?
Javascript代码

   1. //true:重新加载表格数据, false:不重新加载表格数据 
   2. $("#jqGrid").setSelection("1", true); 

//true:重新加载表格数据, false:不重新加载表格数据
$("#jqGrid").setSelection("1", true);


还有以下常用的API,
Javascript 代码

   1. $("#jqgrid").resetSelection(); 
   2. $("#jqgrid").clearGridData(); 
   3. $("#jqgrid").setCell(rowid,colname,nData,cssp,attrp);


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/showrock/archive/2010/06/07/5652242.aspx
分享到:
评论
2 楼 silenrain 2011-05-11  
[img ] [/img[b][/b][i][/i][u][/u]
引用
[img][/img][url][/url][flash=200,200][/flash]
]
1 楼 silenrain 2011-05-11  

相关推荐

    JqGrid插件+JqGridDemo+JqGrid主题

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

    jqgrid中文文档API

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

    JqGrid中文API文档

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

    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总结

    JqGrid是一款强大的JavaScript插件,用于创建交互式的表格,具有数据网格的功能,适用于Web应用程序。以下是关于JqGrid的一些核心知识点和使用技巧的详细解释: 1. **基本配置**: - `url`: 指定数据来源的URL,...

    jqGrid4.6完整包

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

    jqGrid中文文档.doc

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

    jquery.jqgrid最新版

    总结:jQuery.jqGrid是一款功能强大的表格组件,其全面的数据处理能力使得它在Web开发中占据了重要地位。通过深入学习和灵活运用,开发者可以构建出高效、美观的数据管理界面,提升用户体验。理解并熟练掌握jqGrid的...

    jqGrid_api中文文档

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

    jqGrid 4.6和4.7版本

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

    jqGrid5.X 官方全Demo下载

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据表格。它提供了丰富的功能,如数据分页、排序、过滤、编辑和更多。本资源为 jqGrid5.X 的官方全Demo下载,包含中文文档和离线演示,用户可以在...

    jqgrid序列

    总结来说,jqGrid是一个强大且灵活的前端数据管理工具,适用于需要展示大量结构化数据的Web应用。通过其丰富的配置选项、事件和方法,开发者可以轻松构建功能完善的表格应用,同时,其优秀的性能和易用性使得jqGrid...

    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.0 jqgrid_demo40

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

    jqgrid_doc

    总结来说,jqGrid是一个功能强大的jQuery插件,为Web开发提供了高效的数据展示和管理工具。它的强大功能和易用性使其成为许多企业和个人开发者的首选解决方案。通过深入学习和应用jqGrid,开发者能够构建出更加交互...

    jqgrid +bootstrap4.0 直接使用

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

    jqgrid4.6.rar

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

Global site tag (gtag.js) - Google Analytics