Question

我有2个网格，第二个与第一个相关，我想在第二个网格中添加/编辑，我想更新数据库中第一个网格的数据！
但问题是 1-我没有第一个网格中所选行的id 2-我不知道如何通过jqGrid将此id发送到服务器

my project's index page

index.html：

{% 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];
         },
        addData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }

    },
    //delete options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        url:'/delete',
        ajaxDelOptions: {
            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];
         },
        delData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    }

    );
  jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});



/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

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

    {name:'from',index:'from', width:100, editable:true},
    {name:'to',index:'to', width:100, editable:true},
    {name:'price',index:'price', width:80, editable:true},
        ],
        rowNum:5,
        rowList:[5,10,20],
        pager: '#pager_d',
        sortname: 'item',
        viewrecords: true,
        sortorder: "asc",
        multiselect: false,
        caption:"لیست قیمت"
    }).navGrid('#pager_d',{add:true,edit:true,del:true},

     //edit options
       { // Edit option (parameters of editGridRow method)
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        closeAfterEdit:true,
        url:'/ple',
        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('ple data type');
             return [true];
         },
        editData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    },
    //add options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        closeAfterAdd: true,
        url:'/pla',
        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('pla data type');
             return [true];
         },
        editData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }

    },
    //delete options
    { 
        recreateForm:true,
        reloadAfterSubmit:true,
        closeOnEscape:true,
        savekey: [true,13],
        url:'/pld',
        ajaxDelOptions: {
            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('pld data type');
             return [true];
         },
        delData: {
            csrfmiddlewaretoken: getCookie('csrftoken')
        }
    }



    );

        }); 

    </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>

Answer 1

如果我正确理解了您的问题，则需要在编辑网格$("#list")后更新网格$("#list_d")。要执行此操作，您只需修改第二个网格的afterSubmit 代码，即可进行编辑（添加/编辑）和删除。 afterSubmit的代码可以是以下

afterSubmit: function () { var $mainGrid = $("#list"), pageOfMainGrid = $mainGrid.jqGrid("getGridParam", "page"); $mainGrid.jqGrid("setGridParam", {datatype: "json"}) .trigger("reloadGrid", { page: pageOfMainGrid, current: true }); console.log('pld data type'); return [true]; }

请参阅the answer，其中介绍了reloadGrid的选项。结果，第一个网格将重新加载相同的页面，如果可能，将选择当前选定的行。

如果您需要知道第一个网格的当前选定行，您可以使用$("#list").jqGrid("getGridParam", "selrow")获取它。

我建议您使用height: "auto"代替height: 100。除了更好地利用HTML页面的垂直空间之外，它还将删除网格右侧不需要的位置。

还有一句话。您当前的代码包含许多重复项。例如，您使用相同的添加/编辑选项的4倍。您可以在<{1}}的第一次使用之前放置以下代码：
navGrid

之后，包含两个调用$.extend(true, $.jgrid.edit, { recreateForm: true, reloadAfterSubmit: true, closeOnEscape: true, savekey: [true, 13], closeAfterEdit: true, closeAfterAdd: true, ajaxEditOptions: { beforeSend: function(jqXHR) { var csrf_token = getCookie('csrftoken'); jqXHR.setRequestHeader('X-CSRF-Token', csrf_token); } }, afterSubmit: function () { jQuery(this).jqGrid("setGridParam", {datatype: 'json'}); console.log('changed data type'); return [true]; }, editData: { csrfmiddlewaretoken: getCookie('csrftoken') } }); $.extend(true, $.jgrid.del, { closeOnEscape: true, ajaxDelOptions: { beforeSend: function(jqXHR) { var csrf_token = getCookie('csrftoken'); jqXHR.setRequestHeader('X-CSRF-Token', csrf_token); } }, afterSubmit: function () { jQuery(this).jqGrid("setGridParam", {datatype: 'json'}); console.log('changed data type'); return [true]; } delData: { csrfmiddlewaretoken: getCookie('csrftoken') } });的代码可以缩减为

navGrid

这样的代码在我看来更短，更容易阅读和维护。顺便说一句，您可以在创建两个网格之前添加jQuery("#list").jqGrid('navGrid', '#pager', {search: false}, { url: '/edit' }, { url: '/add' }, {url:'/delete'}); var reloadMainGrid = function () { var $mainGrid = $("#list"), pageOfMainGrid = $mainGrid.jqGrid("getGridParam", "page"); $mainGrid.jqGrid("setGridParam", {datatype: "json"}) .trigger("reloadGrid", { page: pageOfMainGrid, current: true }); console.log('pld data type'); return [true]; }; // set new afterSubmit callback for Add/Edit $.extend(true, $.jgrid.edit, { afterSubmit: reloadMainGrid }); jQuery("#pager_d").jqGrid('navGrid', '#pager', {}, { url: url:'/ple' }, { url: '/pla' }, { url: '/delete', afterSubmit: reloadMainGrid }); ，并包含您在两个网格中使用的常用选项（$.extend(true, $.jgrid.defaults, {...});）。在这种方式中，您将减少两个网格的选项列表。

我个人有我的个人偏好，并且只有一小部分JavaScript，其中只包含gridview: true, datatype: "json", viewrecords: true, ...行$.extend(true, $.jgrid...., {...});，$.jgrid.defaults，$.jgrid.edit的修改。 我在我创建jqGrid 的所有页面上包含JavaScript文件（直接在$.jgrid.del和grid.locale-en.js之后）。顺便说一句，我所有页面的代码都很短，并且不包含不需要的重复项。

Answer 2

答案是使用jqGrid editData（或删除选项的DelData）！正如文档所述，我们可以在editData选项中发送其他数据，因此我必须更改代码：

editData: {
            csrfmiddlewaretoken: getCookie('csrftoken'),
            additional_data1 : additional_value1,
            additional_data2 : additional_value2,
            // any other key:value you want :)


        }

和 serverside （Django中的views.py）：

additional_data1 = request.POST.get('additional_data1')
#and any other key value using this format :  variable_name = request.POST.get('key')

jqGrid | add-edit-delete相关网格的行

2 个答案: