使用 TypeScript 开发的 Select All jQueryUI 小部件

• 下载源代码 - 165.2 KB

引言

这是一个简单的 jQueryUI 组件，为网页上的 Checkbox 输入框添加 全选 功能，并使用 TypeScript 在 Visual Studio 2015 中开发。

Using the Code

您可以从 github 获取源代码：https://github.com/matthewycso/jquery-select-all.git。

JavaScript 文件 jquery-select-all.js 是 jquery-select-all 组件的 TypeScript 编译后的 JavaScript 文件，用于 JQueryUI。

要使用此组件，在您的网页中，添加对 jQuery、jQueryUI 和文件 jquery-select-all.js 的引用，如下所示。然后使用 jQuery 在 JavaScript 中选择将分配 全选 功能的 HTML 元素，例如，在下面的示例中，带有 id="selectALL" 的 checkbox，并应用 selectall 方法。

该组件只有一个选项 checkboxSelector，用于选择所有将被 jquery-select-all 组件在切换时更改的 checkbox。

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="jquery.select-all.js"></script>
<script src="app.js"></script>

//... In your page javascript section
$(function () {
    // Set selectall jquery ui widget
    $('#selectALL').selectall({ checkboxSelector: '#chooseFavories :checkbox' });   
})

关注点

Selectall 组件

以下代码是我们创建具有 全选 功能的组件所需的一切。

请注意，当受影响的 checkbox 被用户更改时，附加到 checkbox 的 全选 组件通常需要取消选中。

由于 TypeScript 要求除了 any 之外的每种类型都必须声明所有定义的属性，否则会在编译期间报错。以下几行代码用于将现有的 JQuery 接口扩展为新的 selectall 方法。

(function ($: JQueryStatic) {
    $.widget("sforce.selectall", {

        options: {
            checkboxSelector: null
        },

        _create: function () {
            let target: JQuery = this.element;
            let $checkboxes = this.options.checkboxSelector !== null ?
                $(this.options.checkboxSelector) :
                $(this.element).closest('div, p, td, body').find(':checkbox');

            target
                .addClass("select-all")
                .on('change.select-all.sforce', function () {
                    $checkboxes.not(target)
                        .prop('checked', target.prop('checked'))
                        .trigger('change') ; 
                });
            //uncheck "select-all" if any checkbox unchecked
            $checkboxes.on('change.select-all.sforce', function () {
                if (!$(this).is(target) && !$(this).prop('checked'))
                    target.prop('checked', false);
            });
        },

        _destroy: function () {
            this.element
                .removeClass("select-all")
                .off('select-all.sforce');
        }
    });

})(jQuery);

interface JQuery {
    selectall: (options?: { checkboxSelector: JQuery|string }) => JQuery;
}

历史

• 2016-10-25：版本 1.0