将命令列添加到Asp.Net MVC中的jqGrid

时间:2010-09-20 08:40:06

标签: asp.net-mvc jqgrid command jqgrid-asp.net

我希望你早上好。

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

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

更新即可。我不需要只是实现编辑/删除功能。我需要的是添加一个基于某个模板的HTML列和“id”值,如<a href="MoreDetails/{id}">[More details]</a>

2 个答案:

答案 0 :(得分:2)

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

要实现行编辑,请查看jqGrid Demo并在左侧部分选择“行编辑”,然后选择“自定义编辑”。我个人更喜欢使用名为“inline editing”(在“行编辑”下的相同演示“输入类型”中选择)。您可以通过双击而不是选择行来实现切换到编辑模式(请参阅jqGrid - edit only certain rows for an editable column作为示例)。要删除行,您可以使用“form editing”中的“删除”按钮。要使用它,您应该添加Navigator关于navGrid方法,并使用相应的参数选择您需要的工具栏中的按钮。要在演示中看到这一点,请选择“实时数据操作”,然后选择“导航器”。

更新:在jqGrid Demo中,请参阅“行编辑”,然后选择“自定义修改”,您可以看到如何在setRowData内使用gridCompleteloadComplete句柄设置任意 HTML代码片段。你为什么不喜欢这种方法?您还可以使用predefined showlink formatter显示链接,或使用custom formattercustom unformatter在jqGrid单元格中显示任何HTML

答案 1 :(得分: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>" ;
    }

我希望有所帮助。