使用javascript访问jqgrid元素

Question

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

Answer 1

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

您尚未发布正在使用的网格代码.甚至不清楚您是使用本地树网格还是远程网格.在下面的示例中,我将展示如何在本地网格的情况下从"已启用"列中实现复选框.所以你可以得到以下结果:

你会在这里找到相应的演示.

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代码:

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