weixin_33730836 2016-08-31 22:08 采纳率: 0%
浏览 35

Gijgo网格-删除行

I use gijgo from http://gijgo.com/Grid/ for a datatable control.
The problem is:
Well... There is a demo for populating datable with json from controller's method. It works.
http://gijgo.com/Grid/Demos/BasicAjaxCall
There is a demo for removing rows from a table populated with JSON directly. It works too. http://gijgo.com/Grid/Methods/removeRow
But when I try to remove rows from table populated with JSON from controller, it doesn't seem to work.
http://gijgo.com/LiveEdit/Index/grid.Base.removeRow.sample.html 

<html>
<head>
  <meta charset="utf-8" />
  <title>Example</title>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="/Areas/version_0_6/dist/modular/grid/css/grid.base.css" rel="stylesheet" type="text/css">
  <script src="/Areas/version_0_6/dist/modular/grid/js/grid.base.js"></script>
</head>
<body>
 <table id="grid"></table>
 <script>
     var grid;
     function Delete(e) {
         if (confirm('Are you sure?')) {
             grid.removeRow(e.data.id);
         }
     }
     grid = $('#grid').grid({
         primaryKey: 'ID',
         dataSource: '/version_0_6/Grid/GetPlayers',
         columns: [
            { field: 'ID', width: 32 },
            { field: 'Name' },
            { field: 'PlaceOfBirth', title: 'Place Of Birth' },
            { title: '', width: 60, align: 'center', tmpl: 'Delete', events: { 'click': Delete } }
         ]
     });
 </script>
</body>
</html>

Am I doing something wrong?
Thank you very much!

  • 写回答

1条回答 默认 最新

  • elliott.david 2016-09-20 23:37
    关注

    Look at the example here: https://code.msdn.microsoft.com/How-to-use-jQuery-Grid-5239f9c0#content.

    The way to do this is to hook a Remove function to the grid and then remove the entry from the database in the controller and then reload.

    Add following to the grid:

    `{ field: "Delete", title: "", width: 34, type: "icon", icon: "glyphicon-remove", tooltip: "Delete", events: { "click": Remove } }`

    Add the Remove function:

    function Remove(e) { $.ajax({ url: "Home/Remove", type: "POST", data: { id: e.data.id } }) .done(function () { grid.reload(); }) .fail(function () { alert("Unable to remove."); }); }

    To add further, you can still solve this problem by not reloading the entire grid and doing the delete in the database and then calling removeRow for the same row in grid in .done' in the Remove function.

    var deleteRow = gridvars[parentTaskid].getById(event.data.id); if (confirm('Are you sure you want to delete Property ID: ' + event.data.id + '?')) { $.ajax({ url: "/<Controller>/<action>", type: "POST", async: false, data: { id: event.data.id, crossRefId: deleteRow.CrossRefId }, }) .done(function (result) { //do stuff based on the result gridvars[parentTaskid].removeRow(event.data.id); }) .fail(function (jqXHR, textStatus) { //do stuff }) } else { //do stuff }

    FYI: In my example I have multiple such grids (gridvars) on the same page so I have bound them all to the same Remove function.

    评论

报告相同问题？