jQgrid如何添加、编辑、搜索、删除答案

【问题标题】：How to add,edit,search,delete in jQgridjQgrid如何添加、编辑、搜索、删除
【发布时间】：2014-06-02 20:24:49
【问题描述】：

这是我的 jQgrid javascript。我想在 jQgrid 中添加“addRow”方法。我不知道在哪里放置“addRow”方法以及如何给出它们的操作和参数。

 function jqGridShow(){
      var lastsel2;
      var parameters;
        jQuery("#jqGrid01").jqGrid({

            url: "JqGridDemoJson.action",
            datatype:"json",
            height: 200,
            rowNum: 10,
            rowList: [10,20,30],


  colNames:['Inv No','Name'],
  colModel:[
             {name:'id',index:'id', editable: true,sorttype:"int",search:true},
             {name:'name',index:'name', editable: true,width:30}
            ],
            pager: "#jqGridPager01",
            viewrecords: true,
            add: true,
            edit: true,
            addtext: 'Add',
            edittext: 'Edit',
            caption: "Data",
            hidegrid:false,
            multiselect:true,

   onSelectRow: function(id){

      });


        // Setup buttons
        jQuery("#jqGrid01").jqGrid('navGrid','#jqGridPager01', 
                {edit:true,add:true,del:true,search:true}, 
                {height:200,reloadAfterSubmit:true}
        );



        // Setup filters
        jQuery("#jqGrid01").jqGrid('filterToolbar',{defaultSearch:true,stringResult:true});

        // Set grid width to #content
        $("#jqGrid01").jqGrid('setGridWidth', $("#content").width(), true); 

        // Bootstrap customization
        $(".ui-pg-input").attr('class', 'form-control'); 
    }

我搜索了详细信息。我得到了以下一个。但是我使用此代码它不起作用。请帮忙..

               parameters =
                   {
                      rowID : "new_row",
                      url:"addGroupLevel3.action",
                      initdata : {},
                      position :"first",
                      useDefValues : false,
                      useFormatter : false,
                      addRowParams : {extraparam:{}}

                   }  

            jQuery("#grid_id").jqGrid('addRow',parameters);

【问题讨论】：

标签： jquery struts2 jqgrid

【解决方案1】：

在 jqGrid 中添加行

可以有一个按钮，在它的点击功能中，可以在jqGrid中添加行数据，语法如下，

 jQuery("#grid_id").editGridRow( the_row_id, options );

示例： 对于按钮 - html <input type="BUTTON" id="bedata" value="Edit Selected" />

javascript -

$("#bedata").click(function(){ 
 jQuery("#editgrid").jqGrid('editGridRow',"new",height:280,reloadAfterSubmit:false}); 
});

更多选项，请看这里，see under /LiveDataManipulation/Add row

对于 jqGrid 中的编辑行

对于编辑，您也可以有一个与添加 rowData 相同的按钮及其 javascript -

$("#bedata").click(function(){ 
     var gr = jQuery("#editgrid").jqGrid('getGridParam','selrow'); 
     if( gr != null ) jQuery("#editgrid").jqGrid('editGridRow',gr {height:280,reloadAfterSubmit:false}); 
     else alert("Please Select Row"); 
});

更多选项，请看这里，see under /LiveDataManipulation/Edit row

搜索（搜索数据）和删除（删除行）也一样

您还可以使用 navGrid 将所有内容放在页脚中的一个位置，如下例所示

jQuery("#editgrid").jqGrid('navGrid','#pagernav', {}, //options 
   {height:280,reloadAfterSubmit:false}, // edit options 
   {height:280,reloadAfterSubmit:false}, // add options 
   {reloadAfterSubmit:false}, //del options 
   {} // search options 
);

为此，您可以查看该链接中 Live Data Manipulation 菜单下的 Navigator。

【讨论】：