用数据库值作为图像填充数据表列

Question

我想从数据库中检索用户名列表并将其作为图像显示在数据表中，当悬停在任何图像上时，它会显示用户名。我的代码将开发人员姓名列显示为以逗号分隔的开发人员列表。

这是我的代码：

项目class

public class Projects
    {
        public int project_number { get; set; }
        public string project_name { get; set; } 
        public string developer_name { get; set; }
        public  Image team_members { get; set; }
    }

json

columns: [
     { 'data': 'project_name' },
     { 'data': 'developer_name' },
     {
        "data": "team_members",
        "render": function (data, type, full, meta) {
        var markup = '';
        for (var i = 0; i < data; i++) {
           markup += '<img src="images/img.jpg" class="avatar" title="'++'">' }
       return markup;
       }
   }             
]

asmx:

    public void GetProjects()
        {
            SqlConnection conn = new SqlConnection("connection statement");
            conn.Open();

            var projects = new List<Projects>();

            using (var cmd = new SqlCommand("getProjects", conn) { CommandType = CommandType.StoredProcedure })
            using (SqlDataReader dr = cmd.ExecuteReader())
            {
                if (dr.HasRows)
                {
                    while (dr.Read())
                    {
                        var Project = new Projects
                        {
                            project_number = Convert.ToInt32(dr[1].ToString()),
                            project_name = dr[2].ToString(),
                        };
                        projects.Add(Project);

                        using (SqlCommand com = new SqlCommand("SELECT user_name FROM Users WHERE user_id IN (SELECT user_id FROM User_Projects WHERE project_number = @project_number)", conn))
                        {
                            com.Parameters.AddWithValue("@project_number", Project.project_number);
                            List<string> developerNames = new List<string>();

            using (SqlDataReader rdrDev = com.ExecuteReader())
                            {
                                if (rdrDev.HasRows)
                                {
                                    while (rdrDev.Read())
                                    {
developerNames.Add((string)rdrDev["user_name"]);
                                    }
                                }
                            }
                   Project.developer_name = string.Join(", ", developerNames);
                        }
                    }
                }
                var js = new JavaScriptSerializer();
                Context.Response.Write(js.Serialize(projects));
            }

        }

Answer 1

您可以在列声明中使用参数 render。 拆分开发人员名称并对其进行处理以正确生成标记：

{
   "data": "developer_name",
   "render": function (data, type, full, meta) {
       var markup = '';
       var developers = data.split(',');
       for (var i = 0; i < developers.length; i++) {
           markup +='<img src="images/img.jpg" class="avatar" title="' + developers[i] + '">'
       });
       return markup ;
   }
}