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

まずediturl、サーバー側で行の保存の処理を担当するjqGridのオプションを定義する必要があります。

次の問題：コールバックlastselの場合に使用する変数を定義する必要がありonSelectRowます。

またはの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: truejqGridが列の値をROWIDとして使用するように追加しました。返すJSONデータの形式によっては、必要ない場合もありますが、私の意見では、コードが読みやすくなり、保守も容易になります。

<table>さらに、グリッドに使用されている要素のすべての属性を削除できます。

さらに、パフォーマンス上の理由から、常にgridview: truejqGridのオプションを使用し、に置き換えるpager: jQuery('#pager')ことをお勧めしますpager: '#pager'。

于 2012-11-02T12:35:14.373 に答える