如何在jQgrid中添加,编辑,搜索,删除

时间:2014-04-18 10:28:12

标签: jquery struts2 jqgrid

这是我的jQgrid javascript.Here我想添加" addRow" jQgrid.i中的方法不知道放在哪里" 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); 

1 个答案:

答案 0 :(得分:2)

用于在jqGrid中添加行

你可以有一个按钮,在它的click功能中,你可以在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

搜索搜索数据)&amp; 删除删除行

你也可以在页脚的一个地方放置所有东西,使用 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 
);

为此,您可以查看该链接中实时数据操作菜单下的导航器