堆栈内存溢出
  繁体   English   中英

带有AngularJs的Kendo UI：当用户在网格中选择行时，如何在文本框字段上绑定数据

[英]Kendo UI with AngularJs: How to bind data on textbox fields when user select row in a grid

 原文  2016-04-12 07:56:26  7   1    javascript/ angularjs/ kendo-ui/ kendo-ui-grid

问题描述

我正在使用Kendo UI和角度网格应用程序。 在我的应用程序中，我定义了Kendo TabStrip。 在第一个选项卡中，我具有带有数据的Kendo UI网格，第二个选项卡包含适当的文本框字段，当用户在网格中选择某行时将填充这些文本框字段。 加载页面时，数据填充了我的网格，它可以正常工作，但是绑定到文本框字段的数据无法正常工作。 用户在网格中选择行时如何在文本框字段上绑定数据？

这是我的JSON数据（在单独的文件中）： 

[
  { "Id": 1, "AccountNo": "10236", "PostingDate": "20.01.2015", "MaturityDate": "24.01.2015", "Description": "description1", "DocumentType": "doc1" },
  { "Id": 2, "AccountNo": "10648", "PostingDate": "26.01.2015", "MaturityDate": "28.01.2015", "Description": "description2", "DocumentType": "doc2" },
  { "Id": 3, "AccountNo": "10700", "PostingDate": "22.01.2015", "MaturityDate": "25.01.2015", "Description": "description3", "DocumentType": "doc3" },
  { "Id": 4, "AccountNo": "10810", "PostingDate": "24.01.2015", "MaturityDate": "27.01.2015", "Description": "description4", "DocumentType": "doc4" },
  { "Id": 5, "AccountNo": "10101", "PostingDate": "29.01.2015", "MaturityDate": "30.01.2015", "Description": "description5", "DocumentType": "doc5" },
  { "Id": 6, "AccountNo": "10364", "PostingDate": "25.01.2015", "MaturityDate": "31.01.2015", "Description": "description6", "DocumentType": "doc6" }


]

这是我的角度服务（在单独的文件中）： 

angular.module("app").factory('myService', function ($http) {

  return {
      getAll: function (onSuccess, onError) {
          return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {
              onSuccess(data);
          }).error(function (data, status, headers, config) {
              onError(data);
          });
      }
  }


});

这是我的控制器（在单独的文件中）： 

var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {

$scope.tabStrip = null;
$scope.$watch('tabStrip', function () {
    $scope.tabStrip.select(0);
});

$scope.masterDataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            url = "/Scripts/app/data/json/master/masterGridData.js",
            myService.getAll(function (data) {
                options.success(data);
            }).error(function (data) {
                options.error(data);
            })
        }
    },
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                AccountNo: { type: "string" },
                PostingDate: { type: "string" },
                MaturityDate: { type: "string" },
                Description: { type: "string" },
                DocumentType: { type: "string" }
            }
        }
    },
    pageSize: 16
});

$scope.gridMaster = {
    columns: [
            { field: "Id", hidden: true },
            { field: "AccountNo", title: "Account No", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
            { field: "PostingDate", title: "Posting Date", width: "70px" },
            { field: "MaturityDate", title: "Maturity Date" width: "70px" },
            { field: "Description", title: "Description", width: "170px" },
            { field: "DocumentType", hidden: true }
    ],
    dataSource: $scope.masterDataSource,
    selectable: true,
    filterable: true,
    scrollable: true,
    pageable: {
        pageSize: 16,
        //refresh: true,
        pageSizes: ["50", "100", "200", "All"]
    },
    toolbar: [{
        name: "create"
    }]
};


});

这是我的HTML： 

<html>
<head>
    <!-- css and javaScript files -->
</head>
<body ng-app="app" ng-controller="myController">
     <div class="divH3Style">
         <h3 class="h3LabelForm">Grid Master</h3>
     </div>
     <div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip">
                            <ul>
                                <li>Overview</li>
                                <li>Update</li>
                            </ul>


                        <div id="tabstrip-1">
                            <div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">
                            </div>
                        </div>

                        <div id="tabstrip-2" style="overflow: hidden">
                            <div id="tabStrip2Half1">
                                <div class="divHeightStyle">
                                    <label for="accountNumber" class="labelTextSize">Account Number:</label>
                                    <input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="masterDataSource.data.AccountNo" placeholder="Account Number" />
                                </div>
                                <div class="datepickerStyle">
                                    <label for="postingDate" class="labelTextSize">Posting Date:</label>
                                    <input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="masterDataSource.data.PostingDate" />
                                </div>
                                <div class="divHeightStyle">
                                    <label for="desccription" class="labelTextSize">Description:</label>
                                    <input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="masterDataSource.data.Description" />
                                </div>
                                <div class="datepickerStyle">
                                    <label for="maturityDate" class="labelTextSize">Maturity Date:</label>
                                    <input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="masterDataSource.data.MaturityDate" />
                                </div>
                            </div>
                            <div id="tabStrip2Half2">
                                <div class="divHeightStyle">
                                    <label for="documentType" class="labelTextSize">Document Type:</label>
                                    <input id="documentType" type="text" class="k-textboxField" name="documentType" placeholder="Document Type" ng-model="masterDataSource.data.DocumentType" />
                                </div>

                                <div>
                                    <button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
                                    <button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
</body>
</html>

任何帮助将非常有用。

1 个解决方案

解决方案1
 1 已采纳  2016-04-12 13:46:53

我正在解决这个问题。 我在$ scope.gridMaster中添加了更改事件功能： 

$scope.gridMaster = {
    ...
    change: function () {
        var dataItem = this.dataItem(this.select());
        $scope.accountNumber = dataItem.AccountNo;
        $scope.postingDate = dataItem.PostingDate;
        $scope.description = dataItem.Description;
        $scope.maturityDate = dataItem.MaturityDate;
        $scope.documentType = dataItem.DocumentType;
    }
}

我在HTML页面中更改了ng-model： 

<div id="tabstrip-2" style="overflow: hidden">
                        <div id="tabStrip2Half1">
                            <div class="divHeightStyle">
                                <label for="accountNumber" class="labelTextSize">Account Number:</label>
                                <input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="accountNumber" placeholder="Account Number" />
                            </div>
                            <div class="datepickerStyle">
                                <label for="postingDate" class="labelTextSize">Posting Date:</label>
                                <input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="postingDate" />
                            </div>
                            <div class="divHeightStyle">
                                <label for="desccription" class="labelTextSize">Description:</label>
                                <input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />
                            </div>
                            <div class="datepickerStyle">
                                <label for="maturityDate" class="labelTextSize">Maturity Date:</label>
                                <input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="maturityDate" />
                            </div>
                        </div>
                        <div id="tabStrip2Half2">
                            <div class="divHeightStyle">
                                <label for="documentType" class="labelTextSize">Document Type:</label>
                                <input id="documentType" type="text" class="k-textboxField" name="documentType" placeholder="Document Type" ng-model="documentType" />
                            </div>

                            <div>
                                <button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
                                <button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
                            </div>
                        </div>
                    </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将Kendo网格数据绑定到angularjs中的范围变量？ 主从-kendo ui网格（当在主网格中选择行时在详细信息网格中获得条目） 如何在文本值更改时获取 Kendo-UI 网格行数据 angularjs中的Kendo UI网格 如何在剑道网格上向文本框显示所选行 用户仅在ui-grid上选择行后如何绑定？ Kendo UI Grid按数据项选择 如何在Kendo UI TreeList / Grid中获得一行？ 如何在Kendo UI网格中隐藏行 我想在 MVC UI 的剑道网格中展开和折叠 select 上的行
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM