个人中心
gpt4 book ai didi

javascript - 如何避免在免费 jqgrid 中单击单元格编辑时水平滚动

转载 作者：行者123 更新时间：2023-12-02 16:20:11 25 4
gpt4 key购买 nike

下面的代码基于 How to set focus to cell which was clicked to start inline edit in jqgrid 的回答

用于将焦点置于单击的单元格上，以便通过单击开始对该单元格进行内联编辑。

如果 jqgrid 很宽，从而出现水平滚动条并且单击最右边的列，则 jqgrid 滚动到最左边的列，然后滚动回单击的列。

这会导致令人不愉快的闪烁视觉效果。如何去掉这个闪烁？

要重现，请在 Chrome 中打开下面的页面，向右滚动并单击“金额”列。编辑开始前网格会闪烁。如何去掉这个闪烁？

在此滚动期间可以关闭屏幕更新，放置所有网格单元最初编辑模式还是其他想法？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="author" content="Oleg Kiriljuk"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        /*global $,Modernizr */
        /*jslint browser: true, unparam: true */
        $(function () {
            "use strict";
            var mydata = [
                    { id: "10",  invdate: "", name: "test1",  note: "note1",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "40",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }
                ],
                $grid = $("#list"),
                initDateEdit = function (elem, options) {
                    // we need get the value before changing the type
                    var orgValue = $(elem).val(), newformat,
                        cm = $(this).jqGrid("getColProp", options.name);

                    $(elem).attr("type", "date");
                    if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
                        // if type="date" is not supported call jQuery UI datepicker
                        $(elem).css({ width: "8em" }).datepicker({
                            dateFormat: "d.m.Y",
                            autoSize: true,
                            changeYear: true,
                            changeMonth: true,
                            showButtonPanel: true,
                            showWeek: true
                        });
                    } else {
                        // convert date to ISO
                        if (orgValue !== "") {
                            //newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
                            //    cm.formatoptions.newformat :
                            //    $(this).jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
                            $(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "Y-m-d"));
                        }
                        // "10em" is better for Chrome and "11em" for Opera 24
                        $(elem).css("width", /OPR/.test(navigator.userAgent) ? "11em" : "10em");
                    }
                },
                myBeforeSaveRow = function (options, rowid) {
                    var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]");
                    $dates.each(function () {
                        var $this = $(this), newformat, str,
                            id = $this.attr("id"),
                            colName = id.substr(rowid.length + 1),
                            cm = $self.jqGrid("getColProp", colName);
                        if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") {
                            // convert from iso to newformat
                            str = $this.val();
                            if (str !== "") {
                                //newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
                                //    cm.formatoptions.newformat :
                                //    $self.jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";

                                str = $.jgrid.parseDate.call($self[0], "Y-m-d", str, newformat);
                            }
                            $this.attr("type", "text");
                            $this.val(str);
                        }
                    });
                },
                initDateSearch = function (elem) {
                    setTimeout(function () {
                        $(elem).datepicker({
                            dateFormat: "mm/dd/yy",
                            autoSize: true,
                            changeYear: true,
                            changeMonth: true,
                            showWeek: true,
                            showButtonPanel: true
                        });
                    }, 50);
                },
                numberTemplate = {formatter: "number", align: "right", sorttype: "number",
                    editrules: {number: true, required: true},
                    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};

    function PutFocus(target) {
        setTimeout( function() {
            $("input, select",target).focus();
            $("input, select",target).select();
        },100);
      }


            $grid.jqGrid({
                datatype: "local",
//loadComplete: function() {
//    $grid.jqGrid('setGridParam', { datatype: 'json' });
//},
                data: mydata,
                colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
                colModel: [
                    { name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
                    { name: "invdate", width: 1625, align: "center", sorttype: "date",
                        formatter: "date", formatoptions: { newformat: "d.m.Y"}, editable: true,
                        editoptions: { dataInit: initDateEdit },
                        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
                    { name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
                        edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
                    { name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
                        edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
                    { name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" },
                    { name: "tax", width: 52, editable: true, template: numberTemplate },
                    { name: "amount", 

editable:true,"width":120,"classes":null,"hidden":false,
"editoptions":{"maxlength":60,"size":60}


/*, template: numberTemplate*/ },
                    { name: "total", width: 60, template: numberTemplate }
                ],
                rowNum: 10,
                rowList: [5, 10, 20],
                iconSet: "fontAwesome",
                pager: "#pager",
                gridview: true,
                autoencode: true,
                ignoreCase: true,
                sortname: "invdate",
                viewrecords: true,
                sortorder: "desc",
                height: "auto",
                rownumbers: true,
                editurl: "clientArray",
//editurl: "http://cdn.jsdelivr.net/test",
        toppager: true,



           beforeSelectRow: function (rowid, e) {
                var $this = $(this), rows = this.rows,
                  // get id of the previous selected row
                  startId = $this.jqGrid('getGridParam', 'selrow'),
                  startRow, endRow, iStart, iEnd, i, rowidIndex,
                  colName = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
               cmd = $grid.jqGrid('getGridParam', 'colModel');
                if (cmd[colName].name === 'cb' ) {
                    return true;
                }

    $this.jqGrid("editRow", rowid);
                PutFocus(e.target);
            },
            });

        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>

最佳答案

我不确定我是否正确理解了这个问题。从 jqGrid 4.7 开始，editRow 支持 focusField 选项(请参阅 the documentation )。它也可以在免费的 jqGrid 中使用。值 focusField: false 将阻止将焦点设置到第一个可编辑列。您通常可以删除 PutFocus 函数并将其替换为 focusField: colName (名称 colName 似乎不是最好的，因为它更 iCol)，其中 focusField 的值应该是行中的列号。

关于javascript - 如何避免在免费 jqgrid 中单击单元格编辑时水平滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29206284/

25 4 0
文章推荐： javascript - 使用 atob 函数时出现 DOM 异常 5
文章推荐： javascript - 如何向 JavaScript 回调添加另一个参数
文章推荐： javascript - 选择自定义属性时无法识别的表达式
文章推荐： javascript - 如何从 javascript 访问表单数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com