I am using treegrid of jqgrid, in which i want multiselect which is not possible , so i explicitely put a checkbox column. Now I want to know how to iterate each row of tree grid and access particular cell of that row, so that I can do specific action on it. Thank in advance.

I am using treegrid of jqgrid, in which i want multiselect which is not possible , so i explicitely put a checkbox column. Now I want to know how to iterate each row of tree grid and access particular cell of that row, so that I can do specific action on it. Thank in advance.

• javascript
• jqgrid
• treegrid

Share Improve this question Follow edited Jan 11, 2019 at 7:51 박주언 12711 gold badge11 silver badge1212 bronze badges asked Apr 28, 2011 at 10:57 Brijesh Brijesh 2911 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The simplest way to implement your requirements seems me to include additional column in the tree grid which has the checkbox:

You have not posted the code of the grid which you are using. It is even not clear if you are using local tree grid or a remote one. In the following example I am showing how to implement the checkbox from the "Enabled" column in case of local grid. So you can have the following results:

The corresponding demo you will find here.

The HTML code is:

<fieldset style="float:left">
    <input id="getSelected" type="button" value="Get Selected"/>
</fieldset>
<fieldset style="clear:both; float:left">
    <legend>Seleceted Ids</legend>
    <p id="ids"></p>
</fieldset>
<fieldset style="clear:both; float:left">
    <legend>Selected Names</legend>
    <p id="names"></p>
</fieldset>

<div style="clear:left">
    <table id="treegrid"><tr><td/></tr></table>
</div>

and the JavaScript code:

$(function () {
    'use strict';
    var mydata = [
        { id: "1", name: "Cash", num: "100", debit: "400.00", credit: "250.00", balance: "150.00", enbl: "1",
            level: "0", parent: "null", isLeaf: false, expanded: false },
        { id: "2", name: "Cash 1", num: "1", debit: "300.00", credit: "200.00", balance: "100.00", enbl: "0",
            level: "1", parent: "1", isLeaf: false, expanded: false, loaded: true },
        { id: "3", name: "Sub Cash 1", num: "1", debit: "300.00", credit: "200.00", balance: "100.00", enbl: "1",
            level: "2", parent: "2", isLeaf: true, expanded: false },
        { id: "4", name: "Cash 2", num: "2", debit: "100.00", credit: "50.00", balance: "50.00", enbl: "0",
            level: "1", parent: "1", isLeaf: true, expanded: false },
        { id: "5", name: "Bank\'s", num: "200", debit: "1500.00", redit: "1000.00", balance: "500.00", enbl: "1",
            level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true },
        { id: "6", name: "Bank 1", num: "1", debit: "500.00", credit: "0.00", balance: "500.00", enbl: "0",
            level: "1", parent: "5", isLeaf: true, expanded: false },
        { id: "7", name: "Bank 2", num: "2", debit: "1000.00", credit: "1000.00", balance: "0.00", enbl: "1",
            level: "1", parent: "5", isLeaf: true, expanded: false },
        { id: "8", name: "Fixed asset", num: "300", debit: "0.00", credit: "1000.00", balance: "-1000.00", enbl: "0",
            level: "0", parent: "null", isLeaf: true, expanded: false }],
        grid = $("#treegrid"),
        getColumnIndexByName = function (columnName) {
            var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
            for (i = 0; i < l; i++) {
                if (cm[i].name === columnName) {
                    return i; // return the index
                }
            }
            return -1;
        },
        iCol;

    grid.jqGrid({
        datatype: "local",
        colNames: ["id", "Account", "Acc Num", "Debit", "Credit", "Balance", "Enabled"],
        colModel: [
            {name: 'id', index: 'id', width: 1, hidden: true, key: true},
            {name: 'name', index: 'name', width: 180},
            {name: 'num', index: 'acc_num', width: 80, align: "center"},
            {name: 'debit', index: 'debit', width: 80, align: "right"},
            {name: 'credit', index: 'credit', width: 80, align: "right"},
            {name: 'balance', index: 'balance', width: 80, align: "right"},
            {name: 'enbl', index: 'enbl', width: 60, align: 'center',
                formatter: 'checkbox', editoptions: {value: '1:0'},
                formatoptions: {disabled: false}}
        ],
        height: '100%',
        rowNum: 10000,
        sortname: 'id',
        treeGrid: true,
        loadonce: true,
        treeGridModel: 'adjacency',
        treedatatype: 'local',
        ExpandColumn: 'name',
        caption: 'Demonstrate how to use Tree Grid for the Adjacency Set Model'
    });
    // we have to use addJSONData to load the data
    grid[0].addJSONData({
        total: 1,
        page: 1,
        records: mydata.length,
        rows: mydata
    });

    iCol = getColumnIndexByName('enbl');
    // nth-child need 1-based index so we use (iCol+1) below
    $("tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")>input", grid[0]).change(function (e) {
        var isChecked = $(this).attr("checked"), rowid, dataIndex,
            tr = $(e.target, grid[0].rows).closest("tr.jqgrow");
        if (tr.length > 0) {
            rowid = tr[0].id;
            dataIndex = grid[0].p._index[rowid];
            if (typeof dataIndex !== "undefined" && dataIndex >= 0) {
                grid[0].p.data[dataIndex].enbl = isChecked ? "1" : "0";
            }
        }
        e.preventDefault();
    });

    $("#getSelected").click(function () {
        var ids = [], names = [], i, data = grid[0].p.data, l = data.length, dataItem;
        for (i = 0; i < l; i++) {
            dataItem = data[i];
            if (dataItem.enbl === "1") {
                ids.push(dataItem.id);
                names.push(dataItem.name);
            }
        }
        $("#ids").html(ids.join(", "));
        $("#names").html(names.join(", "));
    });
});

I think there not so difficult.

$("#YourTreegridContainerTag").find(":input[type=='checkbox']").each(function() { $(this).attr("cheked", "checked"); });

and for disablling:

$("#YourTreegridContainerTag").find(":input[type=='checkbox']").each(function() { $(this).removeAttr("cheked"); });