Bulk Edit, Select Multiple Rows

bulk edit2

You can select multiple records with set_multiselect() method. When multiselect is enabled, a checkbox is shown to the left of each row. Use multiselect feature to for bulk edit such as delete multiple records and save multiple selected rows.

Version 6.7.10 Update

Set the 2nd parameter in set_multiselect() to true to persist row selection following pagination. Before the selection is lost after going to another page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$dg = new C_DataGrid("SELECT * FROM Orders", "orderNumber", "Orders");

// change column titles
$dg -> set_col_title("orderNumber", "Order No.");
$dg -> set_col_title("orderDate", "Order Date");
$dg -> set_col_title("shippedDate", "Shipped Date");
$dg -> set_col_title("customerNumber", "Customer No.");
 
// enable edit
$dg -> enable_edit("INLINE", "CRUD");

// hide a column
$dg -> set_col_hidden("requiredDate");

// read only columns, one or more columns delimited by comma
$dg -> set_col_readonly("orderDate, customerNumber");

// required fields
$dg -> set_col_required("orderNumber, customerNumber");

// multiple selection. The 2nd true signals grid not lose selections following pagination
$dg -> set_multiselect(true, true);
 
$dg -> display();

Bonus: send selected rows back to server

We can also easily obtain the selected row information and send captured rows back to server side for additional processing via AJAX. Below we got some working code snippets so you can get jump started. Check out the live example to see them in action!

Retrieve selected rows (Javascript)

1
2
3
4
5
function ShowSelectedRows(){
    var rows = getSelRows();
    // replace your own javascript here
    alert(rows);
}

Retrieve selected row ids and posted to a remote URL via $.ajax in JSON format (Javascript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function saveSelectedRowIds() {
    var rows = getSelRows();
    if (rows == "") {
        alert("no rows selected");
        return;
    } else {
        $.ajax({
          url: 'http://example.com/save_selected_rowids.php',
          data: {selectedRows: rows},
          type: 'POST',
          dataType: 'JSON'
        });
        alert(rows + ' row Ids were posted to a remote URL via $.ajax');
    }
    // window.location = "index.php#ajax/save_selected_row.php?refresh=1&rows="+rows;
}

Retrieve selected rows objects and posted to a remote URL via $.ajax in JSON format (Javascript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function saveSelectedRows(){
    gdata = $('#orders').jqGrid('getRowData');
    rows = getSelRows();
    if (rows == "") {
        alert("no rows selected");
        return;
    } else {
        selIndices = [];  // get index selected
        $.each(gdata, function(index, value){
            if($.inArray(value["orderNumber"], rows) != -1){
                selIndices.push(index);
            }
        });
        selRows = [];   // get row object from each index selected
        $.each(gdata, function(index, value){
            if($.inArray(index, selIndices) != -1){
                selRows.push(gdata[index]);
            }
        })
        $.ajax({
          url: 'http://example.com/save_selected_rows.php',
          data: {selectedRows: selRows},
          type: 'POST',
          dataType: 'JSON'
        });
        alert(selRows + ' with row ids ' + rows + ' were posted to a remote URL via $.ajax');
    }
}

Bonus 2: Code Snippets

To obtain row id of a SINGLE selected row

1
var row_id = $('#TABLE_NAME').jqGrid ('getGridParam', 'selrow')

Get ALL selected rows in an array (with multiple select enabled)

1
var rows = jQuery("#TABLE_NAME").jqGrid("getGridParam","selarrrow");

To get value from a cell of the currently selected row:

1
var cell_value = $('#TABLE_NAME').jqGrid('getCell',row_id,'COLUMN NAME');

See Live Example!