zoukankan      html  css  js  c++  java
  • 模拟ng-grid的checkbox功能

    <div ng-show="ordersDrugMasterVO.dispenseStatus == '1' && ordersDrugMasterVO.prescType == '0'"><!--已发药西药-->
      <table class="table table-striped table-bordered">
        <thead>
          <th ng-click="selectAll()">
            <input type="checkbox" name="allCheck" id="allCheck" checked ng-model="allSelectStatus">
          </th>
          <th class="th-one" colspan="3">退费项目及规格</th>
          <th class="th-three">可退数量</th>
          <th class="th-four">金额</th>
        </thead>
      </table>
       <div class="table-body" hr-self-height="$(window).height()-262">
         <table class="table table-striped table-bordered">
          <tbody ng-repeat="prescDetail in drugPrescDetailList">
            <tr>
              <td class="text-left td-checkbox" rowspan="2" class="td-2-bottom-border">
                <input name="box" onclick="window.event.cancelBubble=true;" ng-click="changeCheck(prescDetail)"
                  type="checkbox" id="detail_{{prescDetail.prescId}}_{{prescDetail.serialNo}}"is-check-box>
              </td>
              <td class="text-left td-one">{{prescDetail.drugName}}({{prescDetail.firmId}})&nbsp;&nbsp;
                {{prescDetail.packageSpec}}
              </td>
              <td class="text-left td-three">
                <div class="fix-width">
                  <div class="pull-left"><b>
                    <input type="text" number-only class="text-right" style=" 40px"
                      ng-model="prescDetail.quantity" ng-blur="checkQuantity($index)">&nbsp;&nbsp;{{prescDetail.packageUnits}}</b>               </div>              </div>           </td>           <td class="text-right td-four">             <div class="fix-width" ng-bind="prescDetail.costs | number : 2"></div>           </td>         </tr>       </tbody>     </table>   </div> </div>

    紫色标注的是全选,或者反选的checkbox

    绿色标注的是每一项的checkbox

    全选的方法:selectAll()

    function selectAll() {
      $("allCheck").attr("checked", $scope.allSelectStatus);
      $("input[name=box]").each(function () {
        if (this.id !== "detail__") {
          $(this).attr("checked", $scope.allSelectStatus);
        }
      });
      getSelectedItem();
    }

    getSelectedItem();

    function getSelectedItem() {
        var checkbox = $("input[name='box']");
         $scope.saveDetailList.length = 0;
         for (var i = 0; i < checkbox.length; i++) {
             if (checkbox[i].checked) {
                $scope.saveDetailList.push($scope.drugPrescDetailList[i]);
            } else if (checkbox[i].id !== "detail__") {
                     $("#allCheck").attr("checked", false);
                      $scope.allSelectStatus = false;
             }
          }
     }

     单选的方法:changeCheck(prescDetail)

    function changeCheck(detail) {
      $("#detail_" + detail.prescId + "_" + detail.serialNo).attr("checked", !$("#detail_" + detail.prescId + "_" + detail.serialNo).attr("checked"));
      getSelectedItem();
    }
  • 相关阅读:
    【leetcode】11. 盛最多水的容器
    【leetcode】8. 字符串转换整数 (atoi)
    【leetcode】6. Z 字形变换
    【leetcode】5. 最长回文子串
    【leetcode】LCP 19. 秋叶收藏集
    删除第一个节点问题
    问一个大学学习计算机这门专业的问题
    Struts文件上传页面上传后显示“连接已重置”
    2013-12-6 思杨没吃饱 饿醒了
    2013-12-7 snoopy乐园中的思杨
  • 原文地址:https://www.cnblogs.com/ms-grf/p/7125058.html
Copyright © 2011-2022 走看看