Question

我有一个json字符串，我用来填充jqgrid。在字符串中我有一个元素是一个超链接。问题是如果我使用这个字符串，那么网格根本不会加载！这是我的代码

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


        });

我需要在colModel中进行更改吗？这是网格不加载的原因吗？如果我用随机文本替换链接，网格工作正常。

请帮助，我真的需要在网格中实现超链接，我必须在后端执行

Answer 1

首先，使用imgpath: 'F:/profile/...'选项与使用例如myName: 'user2334092'具有相同的效果。这两个选项将被jqGrid忽略为未知。我在my previous answer写了你的内容。

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

[
    {
        "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中具有特殊含义的符号。如果您不想使用thouthand分隔符显示数字，并且在jqGrid语言环境文件中指定了小数分隔符（例如来自formatter: "integer"），则可以删除formatter: "integer"和grid.locale-en.js。您可以使用formatoptions指定格式化程序的选项（请参阅the documentation）。 The demo使用代码并显示以下结果

enter image description here

使用jsonstring数据在JQGrid中放置超链接

1 个答案: