2

我想为我的 jqGrid 分配内联编辑功能，即当用户单击特定行时，他应该能够编辑..

我正在关注 jQuery 代码的这个 url，但它不起作用，我也无法编辑

http://www.trirand.com/blog/jqgrid/jqgrid.html#

这是我的看法

<table id="list"></table>
</table>

JavaScript 代码：

  <script type="text/javascript">
    $(function () {
        var lastsel;
        jQuery("#list").jqGrid({
            url: '/Home/GetStudents/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['StudentID', 'FirstName', 'LastName', 'Email'],
            colModel: [
      { name: 'StudentID',sortable: false,key:true },
      { name: 'FirstName' },
      { name: 'LastName', sortable: false},
      { name: 'Email', width: 200,  sortable: false}],
      cmTemplate: {align: 'center', editable: true},
            pager: '#pager',
            width: 750,
            rowNum: 15,
            rowList: [5, 10, 20, 50],
            sortname: 'StudentID',
            sortorder: "asc",
            viewrecords: true,
            caption: ' My First JQgrid',
            onSelectRow: function (StudentID) {


                if (StudentID != lastsel) {

                    lastsel = StudentID;   
                    jQuery('#list').jqGrid('restoreRow', lastsel);
                    jQuery('#list').jqGrid('editRow', StudentID, true);


                }

            },

            editurl: '/Home/GetStudents/',
            caption: "Using events example"

        });
        jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false });
    });

</script>

这些是我的脚本，我添加了

<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/Scripts/rowedex3.js" type="text/javascript"></script>
4

1 回答 1

2

首先，您必须定义editurljqGrid 的选项，该选项将负责处理服务器端的行保存。

下一个问题：您应该定义lastsel要在onSelectRow回调中使用的变量。

我建议您另外使用or等colModel​​项目的默认属性（请参阅文档）。如果您需要重新定义网格列的一些默认设置，您可以使用（参见此处）获取更多信息。您可以从您的网格减少到以下width: 150sortable: truecmTemplatecolModel

colModel: [
        { name: 'StudentID', sortable: false, key: true },
        { name: 'FirstName' },
        { name: 'LastName', sortable: false },
        { name: 'Email', width: 200, sortable: false}],
cmTemplate: {align: 'center', editable: true}

此类更改将使代码更具可读性和易于维护。我添加key: true以确保 jqGrid 使用列中的值作为 rowid。取决于您返回的 JSON 数据的格式，它可能不是必需的，但在我看来，它使代码更具可读性和更易于维护。

您还可以删除<table>用于网格的元素的所有属性。

此外，由于性能原因，我建议您始终使用gridview: truejqGrid 选项并替换pager: jQuery('#pager')为pager: '#pager'.

于 2012-11-02T12:35:14.373 回答