`
zhuyuangping
  • 浏览: 39301 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

jqgrid学习笔录

 
阅读更多
$("#list").trigger("reloadGrid"); //重新载入jqGrid数据

1 Struts2参数冲突,修改jqgrid.js
        searchString改 search_String; 
searchOper;改search_Oper; 
searchField;改search_Field1;

2 Struts2 编码GBK 导致乱码(设置提交为 AJAX,修改Struts2当表单是Ajax编码为UTF-8):$("#gridTable").jqGrid({
url : "jqGrid01.action",
loadBeforeSend: function(xhr) {
        return xhr.setRequestHeader('isAjax', 'true');
    },



修改struts2.3.1.2源码org.apache.struts2.dispatcher.Dispatcher第677行prepare方法
    原来是:
    if (defaultEncoding != null) {
        encoding = defaultEncoding;
    }
    修改为:
    if (request.getHeader("isAjax") != null) {//判断是否是ajax请求,是的话则采用encoding=utf-8编码
    encoding = "UTF-8";
    LOG.debug("ajax request");
} else if (defaultEncoding != null) {
    encoding = defaultEncoding;
}



struts2定义父类属性同时返回json数据
<result type=”json”> 
<param name=”ignoreHierarchy”>false</param> 
</result 


3


$('#MyGrid').jqGrid({
    url: 'Misc/MyjsonService.svc/GetData',
    editurl: 'Misc/MyjsonService.svc/AddEditDeleteGridRow',
    datatype: 'json',
    colNames: ['UserId', 'UserName', 'Email Address', 'Password Last Changed', 'Locked'],
    colModel: [
                { name: 'UserId', index: 'UserId', hidden:true, editable: true, editrules:{edithidden: true}},
                { name: 'UserName', index: 'UserName', editable: true, width: 200, sortable: false, editrules: { required: true} },
                { name: 'Email Address', index: 'Email', editable: true, width: 500, sortable: false, editrules: { email: true, required: true} },
                { name: 'Password Last Changed', index: 'LastPasswordChangedDate', editable: false, width: 200, sortable: false, align: 'center' },
                { name: 'Locked', index: 'IsLockedOut', sortable: false, editable: true, edittype: "checkbox", formatter: 'checkbox', align: 'center' }
            ],
    rowNum: 20,
    hidegrid: false,
    rowList: [20, 40, 60],
    pager: $('#MyGridPager'),
    sortname: 'UserName',
    viewrecords: true,
    multiselect: false,
    sortorder: 'asc',
    height: '400',
    caption: 'Database Users',
    shrinkToFit: false,
    onPaging: function(pgButton) {
        this.DBUserId = null;
    },
    onSelectRow: function(Id) {
        if (Id && Id !== this.DBUserId) {
            this.DBUserSelect(Id);
        }
    },
    loadComplete: function() {
        if (this.DBUserId)
            this.DBUserSelect(this.DBUserId, true);
    },
    gridComplete: function() {
        var grid = $('#MyGrid');
        var body = $('#AvailableDBUsersArea');
        if ((grid) && (body)) {
            grid.setGridWidth(body.width() - 10);

            //keep the grid at 100% width of it's parent container
            body.bind('resize', function() {
                var grid = $('#MyGrid');
                var body = $('#AvailableDBUsersArea');
                if ((grid) && (body)) {
                    grid.setGridWidth(body.width() - 2);
                }
            });
        }
    }
}).navGrid('#MyGridPager',
        { add: true, edit: true, del: true, refresh: false, search: false }, //general options
        {
        //Options for the Edit Dialog
        editCaption: 'Edit User',
        height: 250,
        width: 520,
        modal: true,
        closeAfterEdit: true,
        beforeShowForm: function(frm) { $('#UserName').attr('readonly', 'readonly'); },
        beforeShowForm: function(frm) { $('#UserId').removeAttr('readonly'); },
        beforeShowForm: function(frm) { $('#UserId').attr('readonly', 'readonly'); }
    },
        {
            //Options for the Add Dialog
            addCaption: 'Add User',
            height: 250,
            width: 520,
            modal: true,
            closeAfterAdd: true,
            beforeShowForm: function(frm) { $('#UserName').removeAttr('readonly'); },
            beforeShowForm: function(frm) { $('#UserId').removeAttr('readonly'); },
            beforeShowForm: function(frm) { $('#UserId').attr('readonly', 'readonly'); }
        },
        {
            //Delete options
            width: 350,
            caption: 'Delete User',
            msg: 'Are you sure you want to delete this User?\nThis action is irreversable.'
        },
        {} //Search options
    );
分享到:
评论

相关推荐

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

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

    jqgrid学习笔记

    jqGrid 是一个强大的 jQuery 插件,用于创建交互式的表格,它允许用户在网页上轻松地展示、操作和检索数据。以下是对 jqGrid 的详细解释: 1. **安装jqGrid**: 安装 jqGrid 非常简单,只需要将相关的 CSS 和 ...

    Java中jqGrid 学习笔记整理——进阶篇(二)

    在本篇Java中jqGrid的学习笔记整理中,我们将聚焦于jqGrid与后台Java服务的数据交互。jqGrid是一款强大的JavaScript库,用于创建动态、交互式的表格,而这里的进阶篇(二)将涉及到如何通过Java后端来提供数据支持。 ...

    jquery.jqGrid.min.js 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====&gt; Jqgrid...

    ui.jqgrid.css 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====&gt; Jqgrid...

    jqGrid 学习笔记整理——进阶篇(一 )

    jqGrid 是一个强大的 jQuery 插件,用于创建交互式的表格,具有数据检索、排序、过滤、编辑等多种功能。本篇文章将深入探讨 jqGrid 的进阶使用,特别关注如何在浏览导航栏添加自定义按钮。 首先,jqGrid 的基本结构...

    jqgrid 简单学习笔记

    在JqGrid的学习中,首先需要理解其基本配置和用法。在示例中,我们看到JqGrid的初始化代码,通过`jQuery("#jqgridlist").jqGrid()`方法创建一个表格。这个表格的数据源通过`url`属性指定,通常是一个处理数据的...

    jqGrid 的使用笔记:1. 开始

    **jqGrid 使用笔记:开始** jqGrid 是一个强大的 jQuery 插件,用于创建灵活、功能丰富的数据网格。这篇笔记将引导我们逐步了解如何在项目中开始...通过学习和掌握 jqGrid,我们可以创建具有专业级别的数据管理界面。

    jqgrid4.6.zip

    "Jqgrid之onSelectRow 和onCellSelect 事件不能一起用-yellowcong_yelllowcong的专栏-CSDN博客_files"和"jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)_web开发自学-CSDN博客_files"以及"jqgrid...

    jquery-ui-1.7.1.custom.css 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====&gt; Jqgrid...

    grid.locale-cn.js 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====&gt; Jqgrid...

    jquery-1.5.2.min.js 自家博客专用

    博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====&gt; Jqgrid...

    jggrid资料

    3. **jqgrid学习笔记网搜和个人经验1.pdf**:作者通过网络搜集和自己的实践,整理出的学习笔记,包含了常见问题解决方案和实践经验分享,对于初学者极具参考价值。 **总结** jgGrid作为一个强大的JavaScript表格...

    jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)

    本篇学习笔记将详细介绍如何使用jqGrid实现分页和搜索功能。 首先,要使用jqGrid,你需要在HTML页面中引入必要的CSS和JavaScript文件。这些文件包括jqGrid的样式表`ui.jqgrid.css`,jQuery库`jquery-2.0.3.min.js`...

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

    总之,这个压缩包提供了一个基础的jqGrid应用实例,适合初学者学习和理解如何在HTML5环境中集成和使用jqGrid。通过研究和修改这个示例,你可以掌握如何动态加载数据、实现搜索和排序功能,以及如何定制和美化表格。...

    MongoDB入门教程

    在MongoDB学习笔记(三)中,文章介绍了在MVC(Model-View-Controller)模式下,如何使用Jqgrid表格来操作MongoDB中的数据。Jqgrid是一个jQuery插件,用于创建动态网格视图。这部分教程将帮助开发者了解如何在Web应用...

Global site tag (gtag.js) - Google Analytics