tablas - Accede a los elementos de jqgrid usando un javascript

tablas dinamicas html javascript

Question

Estoy usando treegrid de jqgrid, en el que quiero multiselección que no es posible, por lo que explícitamente pongo una columna de casilla de verificación, ahora quiero saber cómo iterar cada fila de la grilla del árbol y acceder a la celda pareticular de esa fila, para que pueda hacer una acción específica en él. Gracias de antemano.

Answer 1

Creo que no es tan difícil.

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

y por deshabilitar:

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

Answer 2

La forma más sencilla de implementar sus requisitos me parece incluir una columna adicional en la cuadrícula de árbol que tiene la casilla de verificación:

No ha publicado el código de la grilla que está utilizando. Incluso no está claro si está utilizando una cuadrícula de árbol local o remota. En el siguiente ejemplo, estoy mostrando cómo implementar la casilla de verificación desde la columna "Activado" en el caso de la red local. Para que pueda tener los siguientes resultados:

La demostración correspondiente la encontrarás aquí .

El código HTML es:

<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>

y el código de JavaScript:

$(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(", "));
});
});