如何在jQgrid中添加，编辑，搜索，删除 [英] How to add,edit,search,delete in jQgrid

问题描述

这是我的jQgrid javascript.在这里我想在jQgrid中添加"addRow"方法.我不知道在何处放置"addRow"方法以及如何给出其操作和参数.

This is my jQgrid javascript.Here i want to add "addRow" method in jQgrid.i don't know where to place "addRow" method and how to give their action and parameter.

 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'); 
    } 

我搜索了详细信息.我得到了以下内容.但是我使用此代码无法正常工作. 请帮忙.

i searched the details.i got the below one.but i use this code its not working. please help..

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

                   }  

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

推荐答案

用于在jqGrid中添加行

您可以有一个按钮，并在其单击功能中，可以在jqGrid中添加行数据，语法如下，

You can have a button, and in its click function, you can add row data in jqGrid, syntax as follows,

 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}); 
});

有关其他选项，请在这里查看，请参见/LiveDataManipulation/添加行

For further options, have a look over here, see under /LiveDataManipulation/Add row

对于jqGrid中的编辑"行

要进行编辑，也可以使用与添加rowData及其 javascript -

For edit too, you can have a button same as add rowData and its 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"); 
});

有关其他选项，请在这里查看，请参阅/LiveDataManipulation/Edit行下的

For further options, have a look over here, see under /LiveDataManipulation/Edit row

与搜索(搜索数据)相同，并且删除(删除行)

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

You can also have all things in one place in footer, using navGrid like below example

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 .

For this, you can have a look over Navigator under Live Data Manipulation Menu in that link.

这篇关于如何在jQgrid中添加，编辑，搜索，删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！