jquery - jqGrid tableToGrid 插件相同的 HTML 代码但 TD 高度问题

Question

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

但是我在这里遇到了一个奇怪的问题。如果我在同一行(JS BIN demo here)中给出表格 html，tableToGrid 会格式化我的表格。但是，如果我对齐 ( JS BIN Demo here )，相同的 HTML 代码将不起作用。 但两者都是相同的 HTML

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

编辑:使用visual studio并使用Ctrl+K+D对齐代码

问题是TD的高度

看到这张图片，它在 css 中显示 22px 高度，但实际占用了 39px。它只发生在对齐的代码中。

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

Answer 1

tableToGrid 的用法初看起来很不错。您尝试的次数越多，您就越会发现它会将您引向错误的方向。 jqGrid 旨在将数据与其视觉表示形式(格式化)区分开来。只有键入数据才能正确地对网格中的数据进行排序和过滤。

Here是一个演示我的意思的小演示:

由于数据的分离和数据的可视化，我们可以获得正确的排序和搜索/过滤:

对应的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的用法也很简单。 The demo证明这一点。

代码是

$(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"});
});