3

我希望你早上好。

我想在我的 Asp.Net 应用程序中使用 jqGrid。到目前为止，我一直在生成一个 html 表并将其转换为网格，但我想尝试一种更好的方法：通过 AJAX 调用加载数据，因为它应该与网格一起使用。我发现了如何获取数据，但除了数据列之外，我还想要“编辑”和“删除”列。我如何实现它？

我宁愿不为我的控制器中的按钮制作 html。理想的解决方案是只发送数据，并让 jqGrid 根据一些客户端模板和 id 值添加所需的列。我无法手动执行此操作，因为我无法将列添加到现有网格。那么，我该怎么办？

更新。我不需要仅仅实现编辑/删除功能。我需要的是根据一些模板和“id”值添加一个带有 HTML 的列，比如<a href="MoreDetails/{id}">[More details]</a>

4

2 回答 2

2

如果您使用 jqGrid，则从服务器发回纯数据是正确的方法。

要像您想要的那样实现行编辑，请查看jqGrid Demo并在左侧选择“行编辑”，然后选择“自定义编辑”。我个人更喜欢使用所谓的“内联编辑”（在“行编辑”下的同一个演示“输入类型”中选择）。您可以通过双击而不是选择行来实现编辑模式的切换（参见jqGrid - 仅编辑可编辑列的某些行作为示例）。要删除行，您可以使用“表单编辑”中的“删除”按钮。要使用它，您应该添加Navigator关于 navGrid 方法，并使用相应的参数选择工具栏中您需要的按钮。要在演示中看到这一点，请选择“Live Data Manipulation”，然后选择“Navigator”。

更新：在jqGrid Demo中，查看“行编辑”，然后查看“自定义编辑”，您可以看到如何使用setRowData内部gridComplete或loadComplete处理来设置任何HTML 代码片段。为什么不喜欢这种方法？您还可以使用预定义的 showlink 格式化程序来显示链接，或使用自定义格式化程序和自定义取消格式化程序来显示jqGrid 单元格中包含的任何 HTML。

于 2010-09-20T09:20:10.147 回答
2

您现在可能已经想通了，但是对于这里有价值的是我使用自定义格式化程序的答案。Action 列使用自定义格式化程序呈现，该格式化程序显示一个调用简单 javascript 函数的按钮。

$(document).ready(function () {
        $("#all-errors-list").jqGrid({
            url: '/Error/AllErrors/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Id', 'Error','Actions'],
            colModel: [
            { name: 'Id', index: 'Id', width: 100, align: 'left', editable: true},
            { name: 'ErrorDetails', index: 'ErrorDetails', width: 350, align: 'left' },
            { name: 'ActionId', width:400, formatter: actionFormatter}
                      ],
            pager: '#all-errors-pager',
            rowNum: 10,
            rowList: [10, 20, 50],
            sortname: 'Id',
            sortorder: 'asc',
            viewrecords: true,
            imgpath: '<%=Html.ImagePath()%>',
            caption: 'Open Errors',
            height: "100%",
            width: "100%",
            gridComplete: function () { $("button").button(); }
        })

    function actionFormatter(cellvalue, options, rowObject) {
        return "<button onclick=\"alert('" + cellvalue + "')\">Details</button>" ;
    }

我希望这会有所帮助。

于 2010-10-14T12:37:55.373 回答