• js 表格上checkbox 全选


    <table class="layui-table">
            <thead>
                <tr>
                    <th width="75">
                        <input type="checkbox" style="margin-right: 2px;" class="allCheck" onclick="checkAll(this)" title="全选" id="user-all" lay-skin="primary">全选
                    </th>
                    <th width="50">ID</th>
                    <th>企业</th>
                    <th>名称</th>
                    <th width="100">手机号</th>
                    <th>Email</th>
                    <th>类型</th>
                    <th>权限</th>
                    <th width="80">状态</th>
                    <th width="150">接入时间</th>
                    <th width="150">最后登录时间</th>
                    <th width="100">操作</th>
                </tr>
            </thead>
            <tbody id="x-link">
            <?php foreach ($model as $key=>$var):?>
                <tr>
                    <td>
                        <input type="checkbox" rel="sonBox" value="<?=$var->id;?>" lay-skin="primary">
                    </td>
                    <td><?=$var->id?></td>
                    <td><?=appmodelsCompany::getNameById($var->company_id);?></td>
                    <td><?=$var->name?></td>
                    <td><?=$var->mobile?></td>
                    <td><?=$var->email?></td>
                    <td><?=appmodelsUser::$types[$var->type];?></td>
                    <td></td>
                    <td class="td-status">
                    <?php if ($var->status == appmodelsTool::JSON_STATUS_SUC):?>
                        <a class="layui-btn layui-btn-normal layui-btn-mini" id="user_status" title="确定切换状态?" href="<?=Url::to(['setstatus','id'=>$var->id])?>" data-ajax="confirm">
                            <?=appmodelsUser::$statusArr[$var->status];?>
                        </a>
                    <?php elseif($var->status == appmodelsTool::JSON_STATUS_ERROR):?>
                        <a class="layui-btn layui-btn-primary layui-btn-mini" id="user_status" title="确定切换状态?" href="<?=Url::to(['setstatus','id'=>$var->id])?>" data-ajax="confirm">
                            <?=appmodelsUser::$statusArr[$var->status];?>
                        </a>
                    <?php else:?>
                        <a class="layui-btn layui-btn-disabled layui-btn-mini" id="user_status">
                            <?=appmodelsUser::$statusArr[$var->status];?>
                        </a>
                    <?php endif;?>
                    </td>
                    <td><?=date('Y-m-d H:i:s',$var->create_time)?></td>
                    <td>
                        <?=date('Y-m-d H:i:s',$var->last_login_time)?><br>
                        登录IP:<?=$var->last_login_ip?><br>
                        登录数量:<?=$var->login_nums?>
                    </td>
                    <td class="layui-nav x-doing">
                        <div class="layui-nav-item">
                            <a href="<?=Url::to(['useredit','id' => $var->id])?>" data-ajax="dialog" data-width="500" data-height="600" class="layui-btn layui-btn-small">编辑</a>
                            <dl class="layui-nav-child layui-anim layui-anim-upbit">
                                <a href="<?=Url::to(['userpass','id' => $var->id])?>" data-ajax="dialog" data-width="500" data-height="200" >修改密码</a>
                                <a href="<?=Url::to(['userdel','id' => $var->id])?>" data-ajax="delete" style="text-align: center;">删除</a>
                            <?php if($var->status != -1):?>
                                <a class="layui-btn layui-btn-small layui-btn-danger" title="确定该用户已离职?" href="<?=Url::to(['setstatus', 'id'=>$var->id, 'status_1' => -1])?>" data-ajax="confirm">离职</a>
                            <?php endif;?>
                            </dl>
                        </div>
                    </td>
                </tr>
            <?php endforeach;?>
            </tbody>
        </table>
    <script>
    var
    xuanzhong = []; var lengthTr = $("#x-link").children("tr").length; $(function () { //选中个别 $(document).on('click','input[rel=sonBox]',function(){ if(xuanzhong.length > 0) { $('.showBtn').removeClass('layui-btn-disabled'); } var id = $(this).val(); if($(this).is(':checked')) {//选中 $('.showBtn').removeClass('layui-btn-disabled'); xuanzhong.push(id); if(xuanzhong.length == lengthTr) { $('#user-all').prop("checked", true); } } else {//取消选中 for(var i in xuanzhong) { if(xuanzhong[i] == id) { xuanzhong.splice(i, 1); } } if(xuanzhong.length == 0) { $('.showBtn').addClass('layui-btn-disabled'); } $('.allCheck').removeAttr('checked'); } }); }); /** * 全选 */ function checkAll(obj) { if($(obj).is(':checked')) {//全选 $('.showBtn').removeClass('layui-btn-disabled'); var resultId = []; var i=0; $('input[rel=sonBox]').each(function(){ $(this).prop('checked',true); if($(this).prop('checked')){ resultId[i] = $(this).val(); i++; } }); xuanzhong = resultId; return resultId; } else {//取消全选 $('.check').removeAttr('checked'); $('.showBtn').addClass('layui-btn-disabled'); $('input[rel=sonBox]').each(function(){ $(this).prop('checked', false); }); xuanzhong = []; return false; } } </script>
  • 相关阅读:
    mysql创建和删除表
    性能测试工具curlloader(linux)
    Linux安装与硬盘分区
    linux那点事儿(上)
    Linux文件传输与mysql数据库安装
    性能测试工具curlloader二测试分析
    菜鸟学自动化测试(六)selenium 命令之文字范本匹配
    git/github初级运用自如
    开源自动化测试框架Tellurium
    菜鸟学自动化测试(五)selenium命令之定位页面元素
  • 原文地址:https://www.cnblogs.com/l-zl/p/11345935.html
Copyright © 2020-2023  润新知