代码之家  ›  专栏  ›  技术社区  ›  Chandan

我们可以通过更改自由jqgrid 4.15.4中的任意一个选定值来更新多个下拉列表值吗

  •  0
  • Chandan  · 技术社区  · 7 年前

    我正在我的一个应用程序中使用免费的JQGrid4.15.4。我有一个关于一次性更新多列下拉值的问题。我正在使用multiselect:true,option。

    我也了解了并发性问题,但现在这不是我的问题。

    我加了一把示范小提琴 https://jsfiddle.net/tygLjmde/ .

    $(function () {
    "use strict";
    var mydata = [
        { id: "10",  FirstName: "test", LastName: "TNT", Gender: "Male" },
         { id: "11",     FirstName: "test2",    LastName: "ADXC", Gender: "Male" },
         { id: "12",     FirstName: "test3",    LastName: "SDR", Gender: "Female" },
         { id: "13",     FirstName: "test4",    LastName: "234", Gender: "Male" },
         { id: "14",     FirstName: "test5",    LastName: "DAS", Gender: "Male" },
    ];
    $("#list").jqGrid({
    data: mydata,
    
        colNames: ['','Id', 'First Name', 'Last Name', 'Gender'],
         colModel: [
      {
                name: "act", template: "actions",
               formatoptions: {
                   delbutton: false
             }
            },
            {
                label: "Id",
                name: 'Id',
                hidden: true,
                search: false,
            },
            {
                label: "FirstName",
                name: 'FirstName',
                searchoptions: {
                    searchOperators: true,
                    sopt: ['eq', 'ne', 'lt', 'le','ni', 'ew', 'en', 'cn', 'nc'],
                }, search: true,
            },
            {
                label: "LastName",
                name: 'LastName',
                searchoptions: {
                    searchOperators: true,
                    sopt: ['eq', 'ne', 'lt', 'ni', 'ew', 'en', 'cn', 'nc'],
                }, search: true,
            },
    
            {
                label: "Gender",
                name: 'Gender',
                search: true, 
                edittype: "select",editable: true,
                editoptions: {
                value: "Male:Male;Female:Female;" ,                                                                 
                            },
              stype: "select",
                    editrules: {
                        custom: true,
                        custom_func: function (value, colName, iCol)                                                    {
                            alert("The value to validate: " +value);
                            return [true];
                        }
                        },
            },
            ],
            onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').restoreRow(lastsel);
                jQuery('#list').editRow(id, true);
                lastsel = id;
            }
        },
        loadComplete: function (id) {
            if ($('#list').getGridParam('records') === 0) {
    
                //$('#grid tbody').html("<div style='padding:6px;background:#D8D8D8;'>No records found</div>");
            }
            else {
                var lastsel = 0;
                if (id && id !== lastsel) {
                    jQuery('#list').restoreRow(lastsel);
                    jQuery('#list').editRow(id, true);
                    lastsel = id;
                  }
                }
            },
    
        pager: jQuery('#pager'),
        loadonce: true,
        viewrecords: true,
        gridview: true,
        width: 'auto',
        height: '450px',
            iconSet: "fontAwesome",
        multiselect: true,
        cellEdit:true,
        emptyrecords: "No records to display",
        jsonReader:
        {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "Id"
        },
    
    });
    $('#list').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", multipleSearch: true, searchOperators: true, search: true, loadFilterDefaults: true });
    $('#list').jqGrid('navGrid', "#pager", {
        search: false, // show search button on the toolbar
        add: false,
        edit: false,
        del: false,
        refresh: true,
        reloadGridOptions: { fromServer: true }
    });    
    });
    

    其中,您将在第一列和性别列中看到带有值的复选框。所以假设我选择了两行并且只更改了一行性别下拉值。 那么,是否有可能自动更改其他行性别列的值?如果是,那么有任何演示/代码更改建议吗?

    提前谢谢你。

    1 回复  |  直到 7 年前
        1
  •  0
  •   Oleg    7 年前

    在演示中使用单元格编辑。因此您可以使用 afterSaveCell 回调以在更改值后执行一些附加操作。你可以检查 selarrrow 参数,它包含选定行的ID列表,并使用 setCell 要将行的“性别”列的值更改为新值,请执行以下操作:

    afterSaveCell: function (rowid, cmName, value, iRow, iCol) {
        var $self = $(this);
    
        if (cmName === "Gender") {
            $self.jqGrid("getGridParam", "selarrrow").forEach(function (id) {
                var item = $self.jqGrid("getLocalRow", id);
                if (id !== rowid && item.Gender !== value) {
                    $self.jqGrid("setCell", id, iCol, value, false, false, true);
                }
            });
        }
    }
    

    查看修改的演示 https://jsfiddle.net/OlegKi/20wh9a7g/

    推荐文章