0

我有一个问题，我需要在一行的每个单元格中显示带有一些细节的图像。为了实现这一点，我对单元格使用了自定义格式化程序。

在此处输入图像描述

单元格值将提供图像源。但是如何以自定义格式化程序方法获取信息名称和电话。

网格的客户端代码。

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;
        }
    }
4

1 回答 1

0

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

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

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

  • 您从服务器返回的数据包含所有行都相同id = 1的行。的值id必须是唯一的，因此对于不同的行它必须是不同的。
  • 您的服务器部分放置userData属性的代码而不是userdata.
  • 属性的值userData应该是对象，而不仅仅是一个字符串。
  • 您应该添加gridview: true到 jqGrid 列表中并使用pager: "#pager"而不是以pager: $("#pager")获得更好的性能。
  • rowNum: 4不指定任何的用法rowList似乎我不好。

如果您想为每一行发送一些自定义信息，您可以将所有信息按 id 放置在userdata对象内。例如，如果您发布带有 ids 的行，"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大多数 as的回调中看到$(this).jqGrid("getGridParam", "userData")。

于 2013-01-30T10:46:08.527 回答