Question

我想将内联编辑功能分配给我的jqGrid，即当cuser单击某一特定行时，他应该可以编辑..

我正在关注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>

Answer 1

首先，你必须定义jqGrid的editurl选项，它将负责处理服务器端的行保存。

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

我建议您另外使用colModel项width: 150或sortable: true的默认属性（请参阅the documentation）。如果您需要重新定义网格列的某些默认设置，可以使用cmTemplate（请参阅here）获取更多信息。您可以将colModel从网格缩减为以下

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>元素的所有属性。

此外，由于效果原因，我建议您始终使用jqGrid的gridview: true选项，并将pager: jQuery('#pager')替换为pager: '#pager'。

jqGrid内联编辑功能

1 个答案: