Question

我有一个表，在其列中我想要用户点击此列内的按钮弹出窗口出现有复选框，用户选中复选框后它将在同一列中显示为有按钮的输出以及将所选复选框和用户名的这些值发布到数据库（PHP）。我是初学者，我希望有人帮助我。

help.html代码：

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
myPopup = '';

function openPopup(url) {
myPopup = window.open(url,'popupWindow','width=640,height=480');
if (!myPopup.opener)
     myPopup.opener = self;
}
</SCRIPT>
</script>
</head>
<body>
<table border="1">
<tr>
<th> user name </th>
<th>product selected</th>
</tr>
<tr>
<td> <input type="text"/></td>
<td> <button onclick="openPopup('f.html')">select</button></td>
</body>
</html>

这是我的f.html代码：

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM NAME="popupForm">
<INPUT TYPE="checkbox" >Cell phone</br>
<INPUT TYPE="checkbox" >TV</br>
<INPUT TYPE="checkbox" >Book</br>
<INPUT TYPE="BUTTON" VALUE="Submit">
</FORM>
</BODY>

Answer 1

使用AngularJS，您可以这样做：

使用ajax请求从服务器获取数据。在演示中，我使用静态数据来降低复杂性。
创建ng-repeat以创建表格
将存储在数组中的选定数据添加到表格单元格中。
通过添加ng-click打开引导模式到表格单元格或将所选数据包装在按钮中，使列表可单击。
在模式中，使用所选产品创建包含ng-repeat的表单。测试是否单击了当前项目可以使用array.indexOf(item) !== -1来完成，如果项目在数组中，则返回true。
每次点击复选框都会更新产品数组。
单击“确定”按钮后，关闭模式并使用ajax请求将更新的数据发布到服务器。（检查数据是否有所改变。）

你也可以在没有AngularJS的情况下完成它，但我认为你必须做更多的代码才能获得这种行为。

（我对javascript和AngularJS也很陌生，所以代码并不完美，但它确实有效。）

可能有些事情可以改进，例如使用服务来执行ajax请求。

脚本中有一个错误：取消点击无法按预期工作。取消点击即可更改数据。您可以通过使用范围数据的副本来解决此问题，或者如果单击取消则还原原始数据。

样本

请在下面找到演示文稿（因为看起来bootstrap.ui使用的是不允许使用的Cookie），所以请点击jsFiddle。在jsFiddle检查它。它有效。

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('mainController', function($scope, $modal, $log) {
    $scope.products = ['coffee', 'beer', 'wine', 'tea', 'milk'];

    // userData will be later from server with $http.get('/phpscript').success(...)
    // just dummy userData here because no backend available    
    $scope.userData = [
        {
            name: 'John Doe',
            selectedProducts: [
                'coffee',
                'beer',
                'wine']
        },
        {
            name: 'Jane Doe',
            selectedProducts: [
                'coffee',
                'tea']
        }
    ];
    
    $scope.changeProducts = function(userData) {
        //$scope.items = ['item1', 'item2', 'item3'];

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            
            //size: size,
            resolve: {
                user: function() {
                    return userData;
                },
                selectedProducts: function() {
                    return userData.selectedProducts;
                },
                products: function () {
                    //console.log($scope.selectedProducts);
                    return $scope.products; // get all available products
                }
            }
        });
        
        modalInstance.result.then(function (selectedItems) {
            //products = selectedItems;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
});

app.controller('ModalInstanceCtrl', function ($scope, $http, $modalInstance, products, selectedProducts, user) {

  //console.log('user', user);
  $scope.products = products;
    
  $scope.selected = selectedProducts;

  $scope.chkChange = function(item) {
      console.log(item);
      var index  = $scope.selected.indexOf(item);
      if (index > -1) {
          $scope.selected.splice(index, 1);
      }
      else {
          // not selected --> we have to add it
          $scope.selected.push(item);
      }
      console.log($scope.selected);
  };
  //console.log(selectedProducts);
  $scope.ok = function () {
      // prepare everything for sending to sever
      // --> probably check here if the data have changed or not (not implemented yet)
      
      console.log('new selection', $scope.selected);
      var data = $.param({
            json: JSON.stringify({
                user: user.name,
                products: $scope.selected
            })
        });
      
      $http.post('/echo/json/', data)
          .success(function(data, status) {
              console.log('posted the following data:', data);
          });
      
      $modalInstance.close();//); $scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

//custom filter to display the selected products.
app.filter('array', function() {
    return function(input) {
        //console.log(input);
        return input.join(', ');
    };
});

body {
    padding: 5px;
}

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="myApp">
<div ng-controller="mainController">
    <script type="text/ng-template" id="myModalContent.html">
        <!-- template for modal -->
            <div class="modal-header">
                <h3 class="modal-title">Choose your products!</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="checkbox" ng-repeat="item in products">
                        <label> 
                            <input type="checkbox" ng-click="chkChange(item)" ng-checked="selected.indexOf(item) !== -1"/>
                            {{item}}
                        </label>
                    </div>    
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>
    
    <table class="table">
        <tr>
            <th>User name</th>
            <th>products selected</th>
        </tr>
        <tr ng-repeat="user in userData">
            <td>{{user.name}}</td>
            <td><button ng-click="changeProducts(user)">{{( user.selectedProducts | array ) || 'nothing selected!' }}</button></td>
        </tr> 
    </table>
</div>
</div>

创建具有表单内容的弹出窗口，然后在父页面中显示输出并发送到数据库

1 个答案:

样本