如何添加編輯，如下刪除了JQ網格按鈕的每一行

我想顯示的編輯和在JQ網格中的每一行刪除按鈕，代碼：如何添加編輯，如下刪除了JQ網格按鈕的每一行

$(document).ready(function() { 
    jQuery("#jQGridDemo").jqGrid({ 
     url: 'http://localhost:52618/Sample/GetEmployeeDetails', 
     datatype: "json", 
     mtype: "POST", 
     colNames: ['Eno', 'Ename', 'City', 'Salary'], 
     colModel: [ 
     { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true }, 
     { name: 'Ename', index: 'Ename', width: 150, editable: true }, 
     { name: 'City', index: 'City', width: 150, editable: true }, 
      { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true }, 

     ], 
     rowNum: 10, 
     mtype: 'Get', 
     loadonce: true, 
     pager: '#jQGridDemoPager', 

     viewrecords: true, 

     caption: "List Employee Details", 
     height: "230px", 
     search: true, 
     editable: true 
    });

要顯示我已經使用JSON數據。

我掙扎了兩天，任何人都可以幫助我。

來源

2014-02-21 Sanjay

** [在線編輯]（http://www.codeproject.com/Articles/610359/JqGrid-Inline-Editing）** || ** [JqGrid編輯和刪除]（http://stackoverflow.com/questions/7213363/jqgrid-edit-delete-button-with-each-row）**希望它有幫助.. – Bhavik

也許你應該只是添加新的列在格式化程序中：「actions」'？ – Oleg

是的，它正在爲格式化程序工作：「行動」，謝謝@Bhavik – Sanjay

我得到了它，就需要額外的列，並添加formaater行動作爲模型類。而已。

<script > 
    $(document).ready(function() { 
    jQuery("#jQGridDemo").jqGrid({ 
    url: 'http://localhost:52618/Sample/GetEmployeeDetails', 
    datatype: "json", 
    mtype: "POST", 
    colNames: ['Eno', 'Ename', 'City', 'Salary','Actions'], 
    colModel: [ 
     { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true }, 
     { name: 'Ename', index: 'Ename', width: 150, editable: true }, 
     { name: 'City', index: 'City', width: 150, editable: true }, 
     { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true }, 
     { 
      name: 'Actions', index: 'Actions', width: 100, height: 120, editable: true, forma ter: 'actions', 
      formatoptions: { 
          keys: true, 
          editformbutton: true 
          } 
     } 
     ], 
     rowNum: 10, 
     mtype: 'Get', 
     loadonce: true, 
     pager: '#jQGridDemoPager', 
     viewrecords: true, 
     caption: "List Employee Details", 
     height: "230px" 
    }); 
});

來源

2014-02-24 04:41:30 Sanjay

提到editLink並在edit和delete顯示EditcolModel名deleteLink和jqGrid的刪除按鈕的每一行。

代碼：

$(document).ready(function(){ 
      //jqGrid 
      $("#usersList").jqGrid({ 
       url:'<%=request.getContextPath() %>/Admin/getAllUsersList', 
       datatype: "json",    
       colNames:['Edit', 'Delete','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number'], 
       colModel:[ 
        {name:'edit',search:false,index:'userId',width:30,sortable: false,formatter: editLink}, 
        {name:'delete',search:false,index:'userId',width:35,sortable: false,formatter: deleteLink},      
        {name:'email',index:'user.primaryEmail',width:150}, 
        {name:'isActive',index:'user.isActive',width:80}, 
        {name:'firstName',index:'firstName', width:100}, 
        {name:'middleName',index:'middleName', width:100}, 
        {name:'lastName',index:'lastName', width:100}, 
        {name:'mobileNo',index:'user.mobileNo', width:100}, 
        ], 
        rowNum:20, 
        rowList:[10,20,30,40,50], 
        rownumbers: true, 
        pager: '#pagerDiv', 
        sortname: 'user.primaryEmail', 
        viewrecords: true, 
        sortorder: "asc", 

      }); 
      $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%"); 
      $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65); 
      $('#load_usersList').width("130"); 
      $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true}); 
      $(".inline").colorbox({inline:true, width:"20%"}); 

     }); 

     function editLink(cellValue, options, rowdata, action) 
     { 
      return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>"; 
     } 
     function deleteLink(cellValue, options, rowdata, action) { 
      return "<a href='javascript:deleteRecord(" + rowdata.userId + ")' class='ui-icon ui-icon-closethick'></a>"; 
     } 
     function deleteRecord(id){ 
      var result = confirm("Are you sure you Want to delete?"); 
      if (result==true) { 
       window.location.href="<%=request.getContextPath()%>/Admin/deleteUser/"+id; 
      } 
     }

來源

2014-02-21 09:30:07 pudaykiran

嘗試此刪除

$(document).ready(function() { 
     jQuery("#jQGridDemo").jqGrid({ 
      url: "your get URL", 
      datatype: "json", 
      mtype: "POST", 
      colNames: ['Eno', 'Ename', 'City', 'Salary'], 
      colModel: [ 
      { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true }, 
      { name: 'Ename', index: 'Ename', width: 150, editable: true }, 
      { name: 'City', index: 'City', width: 150, editable: true }, 
       { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true }, 
      { name: '', index: '', sortable: false, formatter: Remove, align: "center" }, 
     ], 
     rowNum: 10, 
     mtype: 'Get', 
     loadonce: true, 
     pager: '#jQGridDemoPager', 

     viewrecords: true, 

     caption: "List Employee Details", 
     height: "230px", 
     search: true, 
     editable: true 
    }); 

    $(".memberAction").click(function() { 

     var mopId = $(this).attr("id"); 
     var ref=$(this).attr("name"); 
     //do remove ajax call with mopId 
    }); 

    function Remove(cellvalue, options, rowObject) { 

     var id = rowObject.id; 
     var refNo = rowObject.Reference; 
     var html = ''; 
      html = "<a id='" + id + "' class='memberAction' name='" + refNo + "' style='color:blue;cursor:pointer;' type='button' title='" + remove + "'>" + remove + "</a>"; 

     return html; 
    }

來源

2014-02-21 09:43:56

如何添加編輯，如下刪除了JQ網格按鈕的每一行

回答

相關問題