`
小杨学JAVA
  • 浏览: 900203 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQgrid要实现在jqGrid表格上动态的加行、删行,最后点击“保存”按钮,与后台交互,保存数据

 
阅读更多

要实现在jqGrid表格上动态的加行、删行,最后点击“保存”按钮,与后台交互,保存数据 

var lastFlag ;
   $gridTable = $("#gridTable").jqGrid( {
        datatype : 'json',
        colNames : ['age', 'sex' ],
        colModel : [ 
                   {name : 'age',index : 'age',width : 80,editable:true,edittype:'text',editrules:{required:true}}, 
                   {name : 'sex',index : 'sex',width : 160,editable:true,edittype:'text',editrules:{required:true}} 
                   ],
        rowNum : 10,
        pager : "#tablePager",
        multiselect : false,
        viewrecords : true,
        sortorder : "desc",
        jsonReader : {
            root : "dataRows",
            repeatitems : false
        },
        caption : "数据列表",
        height : "auto",
        rownumbers : true,
      onSelectRow : function(id){
        if(id && id!=lastFlag){
         $('#gridTable').jqGrid('saveRow',lastFlag);      
         lastFlag=id;
        }
        $('#gridTable').jqGrid('editRow',id,true); 

      },   
     editurl : "../propManage.do?method=doNothing"        
    })

  

    /** 设置增行按钮的click事件处理 */
    $("#addButton").bind("click", function() {
     var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow"); 
        var dataRow = {  
            age: "",
            sex: ""
        };    
        var ids = jQuery("#gridTable").jqGrid('getDataIDs');
        var rowid = getMaxId(ids) + 1;
        if (selectedId) {         
            $("#gridTable").jqGrid("addRowData", rowid, dataRow, "after", selectedId);
        } else {  
            $("#gridTable").jqGrid("addRowData", rowid, dataRow, "last");     
        }       
    })
   

    /** 设置删行按钮的click事件处理 */
    $("#removeButton").bind("click", function() {
     var selectedId = $("#gridTable").jqGrid("getGridParam","selrow"); 
     if(!selectedId){
        alert("请选择要删除的行");
        return;
     }else{           
         $("#gridTable").jqGrid("delRowData", selectedId);      
     } 
    })

  

问题1:JQGRID  编辑模式下怎样取行数据?

  用户操作模拟:用户新增一行,鼠标点进去,该行进入编辑状态,填写数据,点击保存。

  问题出现了: 点击保存以后,需要通过getRowData()获取表格里的数据传回后台,但是当行在编辑状态下时,getRowData()取得的值为类似<input ....></input> 的html标签,不是编辑框中输入的值。

  解决途径:

  alert getRowData()获取出的数据,你会发现<input>标签的id是5_age, 6_age之类的,也就是行id+“_colModel name”,这就好办了,

  做法就是找到编辑行的单元格的id,然后得到单元格里的内容,通过"setRowData"将其保存起来,然后再通过getRowData()取值。

  示例:

     var selectedId = $('#gridTable').jqGrid("getGridParam", "selrow");
     var ageId = selectedId + "_age";
     var sexId = selectedId + "_sex";    
     var age= $('#'+ageId).val();
     var sex= $('#'+sexId).val();    
   $('#gridTable').jqGrid('setRowData',selectedId,{age:age,sex:sex},'');  

  再通过getRowData()取值,结果正确。

分享到:
评论
1 楼 zhixinhuacom 2016-04-27  
jqgrid 按回车键默认提交数据,怎么做才能时回车不提交数据,因为我有保存按钮一次性保存。

相关推荐

    jqgrid行编辑+动态为其他列赋值

    jqGrid允许用户在表格的每一行上进行编辑,这通常通过双击或点击编辑按钮来触发。默认情况下,jqGrid提供了两种编辑模式:行编辑和弹出式编辑。行编辑模式下,单元格变为可编辑,用户可以直接在表格内修改数据;而弹...

    jqgrid+struts2实现的增删改查

    7. **自定义事件处理**:可以为jqGrid的按钮添加点击事件监听器,比如在“新增”按钮点击时弹出一个模态对话框,让用户输入数据;在“删除”操作前弹出确认提示等。 8. **拦截器与安全性**:Struts2的拦截器可以...

    jqgrid简单前后台增删改查异调用实例

    总结,jqGrid是实现数据展示和管理的强大工具,结合C#后台,可以构建出高效、灵活的Web应用。理解其前后端交互机制、增删改查操作以及自定义功能的使用,是开发人员必须掌握的关键技能。通过实例学习和实践,可以...

    jqGrid表格插件

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作大量结构化数据。它提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得开发人员能够轻松地创建交互式的表格。下面将详细介绍...

    jqGrid模板

    4. 添加交互功能:根据需求添加编辑、删除、保存等操作的事件处理函数,实现数据的增删改查。 5. 自定义样式:使用CSS调整表格的样式,使其符合项目的视觉风格。 6. 调试与优化:测试表格的各项功能,确保在不同...

    Spring MVC 分页组件和JqGrid导出

    此外,JqGrid还允许我们在表格行上添加自定义操作按钮。例如,我们可以在每一行数据旁边添加一个“编辑”按钮,当用户点击时触发编辑操作。这可以通过定义列模型中的`formatter`和`actions`实现。前端可以通过监听...

    jqGrid-3.5.alfa-2

    jqGrid 是一个非常著名的 jQuery 插件,专用于创建数据密集型网格视图。这个"jqGrid-3.5.alfa-2"版本是截至2009年4月2日的最新版本,...对于需要在网页上处理复杂数据展示和交互的项目,jqGrid是一个非常实用的工具。

    ssh+jqgrid的整合

    JQGrid是一款基于jQuery的前端数据网格插件,提供了丰富的表格操作功能,如分页、排序、过滤、编辑等,为用户界面带来优秀的交互体验。 在SSH框架中整合JQGrid,主要目的是在后台处理数据的同时,提供一个前端用户...

    ASP.NET中使用jQGrid

    同时,你可能还需要处理编辑和删除操作的回调函数,以实现数据的增删改查逻辑。 总之,ASP.NET结合jQGrid提供了一种强大的方式来展示和管理大量数据。通过学习和掌握jQGrid的各种选项和API,开发者可以创建出高度...

    jqGrid与Sturts2的结合例子

    在这个"jqGrid与Struts2的结合例子"中,我们将探讨如何将这两者集成,以实现动态加载、数据过滤、编辑和保存等功能。 1. ** jqGrid的基本使用** - 初始化:在HTML页面中,通过`&lt;table&gt;`元素和jQuery初始化jqGrid,...

    jqGrid搜索

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作大量结构化的数据。它提供了丰富的功能,如分页、排序、过滤、编辑、添加、删除和搜索等,使得开发者能够轻松构建交互式的表格。在本教程中,我们...

    asp.net + jqgrid

    6. 交互功能:jqGrid提供了丰富的用户交互功能,如点击行选中、单元格编辑、行添加和删除。这些功能可以通过设置jqGrid的选项或监听事件来实现,例如,`onSelectRow`事件用于处理行选中操作。 7. 自定义行为:...

    jqGrid与Struts2的结合应用

    jqGrid是一款功能强大的JavaScript库,专门用于创建交互式的表格,支持数据的检索、排序、过滤、编辑等功能。而Struts2则是一个流行的Java Web框架,它简化了MVC(Model-View-Controller)架构的实现,提供了丰富的...

    Jquery+BootStrap+ztree+jqgrid所需js和css文件

    而jqgrid则用于显示和操作表格数据,比如在后台管理系统中展示和编辑记录。通过合理地整合这些工具,开发者可以构建出高效、易用且美观的Web应用。不过要注意的是,尽管这些组件功能强大,但在使用时也需要考虑性能...

    jqGrid源文件+官方MVC示例

    2. **视图(View)**:展示数据的界面,这里指网页上的jqGrid表格。视图通过JavaScript代码与模型交互,获取数据并渲染到表格中。 3. **控制器(Controller)**:作为模型和视图之间的桥梁,接收用户的请求,调用...

    jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法

    - 当不希望立即加载数据,即想在需要时动态显示表格,可以将`url`设为空字符串`""`,并把`datatype`设为"local",以避免初始化时的错误,尤其是页面上的其他按钮可能会因此失效。 - 如果需要在开始时就加载数据,`...

    asp.net无刷新编辑表格

    综上所述,ASP.NET无刷新编辑表格涉及前端与后端的紧密协作,利用Ajax技术和各种框架、库来实现高效的动态数据更新,提高网页的响应速度和用户体验。开发者可以根据项目需求选择合适的技术栈和实现方式。

    jquery jqgird 1.3.2

    除了上述基本功能,jqGrid还提供了许多高级特性,如行内编辑、批量编辑、列动态调整、数据排序、自定义按钮、导出数据到CSV或Excel等。这些特性使得jqGrid成为了一个功能全面的数据管理工具,能满足各种复杂的数据...

    springmvc+bootstrap+jsqumbile

    8. 可能还需要处理一些交互事件,如点击行、编辑单元格等,这可以通过jqGrid提供的API实现。 这个项目的实际应用可能包括创建一个后台管理系统,用于展示和管理数据库中的记录,例如员工信息、订单数据或者客户资料...

    S2HH+jqGrip的用户增删改查完整示例

    1. **添加(Add)**:用户可以通过前端界面输入新用户的详细信息,点击“添加”按钮后,这些信息将被发送到服务器端,通过S2HH框架处理,将新用户的数据保存到Oracle数据库中。 2. **删除(Delete)**:用户选择一...

Global site tag (gtag.js) - Google Analytics