Question

我有一个问题，我需要在一行的每个单元格中显示包含一些细节的图像。为了达到这个目的，我使用了一个单元格的自定义格式化程序。

enter image description here

cellvalue将提供图像源。但如何在自定义格式化程序方法中获取名称和手机信息。

网格的客户端代码。

var functionsMapping = {
        "abc": function (cellValue, opts, rowObject) {
            var tbl = "<table><tr><td><a href='/home1/About'><img src='" + cellValue + "' alt='a' /></a></td></tr>";
            tbl += "<table><tr><td>Name :aaa</td></tr>";
            tbl += "<table><tr><td>Phone :8888</td></tr></table>";
            return tbl;
        }
    };


    $(document).ready(function () {
        $.ajax({
            type: "POST",
            async: true,
            url: "/home1/GetGridModel",

            success: function (data) {
                colMM = data.colmodel;
                ColNN = data.colN;
                for (i = 0; i < colMM.length; i++) {
                    cm = colMM[i];
                    if (cm.hasOwnProperty("formatter") && functionsMapping.hasOwnProperty(cm.formatter)) {
                        cm.formatter = functionsMapping[cm.formatter];
                    }
                }
                jQuery("#mygrid").jqGrid({
                    url: '/home1/GetImageGridData',
                    datatype: "json",
                    mtype: "POST",
                    colNames: ColNN,
                    colModel: colMM,
                    rowNum: 4,
                    width: 700,
                    height: '300',
                    pager: $("#pager")
                });
            }
        });
    });

控制器代码：

[HttpPost]
        public JsonResult GetImageGridData(FormCollection frmcl)
        {
            int icol = 3;

            // it gives array of data
            object[] entity = this.FetchData();


            string[] colnames = new string[icol];

            for (int icount = 1, ilength = icol; icount <= ilength; icount++)
            {
                colnames[icount - 1] = "Col" + icount.ToString();
            }

            var eee = this.ToExpandoObject();
            object[] data1 = null;
            data1 = (from s in eee
                     select new
                     {
                         id = 1,
                         cell = GetColumns(s,colnames)
                     }).ToArray();

            var jsonData = new
            {
                total = data1.Count() / 4,
                page = 1,
                records = data1.Count(),
                rows = data1,
                userData = "aaa"
            };
            return Json(jsonData);
        }


        private object[] GetColumns(object s, string[] colnames)
        {
            object[] row = new object[colnames.Length];
            IDictionary<string, object> propertyValues = (IDictionary<string, object>)s;
            int i = 0;
            foreach (string col in colnames)
            {
                row[i++] = propertyValues[col].ToString();
            }
            return row;
        }
        public List<dynamic> ToExpandoObject()
        {
            var result = new List<dynamic>();

            int icol = 3;
            object[] entity = this.FetchData();
            string imagefieldname = "ImageSrc1";
            string[] colnames = new string[icol];

            for (int irow = 0; irow < entity.Count(); irow++)
            {
                dynamic e = new ExpandoObject();
                var d = e as IDictionary<string, object>;
                for (int collength = 0; collength < icol; collength++)
                {
                    d.Add("Col" + (collength+1).ToString() , entity[irow].GetType().GetProperty(imagefieldname).GetValue(entity[irow], null));
                }
                result.Add(e);
            }
            return result;
        }
    }

Answer 1

您可以包含任何正确的HTML数据片段作为自定义格式化程序的输出。您目前使用的是许多打开的代码<table>而没有</table>。它会打破jqGrid。您可以在数据片段中使用<br/>和<hr/>来完全没有<tables>，或者您可以使用必须通过从每个字符串中删除<table>来修复返回的字符串并使用</table>附加数据。

更新：您发布的代码仍会生成错误的HTML片段。函数functionsMapping.abc返回包含三 <table>且仅一个 </table>的字符串。

此外，您的服务器代码非常错误：

您从服务器返回的数据包含所有行{/ 1}} 的行。 id = 1的值必须是唯一的，因此对于不同的行必须不同。
您的服务器部分id属性的代码，而不是userData。
userdata属性的值应为 object ，而不仅仅是字符串。
您应该将userData添加到jqGrid列表中，并使用gridview: true代替pager: "#pager"以获得更好的效果。
使用pager: $("#pager")而未指定任何rowNum: 4似乎我不太好。

如果要为每一行发送一些自定义信息，可以将所有信息全部放在rowList对象内的id旁边。例如，如果您发布包含ID userdata，"i10"，"i20"的行，那么"i30"可能就像

userdata

大多数情况下，您可以轻松生成var jsonData = new { page = 1, ... userdata = new { i10: { ... }, // custom data for the row i10 i20: { ... }, // custom data for the row i20 i30: { ... } // custom data for the row i30 } };的动态对象值，而不是上面示例中的静态值。我想告诉你这个想法。

来自userdata的数据，您会在userdata的回调中看到，主要是jqGrid。

jqgrid图像单元格自定义格式化程序

1 个答案: