Question

我的TreeGrid出现问题，我已经有一个网格，其中包含从Json正确加载的数据（我认为...），并且在name列中，我选择了具有正确值的选择工具栏，但是当我选择select网格中的值之一显示所选值上的空白数据。

为了演示这种情况，我添加了照片：

在这里您可以看到包含已加载数据的treegrid：

，然后从工具栏的select（现金，银行...）列表中选择值我得到：从选择中选择“现金”选项后，带有空白数据的网格：

我还附加了我的JSON数据和脚本代码：（来自服务器）

{ 
    "page":1,
    "total":1,
    "records":1,
    "rows": [
        {
            "AccountId":1,
            "Name":"Cash",
            "AccountNumber":"100",
            "Debit":400.00,
            "Credit":250.00,
            "Balance":150.00,
            "parent":null,
            "level":0,
            "isLeaf":false,
            "expanded":false
        },
        {
            "AccountId":2,
            "Name":"Cash 1",
            "AccountNumber":"1",
            "Debit":300.00,
            "Credit":200.00,
            "Balance":100.00,
            "parent":1,
            "level":1,
            "isLeaf":false,
            "expanded":false
        },
        {
            "AccountId":3,
            "Name":"Sub Cash 1",
            "AccountNumber":"1",
            "Debit":300.00,
            "Credit":200.00,
            "Balance":100.00,
            "parent":2,
            "level":2,
            "isLeaf":true,
            "expanded":false
        },
        {
            "AccountId":4,
            "Name":"Cash 2",
            "AccountNumber":"2",
            "Debit":100.00,
            "Credit":50.00,
            "Balance":50.00,
            "parent":1,
            "level":1,
            "isLeaf":true,
            "expanded":false
        },            
        {
            "AccountId":5,
            "Name":"Bank\u0027s",
            "AccountNumber":"200",
            "Debit":1500.00,
            "Credit":1000.00,
            "Balance":500.00,
            "parent":null,
            "level":0,
            "isLeaf":false,
            "expanded":false
        },
        {
            "AccountId":6,
            "Name":"Bank 1",
            "AccountNumber":"1",
            "Debit":500.00,                
            "Credit":0.00,
            "Balance":500.00,
            "parent":5,
            "level":1,
            "isLeaf":true,
            "expanded":false
        },
        {
            "AccountId":7,
            "Name":"Bank 2",
            "AccountNumber":"2",
            "Debit":1000.00,
            "Credit":1000.00,
            "Balance":0.00,
            "parent":5,
            "level":1,
            "isLeaf":true,
            "expanded":false
        },
        {
            "AccountId":8,
            "Name":"Fixed asset",
            "AccountNumber":"300",
            "Debit":0.00,
            "Credit":1000.00,
            "Balance":-1000.00,
            "parent":null,
            "level":0,
            "isLeaf":true,
            "expanded":false
        }
    ]
}

JS代码：

<script>

var isSearchSelectLoaded = false;

$(document).ready(function () {

    jQuery("#treegrid").jqGrid({
        treeGrid: true,
        treeGridModel: 'adjacency',
        datatype: "json",
        ExpandColumn: 'name',
        direction: 'rtl',
        url: '/Handlers/JQTreeGridDataHandler.ashx',
        mtype: "GET",
        colNames: ["id", "Account", "Acc Num", "Debit", "Credit", "Balance"],
        colModel: [
            { name: 'id', index: 'id', width: 1, hidden: true, key: true, jsonmap: "Id" },
            { name: 'name', index: 'name', width: 180, jsonmap: "Name" },
            { name: 'num', index: 'acc_num', width: 80, align: "center", search: false, jsonmap: "AccountNumber" },
            { name: 'debit', index: 'debit', width: 80, align: "right", search: false, jsonmap: "Debit" },
            { name: 'credit', index: 'credit', width: 80, align: "right", search: false, jsonmap: "Credit" },
            { name: 'balance', index: 'balance', width: 80, align: "right", search: false, jsonmap: "Balance" }
        ],
        jsonReader: {
            repeatitems: false,
            id: 'id',
            root: 'rows'
        },
        height: 'auto',
        sortname: 'name',
        sortorder: 'asc',
        loadonce: true,
        viewrecords: true,
        pager: "#ptreegrid",
        caption: "Treegrid example",
        gridComplete: function () {
            if (!isSearchSelectLoaded) {
                setSearchSelect.call($("#treegrid"), "name");
                isSearchSelectLoaded = true;
            }
        }
    });

    $('#treegrid')
        .jqGrid('navGrid', '#ptreegrid', {
            search: false, 
            edit: false, 
            add: false, 
            del: false, 
            refresh: false
        })
        .navButtonAdd('#ptreegrid', {
            caption: "Export to Excel",
            title: "Export to Excel",
            buttonicon: "ui-icon-disk",
            onClickButton: function () {
                ExportDataToExcel("#treegrid");
            },
            position: "last"
    });

    $("#treegrid")
        .jqGrid('filterToolbar', { stringResult: true, defaultSearch: "cn" }); // Toolbar activation
});

//Functions for Toolbar searching
var getUniqueNames = function (columnName) {
    var t = $("#treegrid")
        .jqGrid('getGridParam', 'data'),
        texts = $.map(t, function (item) { return item.name; }), 
        uniqueTexts = [],
        textsLength = texts.length, 
        text, 
        textsMap = {}, 
        i;

    for (i = 0; i < textsLength; i++) {
        text = texts[i]
        if (text !== undefined && textsMap[text] === undefined) {
            // to test whether the texts is unique we place it in the map.
            textsMap[text] = true;
            uniqueTexts.push(text);
        }
    }
    return uniqueTexts;
},
buildSearchSelect = function (uniqueNames) {
    var values = ":All;";
    $.each(uniqueNames, function () {
        values += this + ":" + this + ";";
    });

    return values.slice(0, -1);
},
setSearchSelect = function (columnName) {
    $("#treegrid")
        .jqGrid(
            'setColProp', 
            columnName,
            {
                stype: "select",
                searchoptions: {
                    sopt: ['eq'],
                    value: buildSearchSelect(getUniqueNames.call($("#treegrid"), columnName))
                }
            }
    );

    $("#treegrid").jqGrid("destroyFilterToolbar");
    $("#treegrid").jqGrid("filterToolbar", {
        stringResult: true,
        defaultSearch: "cn"
    });
},
ExportDataToExcel = function (tableCtrl) {
    //  Export the data from our jqGrid into a "real" Excel file
    ExportJQGridDataToExcel(tableCtrl, "TestExcelFile.xlsx");
};

</script>

感谢您的帮助...

从工具栏选择值后的JqGrid TreeGrid搜索网格显示空白数据

0 个答案: