jqGrid常用增删改查Demo及常见问题


1,jqGrid 第一次加载方法,和查询按钮可以执行的方法

方法1
jQuery("#tableId").jqGrid({
 url: "/jqGrid/select.html",
        //发送数据
        postData: {"stock": $("#stock").val(), "name": $("#lastSales").val()},
        //发送方式
        mtype: "get",
        datatype: "json",
        //表格高度
        height: 400,
        //列名
        colNames: [‘ ‘, ‘ID‘, ‘Last Sales‘, ‘Name‘, ‘Stock‘, ‘Ship via‘, ‘Notes‘,‘Amt‘],
        ...
})
作为最常用的jqGrid方法,它起到的是一个渲染页面和初始化一些方法的作用,后续的效果都是在该方法渲染好table等html后,才起作用。
而且,此方法,只在第一次加载页面时触发。
但是我们做页面展示,一般都要有查询按钮,这个方法显然不适用,如果将该方法包装在$("#buttonId").click里,
是不会触发的。具体源码不清楚。(我第一次做查询按钮的时候,就是这么做的,debug发现,代码是一步一步往下走,就是调不到后台)

那么查询按钮应该用什么方法呢,还是这个方法,只是带上了参数。
这个方法就是jqGrid对应的按钮可以触发的查询方法(而且必须是方法1渲染好页面后才能使用)
 $(grid_selector).jqGrid(‘setGridParam‘, {
        url: "/jqGrid/select.html",
        //发送数据
        postData: {"stock": $("#stock").val(), "name": $("#lastSales").val(), "note": $("#notes").val()},
        page: 1,
        //该方法是加载完
        loadComplete: function (xhr) {
            alert("查询完成"+xhr.result);
        }
    }).trigger("reloadGrid");//重新载入

2,按钮可以触发的增删改方法,

如果你不想用jqGrid左下角的导航栏增删改,那么就可以用这几个方法

$("#buttonForEdit").click(function(){
    //gr是获取 编辑行的id
    var gr = jQuery("#grid-table").jqGrid(‘getGridParam‘, ‘selrow‘);
    if (gr != null) jQuery("#grid-table").jqGrid(‘editGridRow‘,
                                                  gr,
                                                { height: 300, reloadAfterSubmit: false

    

    });
    else alert("Please Select Row");
});

$("#buttonForInsert").click(function(){
    jQuery("#grid-table").jqGrid(‘editGridRow‘, "new", { height: 300, reloadAfterSubmit: false });
});

$("#buttonForDelete").click(function(){
        var gr = jQuery("#grid-table").jqGrid(‘getGridParam‘, ‘selrow‘);
        if (gr != null){
            var result=jQuery("#grid-table").jqGrid(‘delGridRow‘, gr, { reloadAfterSubmit: false });
        alert(result);}
        else alert("Please Select Row to delete!");

});

对于增删改,很多人会问,url在哪填写,

其实jqGrid对于这三个的url,默认为一个,就是渲染页面的方法的一个参数,editUrl。

那怎么区分呢。对此,jqGrid提交后台的url中,他会默认增加一个叫oper的属性

如果是edit,url就会是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=edit

如果是update,url就会是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=add

如果是delete,url就会是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=del

所以后台可以根据oper去判断是什么操作。

很多人会问,导航栏自带的小按钮的add和edit,如果成功了,怎么提示。

这个我也不知道,

但是我找到一个事件可以起到这个效果。

afterComplete:function执行完add和edit后触发的回调函数,可以接收后台返回的数据

  afterComplete:function(xhr){
               alert(xhr.responseText);
                },
                //成功后关闭此窗口
                closeAfterAdd: true

xhr={readyState=4,responseText="后台返回的信息"  status=200 ...}

所以后台需要返回 sunccess 或者error之类的信息。

时间: 2024-10-01 07:35:20

jqGrid常用增删改查Demo及常见问题的相关文章

数据库基本查询语句(SQL常用增删改查语句 简单复习 mark)

SQL常用增删改查语句 1增 1.1[插入单行]insert [into] <表名> (列名) values (列值)例:insert into Strdents (姓名,性别,出生日期) values ('开心朋朋','男','1980/6/15') 1.2[将现有表数据添加到一个已有表]insert into <已有的新表> (列名) select <原表列名> from <原表名>例:insert into tongxunlu ('姓名','地址','

受老师邀请给学院国创队伍培训php,以一个实战新闻cms增删改查demo为例,写的文档讲义供大家参考

PHP实战基础——以一个新闻cms的增删改查为例 一.        环境配置 二.        数据库创建 三.        增删改查demo 连接数据库 <?php $link=mysql_connect("localhost","root","root"); mysql_select_db("demo",$link); mysql_query("set names utf8"); ?>

hibernate 入门增删改查demo

原文:hibernate 入门增删改查demo 源代码下载地址:http://www.zuidaima.com/share/1550463648238592.htm

Mysql 常用增删改查命令集合教程

创建:create      插入:insert 更新:update  查询:select 删除:delete 修改:alter     销毁:drop 创建一个数据库: create database 数据库名 [其他选项]; create database `samp_db`;创建数据库表: create table 表名称(列声明); create table `students` ( `id` int unsigned not null auto_increment primary ke

SSH登录与增删改查demo详解+源代码

点击下载,测试绝对可用SSH整合框架登录加增删改查demo 下载地址:http://download.csdn.net/detail/qq_33599520/9784679   一.框架概述 spring+Struts2+hibernate(SSH)整合框架是一种非常典型与实用的Web项目MVC架构,其中: Spring主要通过控制反转(IOC)与依赖注入(DI)控制对象的创建与维护,与实现面向切片编程(AOP),核心配置文件为:applicationContext.xml. Struts2是M

ztree--插件实现增删改查demo(完整版)

ztree--插件实现增删改查demo(完整版) var setting = { async: { enable: true,       //开启异步加载处理 dataFilter: filter  //用于对 Ajax 返回数据进行预处理的函数 }, view: { addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectedMulti: false, }, check: { enable: false }, data:

sed的增删改查、sed常见问题

作者:Georgekai 归档:学习笔记 2018/1/10 本章正题:sed的使用.sed常见问题 1.1 SED 1.1.1 sed是什么 :全称字符流编辑器Stream Edite 1.1.2 sed功能与版本: 1. 处理纯文本文件.日志.配置文件 2. 增删改查 3. 查看sed版本:sed --version 1.1.3 语法格式 1. sed  [选项]  [sed指令]  [输入文件] 2. sed -i.bak 's#oldboy#oldbgirl#g' oldboy.txt

hibernate之增删改查demo

1 package dao; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import org.hibernate.Query; 7 import org.hibernate.SQLQuery; 8 import org.hibernate.Transaction; 9 10 import com.sun.org.apache.bcel.internal.generic.GETSTATIC; 11 12 import

SQL常用增删改查语句

1增 1.1[插入单行]insert [into] <表名> (列名) values (列值)例:insert into Strdents (姓名,性别,出生日期) values ('开心朋朋','男','1980/6/15') 1.2[将现有表数据添加到一个已有表]insert into <已有的新表> (列名) select <原表列名> from <原表名>例:insert into tongxunlu ('姓名','地址','电子邮件')