0

我喜欢在我的应用程序中使用 jqGrid 在页面加载时显示表格数据。我第一次想从服务器构建我的 HTML 并使用tableToGrid插件将其转换为 jqGrid。

但我在这里面临一个奇怪的问题。如果我在同一行中给出表格 html（此处为 JS BIN 演示），tableToGrid 会格式化我的表格。但是如果我对齐，相同的 HTML 代码将不起作用（此处为 JS BIN 演示）。但两者都是相同的 HTML

任何人都可以帮助我解决上述奇怪的问题吗？

编辑：使用 Visual Studio 并使用 Ctrl+K+D 对齐代码

问题是 TD 的高度

看到这张图片，它在 css 中显示 22px 高度，但占用 39px。它只发生在对齐的代码中。 在此处输入图像描述

我只需要在页面加载时构建一个 jqGrid（不在 document.ready 中使用 ajax 调用）并进一步使用 Ajax。也许我可以第一次使用本地数据和 json 进行进一步的 ajax 调用。但我没有看到任何这样的例子。让我知道是否有人有一个例子。

4

2 回答 2

1

接缝的使用tableToGrid仅在第一眼看上去就很好。你会尝试的越多，你就越会发现它会以错误的方式引导你。jqGrid 旨在将数据与其可视化表示区分开来 - 格式化。只有输入数据才能正确排序和过滤网格中的数据。

这是一个小演示，演示了我的意思：

在此处输入图像描述

由于数据的分离和数据的可视化，可以得到正确的排序和搜索/过滤：

在此处输入图像描述

对应的 JavaScript 代码很简单：

$(function () {
    var d = [
        {id: "r1", name: "Bob", age: 10, married: false },
        {id: "r2", name: "Jim", age: 5, married: false },
        {id: "r3", name: "Marry", age: 29, married: true }
    ];
    $("#grid").jqGrid({
        datatype: "local",
        data: d,
        colNames: ["Name", "Age", "Married"],
        colModel: [
            {name: "name", width: 220},
            {name: "age", formatter: "integer", align: "right", sorttype: "integer", width: 90,
                searchoptions: {sopt: ['eq','ne','lt','le','gt','ge'] }}, 
            {name: "married", formatter: "checkbox", align: "center", width: 80,
              stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: ":Any;true:Yes;false:No" }}
        ],
        sortname: "age",
        sortorder: "desc",
        ignoreCase: true,
        height: "auto",
        rowNum: 10000 // no paging of data
    });
    $("#grid").jqGrid("filterToolbar", {defaultSearch: "cn", searchOnEnter: false, stringResult: "true"});
});

更新：从服务器加载的 JSON 的使用也非常简单。演示演示了这一点。

在此处输入图像描述

代码是

$(function () {
    $("#grid").jqGrid({
        url: "Murali.json",
        datatype: "json",
        colNames: ["Name", "Age", "Married"],
        colModel: [
            {name: "name", width: 220},
            {name: "age", formatter: "integer", align: "right", 
                sorttype: "integer", width: 50,
                searchoptions: {sopt: ['eq','ne','lt','le','gt','ge'] }},
            {name: "married", formatter: "checkbox", align: "center",
                width: 80, stype: "select",
                searchoptions: { sopt: ['eq', 'ne'], value: ":Any;true:Yes;false:No" }}
        ],
        ignoreCase: true,
        height: "auto",
        rowNum: 10,
        sortname: "name",
        pager: "#pager",
        loadonce: true,
        jsonReader: {
            repeatitems: false,
            root: function (obj) { return obj; }
        }
    });
    $("#grid").jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
    $("#grid").jqGrid("filterToolbar",
        {defaultSearch: "cn", searchOnEnter: false, stringResult: "true"});
});
于 2012-11-24T13:13:49.983 回答
0

我复制了您的代码并在我系统的 html 页面中尝试了它。有效。此外，当标签在一行中给出时，它似乎在 jsbin 中工作。它可能是与 jsbin 相关的问题。否则当我尝试将它作为 html 文件运行时它不应该工作。

于 2012-11-24T07:26:22.450 回答