个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
html5 有像这样的数字输入类型
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<input type="number" />
</body>
</html>
在这种情况下，非数字字符在输入时被禁用。 native 纯数字小键盘会自动出现在触摸设备中。
如何强制免费 jqgrid 字段编辑使用此类型？
jgrid列定义为
{"label":"Quantity","name":"Valkogus",
"index":"Valkogus","align":"right",
"searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},
"editoptions":{"maxlength":7,
"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},
{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},
"editable":true,"width":62,
"classes":null,"hidden":false},
jqgrid 是从远程 json 数据创建的。使用内联和表单编辑和搜索工具栏。这允许输入任何字符。在触摸设备中出现全键盘。
如何解决此问题以便在编辑和工具栏搜索中此字段显示为带有 type="number" 属性？
如何指定输入只能是整数还是允许有小数位？也许 html5 验证属性也添加到为此创建的输入元素中。
在 How to use native date picker in both form and row editing in free jqgrid 中回答描述了 html5 原生日期选择器的用法。也许这也可以用来输入数字
更新
我使用来自的示例创建了客户格式化程序
Add multiple input elements in a custom edit type field
科尔模型:
{"edittype":"custom",
"name":"Kogus",
"align":"right",
"searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},
"editoptions":{"custom_element":function(value, options) {
return numeric_element(value, options,'58','Kogus','RidG','ArtKogus')}
,
"custom_value":combobox_value,
"maxlength":12,
"style":"text-align:right",
"readonly":null,
"disabled":null
},
"editable":true,
"width":58,
"classes":null,
"hidden":false
},
JavaScript
function numeric_element(value, options, width, colName, entity, andmetp) {
var elemStr, newel;
elemStr = '';
if (options.id === options.name) {
elemStr += '<input type="number" class="FormElement" size="' +
options.size + '"' + ' id="' + options.id + '"';
}
else {
elemStr += '<input type="number" ' +
' style="text-align: right; width: 100%; box-sizing: border-box;" ' +
' id="' + options.id + '" maxlength="'+ options.maxlength+'" name="'+options.name+'"';
}
elemStr += ' value="' + value + '"/>';
newel = $(elemStr);
return newel;
}
function combobox_value(elem, operation, value) {
if (operation === 'get') {
return $(elem).find("input").val();
} else if (operation === 'set') {
$('input', elem).val(value);
}
}
如果开始内联编辑，单元格中的数字会消失。按内联保存按钮后，出现错误 function 'custom_value' undefined。
如何解决这些问题？
最佳答案
当然可以实现对 type="number" 的支持属性和其他 HTML5 type免费 jqGrid 中的属性。我会考虑在未来这样做。今天，我将缺少的locale 支持 视为 HTML5 的一大缺点 type .我认为这是设计错误。我推荐你看看the answer或 the article或 this one from W3 .例如，您可以尝试修改 the standrad demo来自 the article使用
<input type="number" name="quantity" min="0.01" max="10" lang="de">
您会看到 Google Chrome v.46 忽略了 lang属性并使用 Web 浏览器的区域设置。换句话说，HTML5 的当前状态 type属性尚未准备好支持多语言。
您可以使用 pattern属性以获得更好的验证(参见 the ansewr )，但它仍然无助于强制使用 ,而不是 .在具有英语语言环境的 Web 浏览器中。
如果您确实需要使用 type="number"现在属性，你可以使用edittype: "custom" .您可以在 the answer 中找到带有示例的演示例如。
最后我想提一下，我上次在 stackoverflow 上看到很多问题，这些问题看起来像是功能请求或要求实现某些部分，有人想在他的商业产品中使用这些部分。我在空闲时间开发免费的 jqGrid。我免费提供工作成果。我只是要求通过 PayPal 捐赠来为开发做出贡献(参见 the readme )。另一方面，我得到的捐赠很少，而且大多数开发人员更愿意只使用开发的结果。真遗憾。至少可以与其他人分享他的成果(以代码片段的形式)。 Stackoverflow 和 GiHub 不是让你免费工作的地方。可以给你一些提示，但你仍然必须自己充分利用这项工作。
已更新:可以使用 editoptions在 <input> 上设置自定义属性元素，但正如我之前所写，它并非在所有情况下都有效。
演示 http://jsfiddle.net/OlegKi/kvtrtzc5/2/例如在我的 Google Chrome 中运行良好，但它可能无法正常用于其他输入数据或 Chrome 浏览器的其他区域设置。因此我不认为演示是解决方案，它在某些环境中可能仍然有用。我在演示中使用了列的以下定义 "amount" :
{
name: "amount",
width: 62,
template: "number",
editoptions: {
type: "number",
step: "0.01",
min: "0.00",
max: "1000",
pattern: "[0-9]+([\.|,][0-9]+)?",
title: "This should be a number with up to 2 decimal places."
}
}
更新 2: 另一个演示 http://jsfiddle.net/OlegKi/kvtrtzc5/3/使用德语语言环境显示数据。如果您在 Google Chrome 中使用德语 GUI 语言(必须重新启动 Google Chrome 进程，最好注销并从系统登录)，那么用户将看到 ,作为小数点分隔符。
Web 应用程序在选择输入元素的语言环境方面仍然没有灵 active 。结果仅取决于网络浏览器设置，无法在 JavaScript 应用程序中指定。
关于javascript - 如何允许在 free-jqgrid 中输入 html5 数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33756048/
24
4
0
我的 jqgrid 中有一个状态栏。 如果状态为事件，我希望同一行中的另一个单元格为绿色。如果状态为“未激活”，我希望单元格为红色。 如何做到这一点？ 截至目前，我已经在“图像”行上创建了一个自定义格
我正在使用 jqgrid 显示服务器中存在的数据如何在鼠标悬停工具提示上显示数据描述。 这是在 jqgrid 上显示工具提示的最佳方式？ 最佳答案 鼠标悬停时 jqGrid 中显示的工具提示只不过是相
我有一个 asp.net 项目，它使用 jqgrid 作为 javascript 网格。如何找出正在使用的 jqgrid 版本？ 最佳答案 如果您需要以编程方式查询版本，您可以使用: $.jgrid.
有没有办法以编程方式(在 Javascript 中，而不是服务器端)过滤当前显示在 jqGrid 中的数据？所有搜索示例似乎都依赖于使用 jqGrid 自己的搜索 UI，这对我不起作用。例如，我希望能
有没有一种方法可以切换网格的multiselect选项？ 如果在创建网格时multiselect不是multiselect，则更改网格的TRUE参数并要求重新加载具有禁用或不创建标题列时将标题留在后面
我在jqGrid中使用列重新排序功能 $grid = jQuery("#list").jqGrid({ sortable:true, ... }); 重新排列列后是否会触发事件？如果有
我正在构建我的第一个ASP.NET MVC 3应用程序并使用jqGrid。我的其中一个列“Flavor Created”是日期列，我想使用DatePicker过滤该列上的网格。当前发生的情况是:用户单
我试图基于选定的行启用导航。因此，用户从jQgrid中选择一行，然后按show(有一个显示网格的按钮，我看到了edit，add等)，它需要根据url转到新页面(该行的一部分) )。 $(documen
有没有办法设置 jqgrid 列的固定宽度(最大和最小)？ 我已经在 colmodel 中设置了宽度属性，但是如果我调整网格的大小，列正在调整。 最佳答案 不能定义列的最大和最小宽度，但可以使其具有固
我被困在这里-生产前要做的最后一件事。 来自oracle的日期采用以下格式：“ 8/14/2012 10:46:48 AM” 我在jqgrid上使用以下内容： { name: 'CreationDat
我是 jqGrid 的新手，谁能解释一下 jqgrid colModel 中 Index 属性的用途 最佳答案 如果您使用datatype: "json" 或datatype: "xml" 没有额外使
我正在学习 jqGrid，希望最终能将它连接到 Redis 数据库。作为第一步，我正在处理本地数据。这是我必须使用可排序行(在网格中拖放行)。网格出现并且看起来不错，列甚至可以排序，但我无法选择一行并
我想每 5 分钟重新加载一次 jqgrid(给定间隔时间)，是否有任何选项/事件。如何做到这一点？ 最佳答案 您可以使用setInterval JavaScript函数进行自动刷新 var grid
我正在学习 jqGrid，希望最终能将它连接到 Redis 数据库。作为第一步，我正在处理本地数据。这是我必须使用可排序行(在网格中拖放行)。网格出现并且看起来不错，列甚至可以排序，但我无法选择一行并
大家好，我正在使用 JQ Grid，我得到的日期格式是 2012-09-16T00:00:00，就像这样。我希望日期格式采用 2012-09-16 方式。我试图改变它，但它不起作用。请查看我的代码并告
当我搜索 JQGrid 使用的图标时，我找到了包含所有图标的单个 PNG 文件。我想知道它如何使用图像的一部分作为 JQGrid 中使用的按钮的图标。 最佳答案 jqGrid 使用来自 jQuery
我使用 loadonce 预先获取所有数据，然后在本地进行排序和过滤。 我的列值之一是一个对象数组。在 colModel 选项中，我使用了如下所示的格式化程序函数: function my_forma
我想要在 jqGrid 中右键单击列标题时的列名称。任何代码将不胜感激。 最佳答案 可以绑定(bind)contextmenu事件到所有列标题。每个标题都是 元素等它的 DOM 支持 cellInde
我想计算总计 无需在 calctotal.php 中执行即可即时完成。从本质上讲，这是一个计算列。我想使用一些事件，如 afterInsertRow ，但即使没有事件，它也会将列数据移动一格，因为 X
我有一些数据想在 jqqgrid 中显示。除了添加、编辑和删除之外，还可以对选定记录执行其他操作。我喜欢在该记录的行中有一个用于该操作的按钮/链接的流程。有没有办法在 jqgrid 中添加未绑定(bi
我是一名优秀的程序员,十分优秀！