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.
Add a comment
|
2 Answers
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");
});
