需要在点击时突出显示jqxNumberInput的内容

时间:2015-03-03 19:44:02

标签: javascript jquery jqxgrid

我一直在努力获得一个非常简单的功能,使用jqxGrid和使用jqxNumberInput呈现的单元格

  editor.jqxNumberInput({ decimalDigits: 2, spinButtonsStep: 0.1, spinMode: "simple", decimalSeparator: decimalSeparator, groupSeparator: groupSeparator });

基本上当用户点击单元格时,光标一直放在文本(数字)的右边,我的老板想要突出显示单元格的内容(选中文本),这样用户就不必将光标向左移动以开始输入

我一直在挖掘jqx网格文档很长一段时间,似乎没有任何我能找到的东西来实现这一目标。 http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

我试图绑定到cellbeginedit事件并假设我可以使用该事件来获取目标元素并以此方式选择它,但event.target值是整个网格,而不是单元格本身。

 $(element).on('cellbeginedit', function (event) { // event.target == grid  not cell });

我还尝试使用getcell方法获取单元格,但这会返回该单元格的数据而不是元素本身。

 var cell = $(element).jqxGrid("getcell", args.rowindex, args.datafield);
 //  cell then equals the data for the row not with no reference to the 

有问题的元素 重申一下,我需要修改,hack update做某事,当用户点击jqxNumberInput并且单元格进入编辑模式时,单元格中的所有文本都被选中(突出显示)

非常感谢对此问题的任何帮助

1 个答案:

答案 0 :(得分:1)

您应该将编辑器自定义逻辑放在列的initeditor回调函数中。你可以尝试使用jqxNumberInput API,例如" focus"或用于选择输入中所有文本的代码。

var input = editor.find('input');
var length = input.val().length;
            try {
                if ('selectionStart' in input) {
                    input.focus();
                    input.setSelectionRange(0, length);
                }
                else {
                    var range = input.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character', length);
                    range.moveStart('character', 0);
                    range.select();
                }
            }
            catch (error) {
            }

在上面的代码中,editor是从jqxGrid传递到你的列的initeditor函数的参数。