jqGrid |添加-编辑-删除相关网格的行答案

【问题标题】：jqGrid | add-edit-delet rows of related gridjqGrid |添加-编辑-删除相关网格的行
【发布时间】：2014-08-02 17:23:42
【问题描述】：

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

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>

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

如果我正确理解您的问题，您需要在编辑网格 $("#list_d") 后更新网格 $("#list")。为此，您只需修改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 的选项。结果，first 网格将重新加载同一页面，并且如果可能，将选择当前选定的行。

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

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

再说一句。您当前的代码包含许多重复项。例如，您使用 4 次相同的添加/编辑选项。您可以在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, {...});，并包含您在两个网格中使用的常用选项 (gridview: true, datatype: "json", viewrecords: true, ...)。这样，您将减少两个网格的选项列表。

我个人有我的个人喜好，并且有一个小的 JavaScript，它只包含带有 $.extend(true, $.jgrid...., {...}); 的行，并修改了 $.jgrid.defaults、$.jgrid.edit、$.jgrid.del。 我在创建 jqGrid 的所有页面上都包含 JavaScript 文件（直接在 grid.locale-en.js 和 jquery.jqGrid.min.js 之后）。顺便说一下，我所有页面的代码都很短，并且不包含不需要的重复项。

【讨论】：

不！我的意思是当我将第二个网格（#list_d）的一行传递给服务器时，我还需要服务器端第一个网格（#list）中相关行的ID，但我不知道如何访问它，因为它仅将 colModels 发布到服务器，并且在第二个网格中没有名为 id 的 colmodel！！你有我的问题吗？
完成并澄清最后一条评论：我想要第一个网格的单击行的 id，并在我编辑第二个网格时将其传递给服务器（因为第二个网格的行的详细信息取决于到第一个网格的点击行）！！ @Oleg

【解决方案2】：

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

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


        }

在服务器端（Django 中的views.py）：

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

【讨论】：