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 では、loader.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);