SlickGrid Ajax 调用空行答案

【问题标题】：SlickGrid Ajax call empty rowsSlickGrid Ajax 调用空行
【发布时间】：2012-12-25 00:00:41
【问题描述】：

我有一个带有 AJAX 调用的 SlickGrid。我在 Chrome 下跟踪它，发现数据是正确的，但网格显示所有空行。知道为什么吗？

网络服务

    [System.Web.Services.WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string LoadUsers()
    {
        List<Person> users = new List<Person>();
        using (SqlConnection conn = UtWeb.ConnectionGet())
        {
            conn.Open();
            SqlCommand command = new SqlCommand("UserGet", conn);

            using (SqlDataReader r = command.ExecuteReader())
            {
                while (r.Read())
                {
                    Person person = new Person();
                    person.LoginName = r["LoginName"].ToString();
                    person.FirstName = r["FirstName"].ToString();
                    person.LastName = r["LastName"].ToString();
                    users.Add(person);
                }
            }
        }

        MemoryStream stream = new MemoryStream();
        DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Person[]));
        serializer.WriteObject(stream, users.ToArray());
        stream.Position = 0;
        StreamReader streamReader = new StreamReader(stream);
        return streamReader.ReadToEnd();            
    }

代码

<script src="../Scripts/jquery-1.7.2.min.js"></script>
<script src="../Scripts/jquery.event.drag.min.js"></script>

<script src="../Scripts/SlickGrid/slick.core.js"></script>
<script src="../Scripts/SlickGrid/slick.grid.js"></script>
<script>

    var grid;
    var loader;
    var columns = [
    { id: "login-name", name: "Login Name", field: "LoginName" },
    { id: "firstname", name: "First Name", field: "FirstName" },
    { id: "lastname", name: "Last Name", field: "LastName" }
  ];

    var options = {
        editable: false,
        enableAddRow: false,
        enableCellNavigation: true,
        enableColumnReorder: false
    };

    $(document).ready(function () {
        $.ajax({
            url: 'TestSlickGrid.aspx/LoadUsers',
            async: false,
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            failure: function (response) {
                alert("ajax fail!");
            }
        });
        function OnSuccess(response) {
            if (parseInt(response) == 0)
                alert(response.d);
            else {
                loader = response; 
                grid = new Slick.Grid("#myGrid", loader.d, columns, options);
            }

        }
    });    
</script>

在 Chrome 中，它表明装载机.d = "[{"FirstName":"b","LastName":"bb","LoginName":"b"},{"FirstName":"","LastName":"","LoginName":"test1" },{"FirstName":"","LastName":"","LoginName":"test2"}]"

        loader = '{"employees":' + response.d + '}'; 
        var obj = eval("(" + loader + ")");
        grid = new Slick.Grid("#myGrid", obj.employees, columns, options);

【问题讨论】：

标签： json jquery slickgrid

【解决方案1】：

尝试为要嵌入网格的 div 提供一些高度。在您的情况下，我相信您的 div 名称是 myGrid。

尝试为这个 div 定义一些高度，它会起作用。我遇到了这个问题，并且能够通过仅为我的 div 定义高度来解决。

【讨论】：

【解决方案2】：

loader.d 是否解析为 JSON，alert(loader.d[0].LoginName) 显示什么？

【讨论】：

是的，这有一些问题。请参阅代码的最后一部分进行更新。该解决方案有效，但它可以更清洁吗？
grid = new Slick.Grid("#myGrid", JSON.parse(response.d), columns, options); 或 JSON.parse(loader)。在旧浏览器上，您将需要 JSON2.js 库。