问题描述

关于jqGrid 表单重新加载的问题

最近在使用JqGrid 的时候 有一个问题部是很明白
    在表单第一次加载的时候要求只显示表头。不显示数据，所以我在第一次加载的时候没有给url；
    //加载页面时,同时加载表头
$(document).ready(function() {
    pageSetUp();
    jQuery("#jqgrid").jqGrid({
        url : ' ',
        datatype : "json",
        height : 'auto',
        colNames : [ 'id', '姓名', '年龄', '性别', '部门', '职位', '备注','密码','薪水'],

        colModel : [
        {name : 'id',index : 'id',hidden : true },
        {name : 'name',index : 'name',editable : true},
        {name : 'age',index : 'age',editable : true},
        {name : 'gender',index : 'gender',align : "right",editable : true},
        {name : 'dept',index : 'dept',align : "right",editable : true},
        {name : 'position',index : 'position',align : "right",editable : true},
        {name : 'remark',index : 'remark',sortable : false,editable : true},
        {name : 'possword',index:'possword',editable :true, hidden : true},
        {name : 'seraly',index:'seraly',editable :true, hidden : true},

        ],
        rowNum : 10,
        pager : '#pjqgrid',
        sortname : 'id',
        toolbarfilter : true,
        viewrecords : true,
        sortorder : "asc",
        jsonReader: {

　　　 　root: "rows",　　　 // Json数据
　　 　total: "total",　　 // 总页数
　　　 　page: "page",　　// 当前页
　　 　records: "records",// 总记录数
　 　repeatitems: false
　　 },

        editurl : "${TINY_CONTEXT_PATH}/ajax/dummy.pagelet",
        caption : "Zto",
        multiselect : true,
        autowidth : true,
    });

    然后在页面上点击查询所有数据时，要求把所有数据读取出来 。 所以我使用了 重新加载 .trigger('reloadGrid') 的方法。 

    jQuery("#jqgrid").jqGrid('setGridParam',{
           url : "list.do",
           datatype : 'json',
           //发送数据
           postData : {"name":name ,"age":age,"gender":gender,"posswrod":posswrod,
                     "seraly":seraly,"position":position,"dept":dept,"remark":remark},
           page : 1          

        }).trigger('reloadGrid');//重新载入
    })

    可是网页报错
    Uncaught TypeError: Illegal invocation
    纠结了半天后，发现要在上面加上一段
        var name=$("#name").val();
        var age=$("#age").val();
        var gender=$("#gender").val();
        var posswrod=$("#posswrod").val();
        var seraly=$("#seraly").val();
        var position=$("#position").val();
        var dept=$("#dept").val();
        var remark=$("#remark").val();

            数据就能正常显示了

            全部代码

            $(function(){
    $("#test").click(function(){
         //获取内容
        var name=$("#name").val();
        var age=$("#age").val();
        var gender=$("#gender").val();
        var posswrod=$("#posswrod").val();
        var seraly=$("#seraly").val();
        var position=$("#position").val();
        var dept=$("#dept").val();
        var remark=$("#remark").val();

        jQuery("#jqgrid").jqGrid('setGridParam',{
           url : "list.do",
           datatype : 'json',
           //发送数据
           postData : {"name":name ,"age":age,"gender":gender,"posswrod":posswrod,
                     "seraly":seraly,"position":position,"dept":dept,"remark":remark},
           page : 1          

        }).trigger('reloadGrid');//重新载入

    })
});

最后提一个问题就是：为什么要在点击后，获取
var name=$("#name").val(); 这样的一个值。
为什么不加上就会报错了？

解决方案

肯定要加变量的申明啊，name，age，gender。。等等你不申明那不是变量不存在，你直接使用当然报错 了。除非你window作用域下也存在这些变量的申明

postData : {"name":name ,"age":age,"gender":gender,"posswrod":posswrod,
"seraly":seraly,"position":position,"dept":dept,"remark":remark},