使用 javascript 访问 jqgrid 元素

Question

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

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

Answer 2

我觉得没有那么难。

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

以及禁用：

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