//-> Grid Sample data for demo purposes
var s1 = [];
var d2 = [];
//@@@@@@@@@@@@@@@@@@@@@@@@@@
//-> Grid Start
var configAddPaymentsEnter = {};
configAddPaymentsEnter.resizable = true
configAddPaymentsEnter.sortable = true;
configAddPaymentsEnter.navigatable = true;
configAddPaymentsEnter.pageable = false;
//{
// input: true,
// numeric: false
// };
configAddPaymentsEnter.editable =
{
createAt : 'bottom'
};
// configAddPaymentsEnter.addParams = { position: "last" };
configAddPaymentsEnter.columns = [
{
field: "ConnectionReference",
attributes: {
"navi-text": ""
},
headerTemplate: 'Connection Reference',
template: '<input ng-keydown="AA(this,$event)" type ="text" ng-model="dataItem.ConnectionReference" class="k-fill text-right aa" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
, aggregates: ["count"], footerTemplate: "No of Records: #=count-1#"
},
{
field: "ContractNumber",
attributes: {
"navi-text": ""
},
headerTemplate: 'Contract Number',
template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.ContractNumber" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
},
{
field: "Amount",
attributes: {
"navi-text": ""
},
headerTemplate: 'Amount',
template: '<input ng-keydown="AA(this,$event)" kendo-numeric-text-box type ="text" class="k-fill text-right aa" ng-model="dataItem.Amount" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
, aggregates: ["sum"], //footerTemplate: function (s1) { return "Total Amount: " + s1["dataItem.Amount"].sum; }
footerTemplate: "Total Amount: #=+sum#"
},
{
field: "ReferenceNumber",
attributes: {
"navi-text": ""
},
headerTemplate: 'Reference Number',
template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.ReferenceNumber" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
}
//,
//{
// field: "RowIndex",
// attributes: {
// "navi-text": ""
// },
// headerTemplate: 'RowIndex',
// template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.RowIndex" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
// width: "130px"
//}
];
configAddPaymentsEnter.scrollable = true;
configAddPaymentsEnter.dataSource = new kendo.data.DataSource({
data: [s1],
aggregate: [{ field: "ConnectionReference", aggregate: "count" },
{ field: "Amount", aggregate: "sum" }],
schema: {
model: {
id: "ID",
fields: {
'ConnectionReference': { editable: true, type: "number" },
'ContractNumber': { editable: true, type: "number" },
'Amount': { editable: true, type: "number" },
'ReferenceNumber': { editable: true, type: "number" }
//,
// 'RowIndex': { editable: false, type: "number" }
}
}
},
pageSize: 5000,
});
$scope.dgGridAddPaymentsEnter = new DataGrid();
$scope.dgGridAddPaymentsEnter.options(configAddPaymentsEnter);
$scope.Init = function (arg) {
$scope.dgGridAddPaymentsEnter.Init(arg);
};
$scope.Init = function (arg) {
$scope.dgGridAddPaymentsEnter.Init(arg);
};
$scope.submitForm = function () {
// var fun = $scope.callback();
// var d = $scope.dgGridAddPaymentsEnter.data();
// d.splice(0, 1);
// fun($scope.params.Qty, $scope.dgGridAddPaymentsEnter.data());
}
/////////////////////////////////////////////////////////////////////////////
$scope.AA = function (row, e) {
var key = e.keyCode ? e.keyCode : e.which;
if (key === 13) {
var focusedElement = $(e.target);
// var nextElement = focusedElement.parent().next();
var nextElement = focusedElement.closest('td').next();
//if (nextElement[0] == undefined) {
// // s1.push({ 'ConnectionReference': '1', 'ContractNumber': '2', 'Amount': '3', 'ReferenceNumber': '4' });
// var nextElement = focusedElement.closest('tr').next().children().eq(0);//next row's first column;
// nextElement.find('input').focus();
//}
if (nextElement.find('input').length > 0) {
setTimeout(function () {
nextElement.find('input').focus();
}, 10);
} else if ((nextElement.next().length) == 0) {
// if ($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last-child')) {
setTimeout(function () {
var index = 0;
$('.aa').eq(index).focus();
// var firstRow = $scope.dgGridAddPaymentsEnter.tbody.find('tr:first');
}, 10);
// var s1 = [];
s1 = $scope.dgGridAddPaymentsEnter.data();
$scope.dgGridAddPaymentsEnter.data([]);
var s = row.dataItem;
// var rowCounter = s1.length;
// console.log(rowCounter);
//s1.push({ 'ConnectionReference': '', 'ContractNumber': '', 'Amount': '', 'ReferenceNumber': '' });
s1.push({ 'ConnectionReference': s.ConnectionReference, 'ContractNumber': s.ContractNumber, 'Amount': s.Amount, 'ReferenceNumber': s.ReferenceNumber });
$scope.dgGridAddPaymentsEnter.data(s1);
// var addGrid = $scope.dgGridAddPaymentsEnter.data()
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="dgAddPaymentsEnterId" tabindex="0"
kendo-grid="dgAddPaymentsEnter1"
ng-init="Init('dgAddPaymentsEnterId')"
k-options="dgGridAddPaymentsEnter.options()">
</div>
http://i.stack.imgur.com/wkyxb.png the sample ui
我使用kendo网格作为数据输入表单。它有一个有四列的网格。单行有四个输入文本框（每列一个）用于数据输入。 第一次加载网格时，它应该有一行有四个输入，光标聚焦到第一次输入。 当用户输入一些数据并按＆＃39;输入＆＃39;键，焦点应移动到同一行中的下一个单元格输入。 当您在最后一列输入中按Enter键时，应在网格中添加一个新行，并且输入的数据应保存在网格中。焦点应该转到新行的第一个输入。所有单元格都应该是可编辑的，并且可以使用回车键进行导航。
有人可以在angularjs / javascript中给我一个解决方案吗？我使用带有剑道网格的angularjs。
答案 0 :(得分：0)
你想要实现的目标是可能的。但是很难在这里编写完整的代码，我不认为Angular或Kendo UI有直接的方法可以做到这一点（如果我错了，有人可以纠正我），在这种情况下你必须结合不同的技术。您可以查看DOM操作以在每个条目后动态包含所需的输入字段，并使用AngularJS进行数据绑定
