0

I have a json string which i am using to populate the jqgrid. in the string i have one element which is a hyperlink. the problem is that if i use this string then the grid does not load at all ! here is my code

var json = '{"total": "","page": "1","records": "","rows" : [{"id" :"1", "cell" :["<a     href="http://www.google.com">Quantum of Solace</a>","142456", "1234.89", "1234"]},{"id" :"2", "cell":["01/04/2013", "7741", "007997.66", "234"]},{"id" :"3", "cell":["06/08/2013", "78976", "2329.336", "234"]},{"id" :"4", "cell":["01/01/2012", "6678", "2154.22", "1234"]},]}';

 jQuery(document).ready(function () {

            jQuery("#list").jqGrid({
                 datatype: 'jsonstring',
                datastr:json,

                colNames: ['Date', 'Account ', 'Amount', 'Code'],
                colModel: [
     { name: 'adate', index: 'adate', width: 90, sorttype: 'date', datefmt: 'Y-m-d' },
     { name: 'account', index: 'account', width: 80, align: 'right', sorttype: 'int' },
     { name: 'amount', index: 'amount', width: 80, align: 'right', sorttype: 'float' },
     { name: 'code', index: 'code', width: 80, align: 'right', sorttype: 'int' }

     ],


                pager: "#pager",
                toppager: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                toolbar: [true, "top"],
                sortorder: "desc",
                viewrecords: true,
                gridview: true,
                imgpath: 'F:/profile/ProgramFiles/JQGrid/jquery-ui-1.10.3.custom/development-bundle/themes/redmond/images',
                autoencode: true,
                height: '100%',
                caption: "My first grid"


            }).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true, cloneToTop: true });


        });

do i need to make a change in the colModel ? is that the reason why the grid does not load ? if i replace the link with random text, the grid works just fine.

please help, i really need to implement hyperlinks in the grid and i have to do it on the backend

4

1 回答 1

0

首先，imgpath: 'F:/profile/...'options 的用法与 example 的用法具有相同的效果myName: 'user2334092'。jqGrid 将忽略这两个选项，因为它是未知的。我在之前的回答中给你写过。

如果您需要一列带有超链接的网格，哪些数据来自服务器，您可以执行以下操作。您需要将所需的所有信息作为 data放在超链接中。例如

[
    {
        "id": 10,
        "href": "http://www.google.com",
        "linktext": "Quantum of Solace",
        "adate": "2012-12-15",
        "account": 142456,
        "amount": 1234.89,
        "code": 1234
    },
    {
        "id": 20,
        "href": "https://stackoverflow.com/questions/17351495/",
        "linktext": "Your question",
        "adate": "2013-06-28",
        "account": 7741,
        "amount": 7997.66,
        "code": 234
    }
]

然后你可以使用例如

colNames: ["", "Date", "Account", "Amount", "Code"],
colModel: [
    { name: "linktext", width: 200, sortable: false, search: false,
        formatter: function (cellValue, options, rowObject) {
            return "<a href='" + rowObject.href + "'>" +
                $.jgrid.htmlEncode(cellValue) + "</a>";
        }},
    { name: "adate", width: 90, formatter: "date", sorttype: "date" },
    { name: "account", width: 80, formatter: "integer", sorttype: "int",
        align: "right" },
    { name: "amount", width: 80, formatter: "number", sorttype: "float",
        align: "right" },
    { name: "code", width: 80, formatter: "integer", sorttype: "int",
        align: "right" }
]

读取和显示数据。使用该功能$.jgrid.htmlEncode确保您可以正确显示链接事件文本中的任何文本，例如</td>foo "bar's包含在 HTML 中具有特殊含义的符号。如果您不想使用 jqGrid 语言环境文件中指定的 thouthand 分隔符和小数分隔符（如 from ）显示数字，则formatter: "integer"可以删除。您可以使用来指定格式化程序的选项（请参阅文档）。该演示使用代码并显示以下结果formatter: "integer"grid.locale-en.jsformatoptions

在此处输入图像描述

于 2013-06-28T08:37:06.603 回答