0

我在使用从 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 调用的成功方法中设置断点时，从服务器返回正确的数据。但是，用于重新填充 wijgrid 控件的数据源或重新呈现控件的代码一定不正确...

在相关的说明中，我不太确定 wijarrayreader 的名称或映射属性的用途。我认为 wijarrayreader 设置正确，但我只是根据一些示例做出了有根据的猜测。

提前谢谢了！

4

1 回答 1

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();
    }
于 2013-03-20T09:11:52.017 回答