jqGrid |添加-编辑-删除按钮不起作用答案

【问题标题】：jqGrid | add-edit-delete buttons not workingjqGrid |添加-编辑-删除按钮不起作用
【发布时间】：2014-07-31 09:32:49
【问题描述】：

对不起，如果我的问题很简单，我对 jqGrid 完全陌生 :)

1- 我想使用 jqGrid 的（添加、编辑、删除）功能，如您所见，我的网格的页脚部分有按钮，但是当我单击时，只会出现一个对话框，没有要输入的字段！我想要它就像this page see my screen picture of what happens !

2- 当我点击提交按钮时会发生什么（在修复第 1 部分之后），我想知道数据如何发布到服务器！不管是什么语言，我都不希望它们作为对象或某物发送，以了解如何处理它们！

tnx 很多

我的源代码：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index Page</title>
    <!-- external scripts -->

    <!-- jQuery & Bootstrap -->
    <script type="text/javascript" src="{% static "js/jquery.js" %}"/></script>
        <script type="text/javascript" src="{% static "js/jquery.jqGrid.min.js" %}"/></script>
    <link rel="stylesheet" type="text/css" media="all" href="{% static "css/bootstrap.min.css?id=1" %}"/>
    <script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"/></script>
    <!-- jQuery & Bootstrap -->

    <!-- jqGrid -->
    <link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui.jqgrid.css" %}" />
    <link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui-lightness/jquery-ui.min.css" %}" />
    <script type="text/javascript" src="{% static "js/grid.locale-en.js" %}"/></script>
    <!-- jqGrid -->

    <!-- own implemented scripts -->
    <script type="text/javascript" src="{% static "js/script.js" %}"/></script>  
    <!-- own implemented scripts -->

    <!-- external scripts-->

    <script type="text/javascript">
    $(function () {
        $("#list").jqGrid({
            url: "http://localhost:8000/getdata",
            datatype: "json",
            mtype: "GET",
            colNames: ["شناسه", "کد","نام", "عنوان" ,"عنوان انگلیسی", "ظرفیت", "ظرفیت اضافه","قیمت روز"],
            colModel: [
                  { name: "id", index:"id", width: 60 , editable:true,editoptions: {readonly: "readonly"}},
            { name: "code", width: 60 , editable:true},
            { name: "name", width: 90 , editable:true},
            { name: "title", width: 90 ,editable:"true", editable:true},
            { name: "english_title", width: 100, align: "left", editable:true },
            { name: "capacity", width: 90, align: "left", editable:true },
            { name: "extra_capacity", width: 90, align: "left", editable:true },
            { name: "today_price", width: 80, align: "left" , editable:true},
            ],
            rowNum:10,
            rowList:[10,20,30],
            pager: '#pager',
            loadonce:true,
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            rownumbers: true,
            rownumWidth: 40,
            gridview: true,
            multiselect: false,
            caption: "اتاق ها",
            onSelectRow: function(ids) {
                if(ids == null) {
                    ids=0;
                    if(jQuery("#list_d").jqGrid('getGridParam','records') >0 )
                    {

                        jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');

                    }
                } else {
                    jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');
                jQuery("#list_d").jqGrid('setCaption',"لیست قیمت اتاق شماره : "+ids)
                }
            }
     });
    jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,search:false},
     /*   {
                    recreateForm: true,
                    beforeShowForm: function ($form) {
                        $form.find(".FormElement[readonly]")
                            .prop("disabled", true)
                            .addClass("ui-state-disabled")
                            .closest(".DataTD")
                            .prev(".CaptionTD")
                            .prop("disabled", true)
                            .addClass("ui-state-disabled")
                    },
        }, */
     //edit options
       { // Edit option (parameters of editGridRow method)
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        closeAfterEdit:true,
        url:'/edit',
        ajaxEditOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }

        },
            afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('changed data type');
             return [true];
         },
        editData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    },
    //add options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        closeAfterAdd: true,
        url:'/add',
        ajaxEditOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }
        },
            afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('changed data type');
             return [true];
         },
        editData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }

    },
    //delete options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        url:'/delete',
        ajaxEditOptions: {
            beforeSend: function(jqXHR) {
                var csrf_token = getCookie('csrftoken'); 
                jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
            }
        },
        afterSubmit: function () {
             jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
             console.log('changed data type');
             return [true];
         },
        editData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    }

    );
  jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
    jQuery("#list_d").jqGrid({
        height: 100,
    width:345,
        url:'getpricelist?q=1&id=2',
        datatype: "json",
        colNames:['از','تا', 'قیمت'],
        colModel:[

    {name:'from',index:'from', width:100},
    {name:'to',index:'to', width:100},
    {name:'price',index:'price', width:80, align:"right"},



        ],
        rowNum:5,
        rowList:[5,10,20],
        pager: '#pager_d',
        sortname: 'item',
        viewrecords: true,
        sortorder: "asc",
        multiselect: false,
        caption:"لیست قیمت"
    }).navGrid('#pager_d',{add:false,edit:false,del:false});

        }); 

    </script>

    </head>
    <body>

        <table id="list"><tr><td></td></tr></table>
        <div id="pager"></div> 

        <table id="list_d"></table>
        <div id="pager_d"></div>
    </body>
</html>

views.py

from django.shortcuts import render
from django.utils import simplejson
from django.http import HttpResponse
from rooms.models import *
from django.db.models import Q
from django.core import serializers


def index(request):
    return render(request, 'index.html')

def getdata(request):
    data=room_type.objects.all()
    json=[]

    for o in data:
        json.append({'id':o.id, 'code':o.code,'name':o.name,'title':o.title, 
                     'english_title':o.english_title, 'capacity':o.capacity,
                     'extra_capacity':o.extra_capacity, 'today_price':o.today_price })

    return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )


def getpricelist(request):

    requested_room_id = request.GET.get('id', '')

    room = room_type.objects.get(id = requested_room_id)
    price_list_set = room.price_list_set.all()

    json=[]
    for price_list in price_list_set:
        json.append({'from':price_list.from_date, 'to':price_list.to_date, 'price':price_list.price})


    return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )

def edit(request):
    print "################ediit#################"
    return render(request, 'index.html')


def add(request):
    print "################addddddddddd#################"
    return render(request, 'index.html')


def delete(request):
    print "################deeeeeeeeeeeeeel#################"
    return render(request, 'index.html')

【问题讨论】：

可能是 url:'/edit' 等 URL 错误。您可以使用Fiddler 或 IE 或 Google Chrome 的开发者工具（按 F12 启动）来跟踪 HTTP 流量。尝试 url:'edit' 或其他相对路径。 URL "http://localhost:8000/getdata" 有效，但我建议您也将其更改为 relative 路径：“getdata”、“getdata/”、“/getdata/”等。我建议您 1) 使用相同的路径Add as for Edit 选项或更改页面上表单编辑的默认选项（请参阅the answer）。目前您没有设置添加和删除选项
我建议您另外使用默认的reloadAfterSubmit:true 并添加重新加载数据，包括来自服务器的新添加行的 id。您仍需要将afterSubmit 内部的datatype 重置为"json"（请参阅the answer）以从服务器重新加载数据。我建议在grid.locale-en.js 之后移动jquery.jqGrid.min.js。
不，网址是正确的，我也将我的代码更新为工作版本，但 2 我有一些小问题：1-当我提交添加表单时，表单不会消失并且列表不会刷新！ :( 2-我如何不要让用户在编辑表单中编辑但在添加表单中添加值**（我想为“today_price”col 这样做）！如果我添加**editoptions：{readonly： “只读”} 在编辑和添加表单中都有变化，不适合我！再次感谢您救了我的命：D @Oleg
1) 您应该在添加选项列表中使用closeAfterAdd: true 2) 您将afterSubmit 放置在错误的位置。这不是 jqGrid 的回调 - 它是表单编辑的回调（见 ajaxEditOptions 附近）。 3) 我想你应该使用csrfmiddlewaretoken: function () { return getCookie('csrftoken');} 而不是csrfmiddlewaretoken: getCookie('csrftoken')。 4) 您可以使用beforeShowForm 表单编辑回调，如the answer 和this one 来禁用某些字段，设置/删除只读属性等...
代码的“删除”部分使用了错误的选项。您应该准确地检查the documentation。例如，您需要使用ajaxDelOptions 而不是ajaxEditOptions，delData 而不是editData，删除等不存在其他一些编辑选项。

标签： javascript jquery jqgrid

【解决方案1】：

第一个问题很容易解决。编辑表单（添加和编辑）仅包含有关可编辑列的信息。因此，您需要在您希望允许用户编辑的 colModel 的每一列中包含 editable: true 属性。

了解colModel 的每个已知属性都有默认值，这一点很重要。我建议您检查文档的the place 上表格的最后一列（“默认”）。您会发现align 的默认值为"left"，因此您可以从所有colModel 项目中删除align: "left"。同样你可以看到editable属性的默认值是false。这就是您编辑表单为空的原因。如果您需要将editable: true 设置为colModel 的列的一半以上，我建议您使用jqGrid 的cmTemplate 选项（有关详细信息，请参阅the answer）。例如，在包含cmTemplate: {editable: true} 选项后，您将需要在所有不想使其可编辑的列中包含editable: false。所有其他列都是可编辑的。

如果您需要在添加/编辑表单中包含一些列信息，但不允许用户对其进行编辑，您可以使用editable: true 和editoptions: {readonly: "readonly"} 或editoptions: {disabled: "disabled"}。该选项将在编辑表单中包含信息，但在相应的编辑字段上设置附加的readonly="readonly" 或disabled="disabled" 属性。可以像the answer 中描述的那样在此类文件上添加额外的"ui-state-disabled" 类。通过这种方式，您可以使某些字段可编辑，但仅限于例如在添加对话框中并在编辑对话框中将其禁用/只读。不要忘记使用recreateForm: true 选项。

要使编辑成功，正确填充网格的 rowid 非常重要。如果您有具有name: "id" 的列，或者如果某些列具有key: true 属性，则相应的值将用作rowid。将发送到服务器的信息描述为here（关于编辑）、here（关于添加）和here（关于删除）。该信息始终包含id=rowidvalue 属性。添加/编辑表单发布有关表单中所有（包括隐藏的）可编辑列的附加信息：name=value，其中name 是colModel 中列定义的name 属性的值。

【讨论】：

@ImanMirzadeh：可能url:'/edit' 等 URL 是错误的。尝试url:'edit' 或其他相对路径。 URL "http://localhost:8000/getdata" 有效，但我建议您也将其更改为 relative 路径 "getdata"、"getdata/"、"/getdata/" 等。我建议您 1) 对 Add as 使用相同的选项用于编辑或更改页面上表单编辑的默认选项（请参阅the answer）。目前您不设置添加和删除选项