使用javascript访问jqgrid元素 [英] Access jqgrid elements using a javascript

问题描述

我正在使用jqgrid的treegrid，其中我想要多次选择，这是不可能的，所以我明确地放了一个复选框列。现在我想知道如何迭代树形网格的每一行并访问该行的特定单元格，以便我可以对其执行特定操作。提前感谢。

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.

推荐答案

实现您的需求的最简单方法似乎是在树形网格中包含附加列，其中包含复选框：

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.

HTML代码为：

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

和JavaScript代码：

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

这篇关于使用javascript访问jqgrid元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！