Table 全选插件 jquery.table.checkall.js


代码

/// <reference path="jquery-1.8.2.min.js" />
/*
    Description: Make the table have the ablity to check and uncheck record[s]
    Written By Weihua Chang
    Version 1.0
    2015-06-15
*/
(function ($) {

    var methods = {
        getSelected: function () {

        }
    };

    var methodArr = ['getSelected'];

    // 表格形式
    //<table><tr><th><input type="checkbox" /></th></tr><tr><td><input type="checkbox" /><input type="hidden" value="1" /></td></tr></table>
    $.fn.checkAll = function (options) {
        var defaults = {
            chkIndex: 0,//checkbox 列索引
            keyIndex: 0,//隐藏域列索引
            header: 'th',//标题DOM标签
            debug: false,//是否开启调试模式
            method: '',
            init: function () { },//初始化函数
        };

        var selected = [];

        var opts = $.extend({}, defaults, options);
        var self = $(this);

        var chkAll = self.find('tr:eq(0) ' + opts.header + ':eq(' + opts.chkIndex + ') :checkbox');
        var chks = self.find('tr:gt(0) td:first-child :checkbox');

        if (!self.data('status')) {
            opts.init();
            chkAll.click(function () {

                selected = [];

                if (this.checked) {
                    chks.prop('checked', true).each(function () {
                        selected.push($(this).next().val());
                    });
                } else {
                    chks.prop('checked', false);
                }
                if (opts.debug) {
                    debug(selected.join(', '));
                }
            });

            chks.live('click', function () {

                var id = $(this).next().val();

                if (this.checked) {
                    selected.push(id);
                } else {
                    var index = $.inArray(id, selected);
                    selected.splice(index, 1);

                }
                if (opts.debug) {
                    debug(selected.join(' - '));
                }
                if (chks.length == chks.filter(":checked").length) {
                    chkAll.prop('checked', true);
                } else {
                    chkAll.prop('checked', false);
                }
            });

            self.attr('data-status', true);

        }

        if (opts.method.length == 0) {
            return self;
        }

        if ($.inArray(opts.method, methodArr) == -1) {
            return 'method ' + opts.method + ' is undefined';
        }
        if (opts.method == 'getSelected') {
            chks.filter(":checked").each(function () {
                selected.push($(this).next().val());
            });
            return selected;
        }

    };

    $.fn.checkAll.selected = function () {
        var selected = [];
        var self = $(this);
        var chks = self.find('tr:gt(0) td:first-child :checkbox');
        chks.filter(":checked").each(function () {
            selected.push($(this).next().val());
        });
    }

    // 私有函数:debug    
    function debug(val) {
        if (window.console && window.console.log)
            window.console.log(val);
    };

})(jQuery);

调用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestRepeater.aspx.cs" Inherits="WebApplication1.TestRepeater" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Repeater ID="RegionRepeater" runat="server">
                <HeaderTemplate>
                    <table id="RegionTable" border="1" style="width: 1000px; text-align: center; border-collapse: collapse;">
                        <thead style="background-color: red;">
                            <tr>
                                <th>
                                    <input type="checkbox" /></th>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <input type="checkbox" />
                            <input type="hidden" value="<%#Eval("ID") %>" />
                        </td>
                        <td>
                            <%#Eval("ID") %>
                        </td>
                        <td><%#Eval("Name") %></td>
                        <td><%#Eval("Description") %></td>
                        <td>
                            <a href="#!" data-rid="<%#Eval("id") %>">Edit</a>
                            <a href="#!" data-cmd="delete" data-rid="<%#Eval("id") %>">Delete</a>
                        </td>
                    </tr>

                </ItemTemplate>
                <FooterTemplate>
                    </table>  
                </FooterTemplate>
            </asp:Repeater>
        </div>
        <input type="button" id="Test" value="Test" />
        <script src="<%: ResolveUrl("~/Scripts/jquery-1.8.2.min.js") %>"></script>
        <script src="<%: ResolveUrl("~/Scripts/jquery.table.toolkit.js") %>"></script>
        <script>



            $(function () {

                var $chkAll = $('#RegionTable').checkAll({});

                $('#Test').click(function () {
                    console.log($chkAll.checkAll({ method: 'getSelected' }));
                });

            });
        </script>
    </form>
</body>
</html>

知识共享许可协议
《Table 全选插件 jquery.table.checkall.js》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告

A PHP Error was encountered

Severity: Core Warning

Message: PHP Startup: zip: Unable to initialize module Module compiled with module API=20060613 PHP compiled with module API=20090626 These options need to match

Filename: Unknown

Line Number: 0

Backtrace: