Question

我想在点击jqgrid中的警告框后创建一个特定单元格值的焦点，请提前感谢任何人提出解决方案

<!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" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css"/>
        <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" />
        <style type="text/css">
            html, body { font-size: 75%; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript">
            //$.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
        </script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js"></script>
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.blockUI.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function(){
          var lastsel2;
          var myGrid = $('#rowed5');
          var selRowId = myGrid.jqGrid ('getGridParam', 'selrow');
          var celValue = myGrid.jqGrid ('getCell', selRowId, 'columnName');
          jQuery("#rowed5").jqGrid({        
            datatype: "local",
            height: 250,
            colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
            colModel:[
              {name:'id',index:'id', width:90, sorttype:"int", editable: true},
              {name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}},
              {name:'stock',index:'stock', width:60, editable: true, edittype:"checkbox",editoptions: {value:"Yes:No"}},
              {name:'ship',index:'ship', width:90, editable: true, edittype:"select",formatter:'select',
        editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},         



       {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",
    editoptions:{rows:"2",cols:"10"}}                      
                  ],
        onSelectRow: function(id){
          if(id && id!==lastsel2){
            jQuery('#rowed5').editRow(id,true);
             alert("hi");

//---here i missed alert after clicking this i want to focus on the cell that the user had already clicked--
             setTimeout(function(){celValue.focus();},1);
//--here i get the particular cell value and i try to focus after clicking the alert box---- 

//-- i also try with $(this).focus as setTimeout(function(){$(this).focus();},1); but i did not get any possible output----             
    }
        },

        caption: "Input Types"
      });
      var mydata2 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FE"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"IN"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TN"},
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"AR"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FE"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FE"},
        {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"AR"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TN"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FE"}
        ];
      for(var i=0;i<mydata2.length;i++)
        jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
    });
    </script>
</head>
<body>
<table id="rowed5" class="scroll"></table>
</body>
</html>

Answer 1

如果您使用可以从GitHub下载的free jqGrid的最新来源（免费jqGrid是我开发的jqGrid的分支），您将获得最简单的解决方案。它允许您实现onSelectRow，如下所示

onSelectRow: function (rowid, status, e) {
    var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");

    if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        //$self.jqGrid("restoreRow", savedRow[0].id);
        $self.jqGrid("saveRow", savedRow[0].id);
    }

    $self.jqGrid("editRow", rowid, { focusField: e.target });
}

见the demo。 target的3-d参数的onSelectRow属性是单击的元素。可以使用focusField: e.target的{{1}}选项将焦点设置在单击的单元格中的输入/选择上。

如果您需要使用editRow但不想更改焦点，则可以将当前焦点保存在变量中，然后调用alert并将焦点设置在具有焦点的元素上在致电alert之前：

alert

查看相应的演示here。

此外，我建议您将我的演示中的修改代码与原始代码进行比较。例如，使用var $focused = $(":focus"); // get focus alert("hi"); $focused.focus();填充网格非常糟糕。而不是那个应该使用jqGrid的addRowData参数。

在jqgrid中点击警告框后，关注一个特定的单元格

1 个答案: