Question

我想在附表中添加Search Text Box表。

我在我的表Demo中使用此示例，但这不符合我的要求。需要一些css restyling来改善...

在上面的示例中，您可以看到搜索框不在表格内，而css并不令人印象深刻，我需要像下面的图像这样的表格。这里的搜索框在表格内。对于我的桌面设计，我使用的是 angularjs

// Instantiate the app, the 'myApp' parameter must 
// match what is in ng-app
var myApp = angular.module('myApp', []);

// Create the controller, the 'ToddlerCtrl' parameter 
// must match an ng-controller directive
myApp.controller('ToddlerCtrl', function ($scope) {
  
  // Define an array of Toddler objects
  $scope.toddlers = [
    {
      "name": "Toddler One",
      "birthday": "1/1/2011",
      "happy": true
    },
    {
      "name": "Toddler Two",
      "birthday": "2/2/2011",
      "happy": true
    },
    {
      "name": "Toddler Three",
      "birthday": "3/3/2011",
      "happy": false
    }
  ];
  
});
myApp.directive('multiwareswitchitem', function() {
      return {
          restrict: 'E',
          scope: {
              value: '='
          },
          template: '<div>{{value.name}}  <div><small> Birthday {{value.birthday}} </div></small></div>'
      };
  });

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
    <style>
    .switchBox td {
        padding-right: 64px;
    }
    .switchBox .entBox {
        overflow:auto;height:10em; width:300px; border:1px solid #cccccc;  border-radius: 4px;float:left; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); padding-left: 15px; padding-top: 10px;focus: {border-color: #66afe9;};
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;

    }
    .switchBox .entBox div:hover {
        background-color: #3875D7;
    }
    .switchBox .entBox:focus {
      border-color: #66afe9;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .switchBox .eBox2.entBox {
        background-color: #444;
    }
</style>
  </head>
  <body>
    <div ng-controller="ToddlerCtrl">
      <table>
        <tr>
            <th>All Toddler*  
            <input type="text" name="fname" placeholder="Search City" ng-model="search.name">
           </th>
        </tr>
        <tr class="switchBox">
            <td>
                <div class="entBox">                        
                    <multiwareswitchitem ng-repeat="item in toddlers |filter: search" value="item">       
                    </multiwareswitchitem>                        
                </div>
            </td>
        </tr>
     </table>
    </div>
  </body>
</html>

Answer 1

您可以将jquery.datatable.js与angular.data table.js一起使用...它具有良好的表格模板，并且有一个搜索框，可以立即显示结果...您可以使用...我无法添加代码由于网络连接不良而导致的片段...但是如果你实施它，我会喜欢给出建议

Answer 2

根据需要使用自己的风格。我已经编辑了你的js fidler。你可能喜欢这个 -

html -

<body>
<div ng-controller="ToddlerCtrl" class="toddler-search-container">
  <label>All Toddler*</label>
  <div class="search-container">
    <input type="text" name="fname" placeholder="Search City" ng-model="search.name">
    <div class="entBox">                        
                <multiwareswitchitem ng-repeat="item in toddlers |filter: search" value="item">       
                </multiwareswitchitem>                        
            </div>  
  </div>

</div>

Css风格 -

body {
  font-size: 24px;
}

.toddler-search-container{
  width:100%;
  display:table;
  font-size:16px;
  font-family:calibri;
  position:relative;
}

.toddler-search-container label{
  font-weight:bold;
  float:left;
  display:block;
  margin-right:5px;
  position:relative;
}

.toddler-search-container .search-container{
  float:left;
  background:#ffffff;
  border:solid 1px #5897FB;
  display:table;
  padding:6px;
  border-radius:4px;
  box-shadow:1px 1px 5px #5897FB;
}

.toddler-search-container .search-container input{
  border:solid 1px #aaaaaa;
  margin:2px 0;
  box-shadow:inset 0 0 3px 2px #F3F3F3;
  padding:5px 5px;
}

.toddler-search-container .search-container .entBox{
  height:100px;
  overflow-y:scroll;
}

设计令人印象深刻的表和搜索框

2 个答案: