Question

我的任务是为业务开发一个捕获Web应用程序。该应用程序的目的是为一周中的每一天捕获多个（x24）KPI值。

企业希望能够在数据透视/转置表中捕获这些值。列： 1. KPI ID 2. KPI代码 3. KPI描述 4. - 10.选定周的天数。 5.对于每个KPI-Date组合，都有一个十进制值。

所有KPI都链接到国家/地区和工厂，由用户身份的用户数据确定。

到目前为止，我已经建立了基于： https://social.technet.microsoft.com/wiki/contents/articles/32770.dynamic-pivot-grid-using-mvc-angularjs-and-web-api.aspx

这帮了很多！（我目前的解决方案使用MVC 5，EF 5 Database First，Angularjs。）目前我的问题是编辑网格中的值。基于上述解决方案，使用ng-bind-html发送参数（KPI和日期列）计算值。我设置了contenteditable = true，这允许我物理捕获值.... 但是，似乎我无法对新的/更新的值做任何事情，因为它没有绑定到模型。

我希望所有这一切都有道理;鉴于上述情况，我的问题是：

如何通过存储过程将变更后的值发送回SQL？
我觉得这种做法对我想要完成的事情来说太过分了。任何人都可以提出更好的方法吗？

我目前的想法是使用

jquery捕获单元格上的change事件，并使用KPI和Date组合的行/列的ID。到目前为止，我一直没有成功。＆＃34;改变＆＃34;事件在触发时甚至不会给我提醒。
使用存储过程从SQL预转动的结果。但是......日期是动态的，并且会随着所选的每周而变化。我无法指定更改列的模型。

任何建议都将不胜感激。

这是我的angularjs控制器功能：

$scope.GetCaptureLinesPivot = function () {

    var response = Dropdownfactory.GetCaptureLinesPivot($scope.UserID, $scope.CountryID, $scope.PlantID, $scope.WeekDate)

   .then(function (success) {
       $scope.lines = success.data;

       angular.forEach($scope.lines, function (obj) {
           obj["showEdit"] = false;

       $scope.items = [];
       $scope.ColDays = [];
       $scope.values = [];

       var uniqueUser = {},
           uniqueKPICode = {},
           uniqueKPIDesc = {},
           uniqueDate = {},
           uniqueKPIValue = {},
           i;

       //compile list of unique dates. should be 7 
       for (i = 0; i < $scope.lines.length; i += 1)
       {
           uniqueDate[$scope.lines[i].Date] = $scope.lines[i];
       }

       for (i in uniqueDate)
       {
           $scope.ColDays.push(uniqueDate[i]);

       }


       var UniqueItem = {}, i
       for (i = 0; i < $scope.lines.length; i += 1) {
           UniqueItem[$scope.lines[i].KPIID] = $scope.lines[i];
       }

       for (i in UniqueItem) {

           var ItmDetails = {
               UserName: UniqueItem[i].UserName,
               KPIID: UniqueItem[i].KPIID,
               KPICode: UniqueItem[i].Code,
               KPIDesc: UniqueItem[i].Description,
               KPIValue: UniqueItem[i].Value
           };
           $scope.items.push(ItmDetails);
       }

获取数据返回结果：

0:Object
    Code:"XXXX"
    Country:"Botswana"
    CountryID:1
    CurrentUserID:6
    CurrentUserName:"DevPlant"
    Date:"2017-03-20T00:00:00"
    Description:"PD Km Travelled"
    KPIID:38
    Plant:"Francistown"
    PlantID:186
    UserID:6
    UserName:"DevPlant"
    Value:150
1:Object
    Code:"XXXX"
    Country:"Botswana"
    CountryID:1
    CurrentUserID:6
    CurrentUserName:"DevPlant"
    Date:"2017-03-21T00:00:00"
    Description:"PD Km Travelled"
    KPIID:38
    Plant:"Francistown"
    PlantID:186
    UserID:6
    UserName:"DevPlant"
    Value:160

控制器中将Value返回给cshtml的函数：

$scope.showWeekItemDetails = function (colUser, colKPI, colDay) {
    $scope.getLineVaue = 0;
    $scope.DayCount = 0;

    //alert(colUser + " " + colKPI + " " + colDay);

    for (i = 0; i < $scope.lines.length; i++) {
        if (colUser == $scope.lines[i].UserName) {
            if (colKPI == $scope.lines[i].KPIID) {
                if (colDay == $scope.lines[i].Date) {

                    $scope.getLineVaue = parseFloat($scope.lines[i].Value);
                }
            }
        }

    }
    return $sce.trustAsHtml("<b>" + $scope.getLineVaue.toString() + "</b>");

}

我目前的cshtml：

                        <td width="20"></td>


                        <td width="1" align="left" valign="bottom" ng-show="false"><b>KPIID</b></td>
                       <td width="1" align="left" valign="bottom" ng-show="false"><b>CID</b></td>
                       <td width="1" align="left" valign="bottom" ng-show="false"><b>PID</b></td>

                        <td width="180" align="left" valign="bottom"><b>Description</b></td>
                        <td width="30" align="left"><b></b></td>
                        <td align="center" valign="bottom" data-ng-repeat="Cols in ColDays | orderBy: 'Date':false">
                            <div>
                                <table class="table table-condensed" font-size 50%; >
                                    <tr>
                                        <td align="center" width="80"><b>{{Cols.Date | date: 'EEE'}}</b></td>
                                    </tr>
                                    <tr>
                                        <td align="center" width="80"><b>{{Cols.Date | date: 'dd MMM yy'}}</b></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                <tbody data-ng-repeat="itm in items">
                    <tr>
                        <td width="20" class="lineNo" >{{$index+1}}</td>
                        <td width="1" class="kpiID" ng-show="false" align="left">{{itm.KPIID}}</td>
                        <td width="1" align="left" class="kpiDesc" ng-show="false">{{itm.CountryID}} </td>
                        <td width="1" align="left" class="kpiDesc" ng-show="false">{{itm.PlantID}}</td>
                        <td width="180" align="left">
                            <span class="kpiDesc">{{itm.KPIDesc}}</span>
                        </td>
                        <td width="30" align="left">
                            <span></span>
                        </td>
                        <td align="center" data-ng-repeat="Col in ColDays| orderBy:'Date':false" >
                            <table class="table table-bordered batch-edit">
                                <tr>
                                    <td width="40" align="center">
                                        <span ng-bind-html="showWeekItemDetails(itm.UserName,itm.KPIID,ColsNew.Date)" contenteditable="true"></span>


                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
              </table>

可编辑的枢轴/部分转置的网格用于捕获

0 个答案: