Question

我在使用从ajax调用返回的json结果更新wijgrid时遇到了一些麻烦。 wijgrid似乎没有重绘。这是相关的javascript / jQuery：

$(function () {
    var datasource = new wijdatasource({
        data: [{"Id":1,"Name":"Sidney","Type":"Engineer"},{"Id":4,"Name":"Mavis","Type":"Student"},{"Id":5,"Name":"Betty","Type":"Student"},{"Id":80,"Name":"Taylor","Type":"Student"},{"Id":92,"Name":"Graham","Type":"Student"},{"Id":94,"Name":"Belle","Type":"Student"},{"Id":100,"Name":"Terrence","Type":"Student"},{"Id":106,"Name":"William","Type":"Student"},{"Id":108,"Name":"Synthia","Type":"Student"},{"Id":109,"Name":"Lucious","Type":"Customer"},{"Id":116,"Name":"Leonard","Type":"Student"},{"Id":119,"Name":"Katy","Type":"Student"},{"Id":122,"Name":"Sarah","Type":"Student"},{"Id":127,"Name":"Amy","Type":"Student"},{"Id":178,"Name":"Carl","Type":"Student"}],
        reader: new wijarrayreader([
            { name: 'Id', mapping: 'Id' },
            { name: 'Name', mapping: 'Name' },
            { name: 'Type', mapping: 'Type' }
        ])
    });

    $('#ClientTable').wijgrid({
        allowSorting: true,
        allowPaging: true,
        pageSize: 10,
        data: datasource,
        columns: [
            { visible: false },
            {
                cellFormatter: function (args) {
                    var wg = $.wijmo.wijgrid,
                    row = args.row;

                    if ((row.type & wg.rowType.data) && (row.state === wg.renderState.rendering)) {
                        args.$container.append($('<a href="/Client/Update/' + row.data.Id + '">' + row.data.Name + '</a>'));
                        return true;
                    }
                }
            },
            {}
        ]
    });

    $('#pageSize').bind('change', function (e) {
        $('#ClientTable').wijgrid('option', 'pageSize', parseInt($(e.target).val()));
    });

    $('#filterBy').keyup(function (e) {
        var filter = $('#filterBy').val();
        if (typeof filter == 'string' && filter.length > 1) {
            $.ajax({
                url: '/Home/MemberAsyncResults',
                async: true,
                traditional: true,
                type: 'GET',
                data:
                {
                    filter: filter
                },
                success: function (response) {
                    //                            datasource.data = response;
                    //                            datasource.read();
                    datasource.load(response, false);
                    $('#ClientTable').wijgrid('ensureControl', true);
                    $('#ClientTable').wijgrid('doRefresh');
                },
                error: function (e) {
                    var breakOnThisLine = 1;
                }
            });
        }
    });
});

另外，这是相关的html：

<label for="pageSize">Page Size</label>
<select id="pageSize">
    <option>10</option>
    <option>25</option>
    <option>50</option>
    <option>100</option>
</select>
<label for="pageSize">Filter By</label>
<input type="text" id="filterBy" />
<table id="ClientTable"></table>

如果在ajax调用的success方法中设置了断点，则从服务器返回正确的数据。但是，重新填充wijgrid控件的数据源或重新呈现控件的代码一定不对......

在相关的说明中，我不确定wijarrayreader的名称或映射属性是什么。我认为wijarrayreader设置正确，但我只根据一些例子进行了有根据的猜测。

非常感谢提前！

Answer 1

尝试在wijdatasource的加载事件中设置wijgrid的ensureControl选项，或者在初始化wijgrid时设置它：

$(‘#ClientTable’).wijgrid({
    allowSorting: true,
    allowPaging: true,
    pageSize: 10,
    ensureControl : true
});

作为替代方案，我建议您使用wijhttpproxy小部件而不是使用$ ajax调用，这在这些场景中很有用。有关详细信息，请参阅以下链接：http://wijmo.com/wiki/index.php/Datasource#proxy

请查看以下代码：

$(document).ready(function () {

        var superPanelRefreshed = false;
        var proxy = new wijhttpproxy({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: 'ab'
            },
            key: 'geonames'
        });
        var myReader = new wijarrayreader([{
            name: 'label',
            mapping: function (item) {
                return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
            }
        }, {
            name: 'value',
            mapping: 'name'
        }, {
            name: 'selected',
            defaultValue: false
        }]);

        var input = $('#testinput');

        datasource = new wijdatasource({
            reader: myReader,
            proxy: proxy,
            loading: function () {

            },
            loaded: function (data) {

            }
        });

        $("#grid").wijgrid({
            data: datasource,
            ensureControl: true
        });

        datasource.load();
    });

    function loadRemoteData() {
        datasource.proxy.options.data.name_startsWith = $('#testinput').val();
        datasource.load();
    }

麻烦使用自定义过滤器重新填充WijGrid

1 个答案: