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

标签 javascript jquery jqgrid

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

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

2-当我点击提交按钮时会发生什么(修复第 1 部分后)，我想知道数据如何发布到服务器! 无论什么语言，我不想例如他们作为对象或某物发送，以知道如何处理它们!

交易很多

我的源代码:

{% 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>

View .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')

最佳答案

第一个问题很容易解决。编辑表单(添加和编辑)仅包含有关可编辑列的信息。因此，您需要在您希望允许用户编辑的 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: “只读”} 或 editoptions: {disabled: “disabled”}。该选项将在编辑表单中包含信息，但在相应的编辑字段上设置附加的 readonly="readonly" 或 disabled="disabled" 属性。可以在此类字段上添加额外的“ui-state-disabled”类，如 the answer 中所述。 。通过这种方式，您可以使某些字段可编辑，但仅限于“添加”对话框中的示例，并在“编辑”对话框中将其保持为禁用/只读。不要忘记使用 recreateForm: true 选项。

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

关于javascript - jqGrid |添加-编辑-删除按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25055477/

上一篇：javascript对同一对象执行多个命令

下一篇：javascript - 如何使用 Greasemonkey 按 ID 号突出显示？

相关文章：

javascript - jqgrid - 添加、编辑、删除不起作用

javascript - jqGrid 分页不适用于 json 数据类型

javascript - 如何从输入类型文本中获取旧值和新值

javascript - 从字符串 : 'matrix(1, 0, 0, 1, 3, 5)' 中获取最后 2 个数字

javascript - 出现错误无法读取未定义的属性 'getTime'

javascript - 运行 setInterval 函数，停止 3 秒然后继续运行

javascript - 获取 dataTables 和 twitter bootstrap 工作时出现问题

javascript - Facebook 点赞按钮压倒了 IE7

javascript - 使用 `this` 的 JS 对象给出了未定义的结果

javascript - jqGrid 和 jquery click 事件的问题

©2024 IT工具网  联系我们