Home > Net >  Traversing through JQgrid
Traversing through JQgrid

Time:12-22

Am traversing through Jqgrid. When i press row action button it should get current pressed row data, to do this i need to get row id of that row when clicked

<tr role="row" id="1" tabindex="-1" >

this is closest Tr and i can reach till this tr easily using below code

$("#rangemaster").children("tr.jqgrow")

but when i try to get id its showing undefined

$("#rangemaster").children("tr.jqgrow").attr("id")

i want to pic id value of that tr.jqgrow please help me out

CodePudding user response:

You can find tr with class name and catch your attribute id using jQuery object $(this).

$("#grid").find("tr.jqgrow").each(function(index) {
  console.log(index   ": "   $(this).attr("id"));
});

Example:

var mydata = [{
    id: "1",
    label: "No 1",
    number: "123",
    status: "OPEN",

  },
  {
    id: "6",
    label: "No 2a",
    number: "222",
    status: "Close"

  }

];

var grid = $("#grid");

grid.jqGrid({
  datatype: "local",
  colNames: ['Col-Id', 'Col-Label', 'Col-Number', 'Col-Status'],
  colModel: [{
      name: 'id',
      index: 'id',
      width: 60,
      sorttype: "int"
    },
    {
      name: 'label',
      index: 'label',
      width: 180,
      sorttype: "string"
    },
    {
      name: 'number',
      index: 'number',
      width: 120,
      sorttype: "float"
    },
    {
      name: 'status',
      index: 'status',
      width: 120,
      sorttype: "string"
    }
  ],
  gridview: true,
  sortname: 'id',
  treeGrid: true,
  treedatatype: 'local',
  height: 'auto',
  pager: "#gridPager"

});

grid[0].addJSONData({
  total: 1,
  page: 1,
  records: mydata.length,
  rows: mydata
});

$("#grid").find("tr.jqgrow").each(function(index) {
  console.log(index   ": "   $(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.8.0/css/ui.jqgrid.min.css">
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.8.0/js/jquery.jqGrid.min.js"></script>

<table id="grid"></table>
<div id="gridPager"></div>

  • Related