Question

我有JqGrid类型的树状网格，并且我试图基于服务器中的数据（以 XML 格式返回的数据）填充过滤器工具栏中的select搜索。我发现了从特定行中获取唯一值并以正确格式构建字符串的函数（例如：“：All; 1：1; 2：2; 3：3”）。

我的一个网格选项是loadonce:true，我从文档中了解到，如果将此选项设置为true，并且我以XML或JSON格式从服务器获取数据，则会更改datatype属性自动变为local，而我要执行的所有更改都在客户端代码上。

这是我想做的事情：

<script>                        
    $(document).ready(function () {
        jQuery("#treegrid").jqGrid({
            treeGrid: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'name',
            direction: 'rtl',
            url: 'Handlers/JQTreeGridDataHandler.ashx',// from here i'm getting the XML data from server and it works fine
            datatype: "xml",                                
            mtype: "POST",
            colNames: ["id", "Account", "Acc Num", "Debit", "Credit", "Balance"],
            colModel: [
                { name: 'id', index: 'id', width: 1, hidden: true, key: true },
                { name: 'name', index: 'name', width: 180 },// this is the col that i want to add the select filter
                { name: 'num', index: 'acc_num', width: 80, align: "center", search: false },
                { name: 'debit', index: 'debit', width: 80, align: "right", search: false },
                { name: 'credit', index: 'credit', width: 80, align: "right", search: false },
                { name: 'balance', index: 'balance', width: 80, align: "right", search: false }
            ]
            height: 'auto',
            sortname: 'name',
            sortorder: 'asc',
            loadonce: true,
            viewrecords: true,
            pager: "#ptreegrid",
            caption: "Treegrid example"
        });


        setSearchSelect.call($("#treegrid"), "name");                            

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

    });

    //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))                                            
                    }
                });
        };
</script>

请帮助我了解我在做什么错。非常感谢

Answer 1

您描述的问题归因于ajax调用。解释：您的网格是根据网格选项创建的。然后对数据进行ajax调用。数据会随服务器响应，请求的数据量，网络连接等而有所延迟。直到将数据com传输到网格之前，您才需要根据数据建立选择函数，但网格中不存在数据。要解决此问题，您有两种选择

1。使用setTimeout延迟选择和搜索的创建

...
setTimeout(function() {
    setSearchSelect.call($("#treegrid"), "name");                            
    $("#treegrid").jqGrid('filterToolbar', { stringResult: true, defaultSearch: "cn" });
}, 800);
...

2。第二种推荐方法是在加载数据时调用一次。这可以在gridComplete事件中完成，并且标志g表示正在构建选择。代码下方：

    var buildselect = false;
    jQuery("#treegrid").jqGrid({ 
        url: 'data.xml', 
        treedatatype: "xml", 
        mtype: "POST", 
        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", search: false}, 
            {name:'debit',index:'debit', width:80, align:"right", search: false}, 
            {name:'credit',index:'credit', width:80,align:"right", search: false}, 
            {name:'balance',index:'balance', width:80,align:"right", search: false}, 
            {name:'enbl', index:'enbl', hidden: true} 
        ], 
        height:'auto', 
        pager : "#ptreegrid", 
        treeGrid: true, 
        loadonce : true,
        ExpandColumn : 'name', 
        caption: "Treegrid example",
        gridComplete : function() {
            if(!buildselect) {
                setSearchSelect.call($("#treegrid"), "name");                            
                $("#treegrid").jqGrid('filterToolbar', { stringResult: true, defaultSearch: "cn" });
                buildselect = true;
            }
        }
    });

这是工作中的demo of your code

JQgrid-使用xml数据类型填充选择过滤器工具栏搜索

1 个答案: