Доступ к элементам jqgrid с использованием JavaScript - PullRequest
Новая
       33

Доступ к элементам jqgrid с использованием JavaScript

2 голосов
/ 28 апреля 2011

Я использую treegrid из jqgrid, в котором я хочу множественный выбор, который невозможен, поэтому я явно поставил галочку в столбце.Теперь я хочу узнать, как выполнять итерацию каждой строки сетки дерева и получать доступ к конкретной ячейке этой строки, чтобы я мог выполнять с ней определенные действия.Спасибо заранее.

Ответы [ 2 ]

5 голосов
/ 28 апреля 2011

Мне кажется, что проще всего реализовать ваши требования, включив в древовидную сетку дополнительный столбец с флажком: enter image description here

Вы не опубликовали код используемой вами сетки.Даже не ясно, используете ли вы локальную сетку деревьев или удаленную.В следующем примере я показываю, как реализовать флажок из столбца «Включено» в случае локальной сетки.Таким образом, вы можете получить следующие результаты: enter image description 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: 

$(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(", "));
    });
});
0 голосов
/ 28 апреля 2011

думаю там не так уж и сложно.

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

и для отключения:

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

...