0

行のすべてのセルに詳細を含む画像を表示する必要があるという問題があります。これを実現するために、セルにカスタムフォーマッターを使用しました。

ここに画像の説明を入力してください

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

1 に答える 1

0

カスタムフォーマッタの出力として、データの正しいHTMLフラグメントを含めることができます。現在、多くのオープンタグを使用していますが、使用して<table>いません</table>。jqGridが壊れます。例を使用<br/>し<hr/>てデータフラグメントにまったく含まないよう<tables>にするか、すべての文字列から削除<table>してデータに。を追加することにより、返された文字列を修正する必要があり</table>ます。

更新：投稿したコードはまだ間違ったHTMLフラグメントを生成します。関数は、 3つだけfunctionsMapping.abcを含む文字列を返します。 <table> </table>

さらに、サーバーコードは非常にバグがあります。

  • サーバーから返されるデータには、すべての行で同じid = 1行が含まれています。の値はid一意である必要があるため、行ごとに異なる必要があります。
  • userDataの代わりにサーバーパーツplaceプロパティのコードuserdata。
  • プロパティの値は、文字列だけでなくオブジェクトuserDataである必要があります。
  • gridview: trueパフォーマンスを向上させるために、jqGridのリストに追加して、pager: "#pager"代わりに使用する必要がありpager: $("#pager")ます。
  • rowNum: 4何も指定せずに使用するのrowListは良くないようです。

すべての行にカスタム情報を送信する場合は、すべてをuserdataオブジェクト内のIDごとのマップとして配置できます。たとえば、IDが、、の行を投稿する場合"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$(this).jqGrid("getGridParam", "userData")

于 2013-01-30T10:46:08.527 に答える